| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | @use '../checkbox'; |
| 2 | +@use '../theme'; | |
| 2 | 3 | |
| 3 | 4 | // The pagination group and view toggle wrap together as one end-pinned |
| 4 | 5 | // cluster so narrow viewports never split them across rows. |
| 5 | 6 | .tablenav .tablenav-end-group { |
| @@ -64,9 +65,9 @@ | ||
| 64 | 65 | inline-size: 237px; |
| 65 | 66 | } |
| 66 | 67 | |
| 67 | 68 | .wrap .snippets-search-area input[type='search'] { |
| 68 | - border-color: #e3e3e4; | |
| 69 | + border-color: var(--cs-color-border); | |
| 69 | 70 | } |
| 70 | 71 | |
| 71 | 72 | // Tablet widths: let the search area grow to fill the remainder of its row |
| 72 | 73 | // while the fixed-width selects keep their sizing and groups wrap naturally. |
| @@ -78,8 +79,16 @@ | ||
| 78 | 79 | } |
| 79 | 80 | } |
| 80 | 81 | |
| 81 | 82 | @media (width <= 782px) { |
| 83 | + // Wide table columns scroll inside the results region instead of extending | |
| 84 | + // the WordPress admin document horizontally. | |
| 85 | + .snippets-list-view { | |
| 86 | + max-inline-size: 100%; | |
| 87 | + overflow-x: auto; | |
| 88 | + overscroll-behavior-inline: contain; | |
| 89 | + } | |
| 90 | + | |
| 82 | 91 | p.search-box { |
| 83 | 92 | float: inline-start; |
| 84 | 93 | position: initial; |
| 85 | 94 | margin-block: 1em 0; |
| @@ -86,12 +95,23 @@ | ||
| 86 | 95 | margin-inline: 0; |
| 87 | 96 | block-size: auto; |
| 88 | 97 | } |
| 89 | 98 | |
| 90 | - // Mobile: the search area takes a full row of its own, and the action | |
| 91 | - // groups stay visible (core admin hides .tablenav.top .actions here). | |
| 99 | + | |
| 100 | + // Mobile keeps the filters compact. Pagination remains below the results, | |
| 101 | + // avoiding a second navigation cluster above the table. | |
| 102 | + .tablenav.top .tablenav-pages-nav { | |
| 103 | + display: none; | |
| 104 | + } | |
| 105 | + | |
| 106 | + .tablenav.top .tablenav-end-group { | |
| 107 | + margin-inline-start: 0; | |
| 108 | + } | |
| 109 | + | |
| 92 | 110 | .tablenav .snippets-search-area { |
| 93 | - flex-basis: 100%; | |
| 111 | + flex: 0 1 20rem; | |
| 112 | + inline-size: min(100%, 20rem); | |
| 113 | + max-inline-size: 20rem; | |
| 94 | 114 | } |
| 95 | 115 | |
| 96 | 116 | .tablenav .alignleft.actions { |
| 97 | 117 | display: flex; |
