On narrow screens, the tabs row and search form can overflow and create page-wide horizontal scrolling.
Add a 768px mobile breakpoint that turns the tabs table into a horizontal scroll container and keeps row content on one line. Also add bottom spacing so tab labels and search controls are less likely to be visually occluded by overlay scrollbars, keeping controls aligned and easier to read and tap. Signed-off-by: Rito Rhymes <[email protected]> --- cgit.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/cgit.css b/cgit.css index cf23c39..6063f63 100644 --- a/cgit.css +++ b/cgit.css @@ -904,3 +904,37 @@ div#cgit table.ssdiff td.space { div#cgit table.ssdiff td.space div { min-height: 3em; } + +@media (max-width: 768px) { + div#cgit table.tabs { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + div#cgit table.tabs tr { + display: table; + width: max-content; + } + + div#cgit table.tabs td { + white-space: nowrap; + } + + div#cgit table.tabs td:not(.form) a { + display: inline-block; + padding-bottom: 8px; + } + + div#cgit table.tabs td.form { + text-align: left; + } + + div#cgit table.tabs td.form form { + display: inline-flex; + align-items: center; + white-space: nowrap; + margin-bottom: 6px; + } +} -- 2.51.0
