github.com/troglobit / digit

The metadata sat on one long line with the full 40-char hash, and the
message body was a non-wrapping <pre>, so on a phone the text overflowed
sideways and the page looked half-baked.

Put the subject and message in a bounding box with a metadata footer
(author/date, short hash, parent/child, patch), wrap the body, and give
the diff a matching border so the two boxes read as a pair.

Signed-off-by: Joachim Wiberg <troglobit@gmail.com>

diff --git a/static/style.css b/static/style.css
index f02db7e..3bf240a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -488,10 +488,39 @@ table.blame td.line {
   width: 100%;
 }
 
-pre.body { color: var(--muted); }
+/* Commit view: subject + message in a bounding box with a metadata
+   footer; the body wraps so long lines don't overflow on mobile. */
+.commitbox {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin: 1.5rem 0 1rem;
+  overflow-wrap: break-word;
+}
+.commitbox .subject { margin: 0; padding: 0.75rem 1rem 0.5rem; font-size: 1.1rem; }
+.commitbox .body {
+  margin: 0;
+  padding: 0 1rem 0.75rem;
+  color: var(--muted);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+.commitmeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--code-bg);
+  border-radius: 0 0 6px 6px;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
 pre.diff {
   background: var(--code-bg);
   padding: 0.75rem;
+  border: 1px solid var(--border);
   border-radius: 6px;
   overflow-x: auto;
   line-height: 1.45;
diff --git a/templates/commit.html b/templates/commit.html
index 600aab1..ee897af 100644
--- a/templates/commit.html
+++ b/templates/commit.html
@@ -2,9 +2,14 @@
 {{with .Data}}
 {{template "repohead" .}}
 {{with .Commit}}
-<h2 class="subject">{{.Subject}}</h2>
-<p class="muted">{{.Author}} · {{ago .Date}} · <span class="sha">{{.Hash}}</span> · <a href="{{url $.Data.Name "commit" (printf "%s.patch" .Hash)}}">patch</a>{{range $i, $p := .Parents}} · {{if eq $i 0}}parent{{else}}other parent{{end}} <a class="sha"{{if eq $i 0}} data-nav="parent" title="parent (p)"{{else if eq $i 1}} data-nav="parent2" title="other parent (o)"{{end}} href="{{url $.Data.Name "commit" $p}}">{{shortsha $p}}</a>{{end}}{{with $.Data.Child}} · child <a class="sha" data-nav="child" title="child (c)" href="{{url $.Data.Name "commit" .}}">{{shortsha .}}</a>{{end}}</p>
-{{with .Body}}<pre class="body">{{.}}</pre>{{end}}
+<div class="commitbox">
+  <h2 class="subject">{{.Subject}}</h2>
+  {{with .Body}}<pre class="body">{{.}}</pre>{{end}}
+  <div class="commitmeta">
+    <span class="who">{{.Author}} · {{ago .Date}}</span>
+    <span class="refs"><span class="sha" title="{{.Hash}}">commit {{shortsha .Hash}}</span>{{range $i, $p := .Parents}} · {{if eq $i 0}}parent{{else}}other parent{{end}} <a class="sha"{{if eq $i 0}} data-nav="parent" title="parent (p)"{{else if eq $i 1}} data-nav="parent2" title="other parent (o)"{{end}} href="{{url $.Data.Name "commit" $p}}">{{shortsha $p}}</a>{{end}}{{with $.Data.Child}} · child <a class="sha" data-nav="child" title="child (c)" href="{{url $.Data.Name "commit" .}}">{{shortsha .}}</a>{{end}} · <a href="{{url $.Data.Name "commit" (printf "%s.patch" .Hash)}}">patch</a></span>
+  </div>
+</div>
 {{end}}
 <pre class="diff">{{range .Diff}}<span class="{{.Class}}">{{.Text}}</span>
 {{end}}</pre>