- sign in
- home -
new -

josie / simplegit

ui: compact repo header, wider clone box, content-sized file tree

Repo pages: the h1 owner/repo banner becomes a body-size path line;
the clone URL input widens to min(66ch, 72vw) so full clone URLs are
visible; the file-tree pane sizes to its content (minmax(240px,
max-content), capped 480px) and names ellipsize instead of wrapping;
tabs and clone row get tighter padding. Top nav: signed-out visitors
now get the same 'new -' as signed-in users, pointing at /login (like
the left nav button) instead of an empty corner.

LLM Contributor: qwen/qwen3.8-27b

8edadb5208260eff2e5321fba47e152f97967693
cjosie <administrator@josie-c.com> · 2026-10-05T12:42 · browse files at this commit

parents: b8622dd 

diff --git a/internal/web/static/style.css b/internal/web/static/style.css
index dff683a..f7b76b7 100644
--- a/internal/web/static/style.css
+++ b/internal/web/static/style.css
@@ -144,32 +144,44 @@ textarea { width: 100%; resize: vertical; }
 /* --- end git ui boxes --- */
 
 /* --- repo pages ------ */
+.repo-path { margin: 10px 0 12px; }
+
 .repo-tabs {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   background: var(--color1);
-  margin: 0 0 24px;
+  margin: 0 0 16px;
 }
 .repo-tabs a {
   display: block;
   color: var(--text);
-  padding: 10px 12px;
+  padding: 8px 12px;
   text-decoration: none;
 }
 .repo-tabs a:hover, .repo-tabs a.active { background: var(--color2); }
 
-.clone-row { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; }
-.clone-row input { width: 42ch; max-width: 60vw; font-size: 1rem; text-align: center; }
+.clone-row { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
+.clone-row input { width: min(66ch, 72vw); font-size: 1rem; text-align: center; }
 
 .repo-layout { display: grid; gap: 24px; align-items: start; text-align: left; }
-@media (min-width: 600px) { .repo-layout { grid-template-columns: 280px minmax(0, 1fr); } }
+/* the tree pane grows with its longest names (capped at 480px) instead of
+   clipping at a fixed 280px */
+@media (min-width: 600px) { .repo-layout { grid-template-columns: minmax(240px, max-content) minmax(0, 1fr); } }
 
-.file-tree-pane { background: var(--color1); padding: 12px 16px; }
+.file-tree-pane { background: var(--color1); padding: 12px 16px; max-width: 480px; }
 .file-tree { list-style: none; padding: 0; margin: 0; font-size: 1rem; }
 .file-tree .file-tree { padding-left: 1.2em; }
 .file-tree li { padding: 1px 0; }
-.file-tree a { text-decoration: none; }
+.file-tree a, .file-tree > li > .muted {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+  text-decoration: none;
+}
 
 .repo-summary { display: flex; gap: 8px; margin: 0 0 16px; }
 .repo-summary > * {
diff --git a/internal/web/templates/base.html b/internal/web/templates/base.html
index 0d54c93..48be317 100644
--- a/internal/web/templates/base.html
+++ b/internal/web/templates/base.html
@@ -15,7 +15,7 @@
   </div>
   <div class="nav-center"><a href="/">- home -</a></div>
   <div class="nav-side nav-right">
-    {{if .Username}}<a href="/new">new -</a>{{end}}
+    {{if .Username}}<a href="/new">new -</a>{{else}}<a href="/login">new -</a>{{end}}
   </div>
 </header>
 <main class="container">
diff --git a/internal/web/templates/repo_nav.html b/internal/web/templates/repo_nav.html
index 5396605..d656926 100644
--- a/internal/web/templates/repo_nav.html
+++ b/internal/web/templates/repo_nav.html
@@ -1,7 +1,5 @@
 {{define "repo_nav"}}
-<div class="repo-header">
-  <h1 class="repo-title"><a href="/{{.Owner}}">{{.Owner}}</a> <span class="sep">/</span> <a href="/{{.Owner}}/{{.RepoName}}">{{.RepoName}}</a>{{if eq .Visibility "private"}} <span class="badge">private</span>{{end}}</h1>
-</div>
+<p class="repo-path"><a href="/{{.Owner}}">{{.Owner}}</a> <span class="sep">/</span> <a href="/{{.Owner}}/{{.RepoName}}">{{.RepoName}}</a>{{if eq .Visibility "private"}} <span class="badge">private</span>{{end}}</p>
 <div class="clone-row">
   <input id="clone-url" readonly value="{{cloneURL .Owner .RepoName}}" onclick="this.select()">
   <button type="button" onclick="var i=document.getElementById('clone-url');i.select();if(navigator.clipboard)navigator.clipboard.writeText(i.value)">copy</button>