Make the breakpoints hide and restack, not resize

Nothing changes size across a breakpoint any more. On a phone the
tree listing keeps name and size, the diff and stat option panels
hide, the owner line leaves the stacked masthead, and the search,
switcher and authors wait until they fit.

2 files changed, 39 insertions, 60 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index 6c1ada4..5f6ad42 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -681,6 +681,10 @@ div#cgit td.ls-mode {
   width: 10em;
 }
 
+div#cgit td.ls-links {
+  white-space: nowrap;
+}
+
 /* Source blob */
 
 div#cgit table.blob {
@@ -1358,27 +1362,30 @@ div#cgit table.ssdiff td.space div {
   min-height: 3em;
 }
 
-@media (min-width: 1440px) {
-  div#cgit {
-    --gutter: 2rem;
-    font-size: 14px;
+/* The breakpoints only hide chrome or restack, sizes never change. */
+
+@media (max-width: 900px) {
+  div#cgit .tabs .search {
+    display: none;
+  }
+
+  div#cgit #header .branch-switch {
+    display: none;
   }
-}
 
-@media (max-width: 640px) {
-  div#cgit {
-    --gutter: 0.85rem;
-    --control-h: 2.5em;
+  div#cgit table.list th.col-author,
+  div#cgit table.list td.col-author {
+    display: none;
   }
+}
 
+@media (max-width: 640px) {
   div#cgit .col-desc,
   div#cgit .col-owner,
   div#cgit .col-links {
     display: none;
   }
 
-  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;
@@ -1389,6 +1396,17 @@ div#cgit table.ssdiff td.space div {
     overflow-wrap: anywhere;
   }
 
+  div#cgit th.ls-mode,
+  div#cgit td.ls-mode,
+  div#cgit th.ls-links,
+  div#cgit td.ls-links {
+    display: none;
+  }
+
+  div#cgit td.ls-size {
+    width: auto;
+  }
+
   /* Fixed table layout would still reserve the hidden columns' width. */
   div#cgit table.repolist {
     width: 100%;
@@ -1407,31 +1425,21 @@ div#cgit table.ssdiff td.space div {
     text-align: right;
   }
 
-  div#cgit .tabs a {
-    padding: 0.55em 0.7em;
-  }
-
-  div#cgit .tabs .search {
-    display: none;
-  }
-
   div#cgit #header {
     grid-template-columns: auto 1fr auto;
     grid-template-areas:
       "logo heading theme"
-      "desc desc    desc"
-      "owner owner  owner";
-    column-gap: 8px;
+      "desc desc    desc";
     row-gap: 6px;
   }
 
-  div#cgit #header .logo {
-    min-width: 56px;
-    min-height: 37px;
+  div#cgit #header .owner {
+    display: none;
   }
 
-  div#cgit #header .logo img {
-    max-width: 56px;
+  /* Outranks the base reservation, whose fourth column would sit here empty. */
+  html.cgit-js div#cgit #header {
+    grid-template-columns: auto 1fr var(--control-h);
   }
 
   div#cgit #header::before {
@@ -1441,47 +1449,18 @@ div#cgit table.ssdiff td.space div {
   div#cgit #header h1.main {
     white-space: normal;
     overflow-wrap: anywhere;
-    font-size: 190%;
   }
 
-  div#cgit #header .owner {
-    justify-self: start;
-    text-align: left;
-  }
-
-  div#cgit #header .branch-switch {
+  div#cgit div.cgit-panel {
     display: none;
   }
 
-  div#cgit div.cgit-panel,
   div#cgit div.notes {
     float: none;
     margin-left: 0;
   }
 
-  div#cgit div.cgit-panel {
-    margin: 1em 0;
-  }
-
   div#cgit table.commit-info {
     width: 100%;
   }
 }
-
-@media (max-width: 380px) {
-  div#cgit #header .logo {
-    min-width: 44px;
-  }
-
-  div#cgit #header .logo img {
-    max-width: 44px;
-  }
-
-  div#cgit #header h1.main {
-    font-size: 160%;
-  }
-
-  div#cgit .tabs a {
-    padding: 0.55em 0.55em;
-  }
-}
diff --git a/source/ui-tree.c b/source/ui-tree.c
index 0054b0c..21b9547 100644
--- a/source/ui-tree.c
+++ b/source/ui-tree.c
@@ -332,7 +332,7 @@ static void print_ls_row(const struct object_id *oid, const char *pathname,
 	}
 	htmlf("</td><td class='ls-size'>%lu</td>", size);
 
-	html("<td>");
+	html("<td class='ls-links'>");
 	cgit_log_link("log", NULL, "button", ctx.qry.head,
 		      walk->rev, fullpath.buf, 0, NULL, NULL,
 		      ctx.qry.showmsg, 0);
@@ -405,10 +405,10 @@ static void ls_head(void)
 	cgit_print_layout_start();
 	html("<table summary='tree listing' class='list'>\n");
 	html("<tr class='nohover'>");
-	html("<th class='left'>Mode</th>");
+	html("<th class='left ls-mode'>Mode</th>");
 	html("<th class='left'>Name</th>");
 	html("<th class='right'>Size</th>");
-	html("<th/>");
+	html("<th class='ls-links'/>");
 	html("</tr>\n");
 }