[PATCH 4/5] css: reflow header table to prevent mobile overflow

[Rito Rhymes]

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 <rito at ritovision.com>
---
 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