💄 (ui): Stop the header forcing horizontal scroll on narrow viewports
Changes
1 file changed, +21 -0
MODIFY
src/main/resources/META-INF/resources/shark.css
+21 -0
@@ -323,6 +323,27 @@
323
323
border-radius: var(--radius-sm);
324
324
}
325
325
326
+/* On narrow viewports the brand + search + nav no longer fit on one row; without wrapping they
327
+ force the whole page wider than the screen (horizontal scroll). Collapse to two rows instead:
328
+ brand and nav share the top row, the search box drops to a full-width row of its own. */
329
+@media (max-width: 640px) {
330
+ header.site {
331
+ flex-wrap: wrap;
332
+ row-gap: var(--s3);
333
+ }
334
+
335
+ header.site nav {
336
+ flex-wrap: wrap;
337
+ justify-content: flex-end;
338
+ gap: var(--s3);
339
+ }
340
+
341
+ header.site .nav-search {
342
+ order: 10;
343
+ flex: 1 1 100%;
344
+ }
345
+}
346
+
326
347
main {
327
348
max-width: var(--content-w);
328
349
margin: var(--s6) auto;