Fine-tune UI: Fix icon position below 768px, optimize plugin name wrapping widths at all breakpoints, and align compatibility checkmark

This commit is contained in:
Marcus Quinn
2025-03-17 03:07:56 +00:00
parent 0099ed96c3
commit 140b028499

View File

@ -77,6 +77,26 @@
/* Responsive behavior is now handled in the mobile styles section below */ /* Responsive behavior is now handled in the mobile styles section below */
/* Desktop specific adjustments for plugin name width */
@media screen and (min-width: 1201px) {
body.wp-admin .plugin-card .name.column-name {
width: calc(95% - 120px) !important;
}
}
/* Specific adjustments for very small screens */
@media screen and (max-width: 768px) {
body.wp-admin .plugin-card .plugin-icon {
left: 35px !important;
}
body.wp-admin .plugin-card .name.column-name {
margin-left: -35px !important;
padding-left: 35px !important;
width: calc(90% - 155px) !important;
}
}
/* Mobile styles - now working with correct positioning */ /* Mobile styles - now working with correct positioning */
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card { body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
@ -200,6 +220,15 @@
line-height: 13px !important; line-height: 13px !important;
} }
/* Fix checkmark and text alignment at small screen sizes */
@media screen and (max-width: 768px) {
body.wp-admin .plugin-card .compatibility-compatible::before,
body.wp-admin .plugin-card .compatibility-untested::before {
position: relative !important;
top: -5px !important;
}
}
/* Note: Text color moved outside media query to apply globally */ /* Note: Text color moved outside media query to apply globally */
/* Ensure compatibility text container has full width */ /* Ensure compatibility text container has full width */