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:
@ -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 */
|
||||||
|
Reference in New Issue
Block a user