From c2db75d1caf1e1f7dc565ef3029b2cd611d77df5 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 25 Jul 2025 16:43:42 +0100
Subject: [PATCH] appview: improve commit log styling

- uses grid layout for more controlled column scaling
- fixes commit message layout to show "expand" pill inline

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/repo/log.html | 147 +++++++++++++-------------
 1 file changed, 72 insertions(+), 75 deletions(-)

diff --git a/appview/pages/templates/repo/log.html b/appview/pages/templates/repo/log.html
index 27029b3..8957237 100644
--- a/appview/pages/templates/repo/log.html
+++ b/appview/pages/templates/repo/log.html
@@ -14,84 +14,81 @@
     </h2>
 
     <!-- desktop view (hidden on small screens) -->
-    <table class="w-full border-collapse hidden md:table">
-        <thead>
-            <tr>
-                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Author</th>
-                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Commit</th>
-                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Message</th>
-                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold"></th>
-                <th class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold">Date</th>
-            </tr>
-        </thead>
-        <tbody>
-            {{ range $index, $commit := .Commits }}
-                {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
-                <tr class="{{ if ne $index (sub (len $.Commits) 1) }}border-b border-gray-200 dark:border-gray-700{{ end }}">
-                    <td class=" py-3 align-top">
-                        {{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
-                        {{ if $didOrHandle }}
-                            {{ template "user/fragments/picHandleLink" $didOrHandle }}
-                        {{ else }}
-                            <a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
-                        {{ end }}
-                    </td>
-                    <td class="py-3 align-top font-mono flex items-center">
-                        {{ $verified := $.VerifiedCommits.IsVerified $commit.Hash.String }}
-                        {{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
-                        {{ if $verified }}
-                            {{ $hashStyle = "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 rounded" }}
-                        {{ end }}
-                        <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="no-underline hover:underline {{ $hashStyle }} px-2 py-1/2 rounded flex items-center gap-2">
-                            {{ slice $commit.Hash.String 0 8 }}
-                            {{ if $verified }}
-                            {{ i "shield-check" "w-4 h-4" }}
-                            {{ end }}
-                        </a>
-                        <div class="{{ if not $verified }} ml-6 {{ end }}inline-flex">
-                            <button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
-                                title="Copy SHA"
-                                onclick="navigator.clipboard.writeText('{{ $commit.Hash.String }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
-                                    {{ i "copy" "w-4 h-4" }}
-                            </button>
-                            <a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="Browse repository at this commit">
-                                {{ i "folder-code" "w-4 h-4" }}
-                            </a>
-                        </div>
-
-                    </td>
-                    <td class=" py-3 align-top">
-                      <div class="flex items-center justify-start gap-2">
-                          <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
-                          {{ if gt (len $messageParts) 1 }}
-                          <button class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded" hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">{{ i "ellipsis" "w-3 h-3" }}</button>
-                          {{ end }}
+    <div class="hidden md:flex md:flex-col divide-y divide-gray-200 dark:divide-gray-700">
+      {{ $grid := "grid grid-cols-14 gap-4" }}
+      <div class="{{ $grid }}">
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2">Author</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-3">Commit</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-6">Message</div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-1"></div>
+        <div class="py-2 text-sm text-left text-gray-700 dark:text-gray-300 uppercase font-bold col-span-2">Date</div>
+      </div>
+      {{ range $index, $commit := .Commits }}
+        {{ $messageParts := splitN $commit.Message "\n\n" 2 }}
+        <div class="{{ $grid }} py-3">
+          <div class="align-top truncate col-span-2">
+              {{ $didOrHandle := index $.EmailToDidOrHandle $commit.Author.Email }}
+              {{ if $didOrHandle }}
+                  {{ template "user/fragments/picHandleLink" $didOrHandle }}
+              {{ else }}
+                  <a href="mailto:{{ $commit.Author.Email }}" class="text-gray-700 dark:text-gray-300 no-underline hover:underline">{{ $commit.Author.Name }}</a>
+              {{ end }}
+          </div>
+          <div class="align-top font-mono flex items-start col-span-3">
+              {{ $verified := $.VerifiedCommits.IsVerified $commit.Hash.String }}
+              {{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
+              {{ if $verified }}
+                  {{ $hashStyle = "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 px-2 rounded" }}
+              {{ end }}
+              <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="no-underline hover:underline {{ $hashStyle }} px-2 py-1/2 rounded flex items-center gap-2">
+                  {{ slice $commit.Hash.String 0 8 }}
+                  {{ if $verified }}
+                  {{ i "shield-check" "w-4 h-4" }}
+                  {{ end }}
+              </a>
+              <div class="{{ if not $verified }} ml-6 {{ end }}inline-flex">
+                  <button class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                      title="Copy SHA"
+                      onclick="navigator.clipboard.writeText('{{ $commit.Hash.String }}'); this.innerHTML=`{{ i "copy-check" "w-4 h-4" }}`; setTimeout(() => this.innerHTML=`{{ i "copy" "w-4 h-4" }}`, 1500)">
+                          {{ i "copy" "w-4 h-4" }}
+                  </button>
+                  <a href="/{{ $.RepoInfo.FullName }}/tree/{{ $commit.Hash.String }}" class="p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" title="Browse repository at this commit">
+                      {{ i "folder-code" "w-4 h-4" }}
+                  </a>
+              </div>
 
-                          {{ if index $.TagMap $commit.Hash.String }}
-                            {{ range $tag := index $.TagMap $commit.Hash.String }}
-                              <span class="ml-2 text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 inline-flex items-center">
-                                {{ $tag }}
-                              </span>
-                            {{ end }}
-                          {{ end }}
-                      </div>
+          </div>
+          <div class="align-top col-span-6">
+            <div>
+                <a href="/{{ $.RepoInfo.FullName }}/commit/{{ $commit.Hash.String }}" class="dark:text-white no-underline hover:underline">{{ index $messageParts 0 }}</a>
+                {{ if gt (len $messageParts) 1 }}
+                <button class="py-1/2 px-1 bg-gray-200 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 rounded" hx-on:click="this.parentElement.nextElementSibling.classList.toggle('hidden')">{{ i "ellipsis" "w-3 h-3" }}</button>
+                {{ end }}
 
-                      {{ if gt (len $messageParts) 1 }}
-                        <p class="hidden mt-1 text-sm text-gray-600 dark:text-gray-400">{{ nl2br (index $messageParts 1) }}</p>
-                      {{ end }}
-                    </td>
-                    <td class="py-3 align-top">
-                        <!-- ci status -->
-                        {{ $pipeline := index $.Pipelines .Hash.String }}
-                        {{ if and $pipeline (gt (len $pipeline.Statuses) 0) }}
-                          {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" $pipeline "RepoInfo" $.RepoInfo) }}
-                        {{ end }}
-                    </td>
-                    <td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $commit.Committer.When }}</td>
-                </tr>
+                {{ if index $.TagMap $commit.Hash.String }}
+                  {{ range $tag := index $.TagMap $commit.Hash.String }}
+                    <span class="ml-2 text-xs rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white font-mono px-2 inline-flex items-center">
+                      {{ $tag }}
+                    </span>
+                  {{ end }}
                 {{ end }}
-        </tbody>
-    </table>
+            </div>
+
+            {{ if gt (len $messageParts) 1 }}
+              <p class="hidden mt-1 text-sm text-gray-600 dark:text-gray-400">{{ nl2br (index $messageParts 1) }}</p>
+            {{ end }}
+          </div>
+          <div class="align-top col-span-1">
+              <!-- ci status -->
+              {{ $pipeline := index $.Pipelines .Hash.String }}
+              {{ if and $pipeline (gt (len $pipeline.Statuses) 0) }}
+                {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" $pipeline "RepoInfo" $.RepoInfo) }}
+              {{ end }}
+          </div>
+          <div class="align-top text-gray-500 dark:text-gray-400 col-span-2">{{ template "repo/fragments/shortTimeAgo" $commit.Committer.When }}</div>
+        </div>
+      {{ end }}
+    </div>
 
     <!-- mobile view (visible only on small screens) -->
     <div class="md:hidden">
-- 
2.51.2