On narrow screens, the header table can overflow when the logo, main links, and search controls compete for one row.
At 768px and below, reflow the first header row into a two-column grid, move the form below the main cell, and allow horizontal scrolling for form controls. This keeps overflow contained to the header form instead of widening the page. Signed-off-by: Rito Rhymes <[email protected]> --- cgit.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/cgit.css b/cgit.css index 6063f63..e0fb696 100644 --- a/cgit.css +++ b/cgit.css @@ -906,6 +906,70 @@ div#cgit table.ssdiff td.space div { } @media (max-width: 768px) { + div#cgit table#header tr:first-child { + display: grid; + grid-template-columns: 96px minmax(0, 1fr); + column-gap: 10px; + row-gap: 0.35em; + align-items: end; + } + + div#cgit table#header td.logo { + grid-column: 1; + grid-row: 1 / span 2; + width: 96px; + margin-bottom: 0; + } + + div#cgit table#header td.main { + grid-column: 2; + grid-row: 1; + white-space: normal; + padding-left: 0; + } + + div#cgit table#header td.form { + grid-column: 2; + grid-row: 2; + text-align: left; + padding-right: 0; + padding-left: 0; + padding-top: 0.35em; + white-space: nowrap; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + div#cgit table#header tr:nth-child(2) { + display: block; + width: 100%; + } + + div#cgit table#header tr:nth-child(2) td.sub { + display: block; + width: 100%; + box-sizing: border-box; + padding-left: 0; + } + + div#cgit table#header td.sub.right { + text-align: left; + border-top: 0; + padding-top: 0.25em; + } + + div#cgit table#header td.form form { + display: inline-flex; + flex-wrap: nowrap; + align-items: center; + gap: 0.35em; + white-space: nowrap; + } + + div#cgit table#header td.form select { + max-width: 100%; + } + div#cgit table.tabs { display: block; width: 100%; -- 2.51.0
