From 48e0a961fb66d2512932b41e079b563c8cee3cb7 Mon Sep 17 00:00:00 2001
From: Bryce Kwon <bryce@brycekwon.com>
Date: Sun, 19 Jul 2026 17:34:02 -1000
Subject: Declutter the interface on small screens

---
 assets/cgit.css | 48 ++++++++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 26 deletions(-)

(limited to 'assets')

diff --git a/assets/cgit.css b/assets/cgit.css
index 3ff2513..94b4fd0 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -1452,6 +1452,19 @@ div#cgit table.ssdiff td.space div {
 	div#cgit .col-links {
 		display: none;
 	}
+	/* Ref and log listings drop the author and file/line-count columns
+	 * on a phone, since the subject and age carry the story and long
+	 * author names otherwise wrap every row onto two lines. */
+	div#cgit table.list th.col-author,
+	div#cgit table.list td.col-author,
+	div#cgit table.list th.col-count,
+	div#cgit table.list td.col-count {
+		display: none;
+	}
+	/* Keep any remaining long token from forcing a sideways page. */
+	div#cgit table.list td {
+		overflow-wrap: anywhere;
+	}
 	div#cgit table.repolist {
 		width: 100%;
 	}
@@ -1472,29 +1485,19 @@ div#cgit table.ssdiff td.space div {
 		font-size: 100%;
 		padding: 0.55em 0.7em;
 	}
-	/* Keep the search compact instead of stretching it across the row.
-	 * The tab list grows to fill the line, so the search sits beside it
-	 * or wraps just beneath at a natural, tappable size. */
+	/* No search on a phone. Typing queries there is nobody's real
+	 * workflow and the q= url form keeps working regardless. */
 	div#cgit .tabs .search {
-		display: flex;
-		align-items: center;
-		gap: 0.35em;
-		white-space: normal;
-		padding-bottom: 0;
-	}
-	div#cgit .tabs .search input.txt {
-		min-width: 0;
-		max-width: 11em;
+		display: none;
 	}
-	/* Stack the masthead: logo, title and toggle across the top, then the
-	 * description, owner and branch switcher each on their own full row. */
+	/* Stack the masthead: logo, title and toggle across the top, then
+	 * the description and owner on their own full rows. */
 	div#cgit #header {
 		grid-template-columns: auto 1fr auto;
 		grid-template-areas:
 			"logo heading theme"
 			"desc desc    desc"
-			"owner owner  owner"
-			"switch switch switch";
+			"owner owner  owner";
 		column-gap: 8px;
 		row-gap: 6px;
 	}
@@ -1511,17 +1514,10 @@ div#cgit table.ssdiff td.space div {
 		justify-self: start;
 		text-align: left;
 	}
-	/* Stretch the branch switcher across the row, the select taking the
-	 * slack and the submit hugging its label. */
+	/* No branch switcher on a phone. The refs page switches branches
+	 * with less chrome, and every page link carries h= along. */
 	div#cgit #header .branch-switch {
-		justify-self: stretch;
-		display: flex;
-		gap: 0.4em;
-	}
-	div#cgit #header .branch-switch select {
-		flex: 1 1 auto;
-		min-width: 0;
-		max-width: none;
+		display: none;
 	}
 	/* Unfloat the side panels so they stack full width instead of
 	 * squeezing the content into a sliver beside them. */
-- 
cgit v2.8.0