appview/pages: fix some styles for repoindex

Signed-off-by: oppiliappan <[e-mail]>

appview/pages/templates/repo/index.html

···
           {{ end }}
           <a href="{{ $link }}" class="{{ $linkstyle }}">
             <div class="flex items-center gap-2">
-              {{ i $icon $iconStyle }}{{ .Name }}
+              {{ i $icon $iconStyle "flex-shrink-0" }}
+              <span class="truncate">{{ .Name }}</span>
             </div>
           </a>
         </div>
···
       </div>
 
       <!-- commit info bar -->
-      <div class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center">
+      <div class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center flex-wrap">
           {{ $verified := $.VerifiedCommits.IsVerified .Hash.String }}
           {{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
           {{ if $verified }}
···
       </a>
       <div class="flex flex-col gap-1">
         {{ range .BranchesTrunc }}
-        <div class="text-base flex items-center justify-between">
-          <div class="flex items-center gap-2">
+        <div class="text-base flex items-center justify-between overflow-hidden">
+          <div class="flex items-center gap-2 min-w-0 flex-1">
             <a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Reference.Name | urlquery }}"
-              class="inline no-underline hover:underline dark:text-white">
+              class="inline-block truncate no-underline hover:underline dark:text-white">
               {{ .Reference.Name }}
             </a>
             {{ if .Commit }}
-            <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-              <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Commit.Committer.When }}</span>
+            <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·'] shrink-0"></span>
+            <span class="whitespace-nowrap text-xs text-gray-500 dark:text-gray-400 shrink-0">{{ template "repo/fragments/time" .Commit.Committer.When }}</span>
             {{ end }}
             {{ if .IsDefault }}
-            <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">default</span>
+            <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·'] shrink-0"></span>
+            <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono shrink-0">default</span>
             {{ end }}
           </div>
           {{ if ne $.Ref .Reference.Name }}
             <a href="/{{ $.RepoInfo.FullName }}/compare/{{ $.Ref | urlquery }}...{{ .Reference.Name | urlquery }}"
-              class="text-xs flex gap-2 items-center"
+              class="text-xs flex gap-2 items-center shrink-0 ml-2"
               title="Compare branches or tags">
               {{ i "git-compare" "w-3 h-3" }} compare
             </a>
-          {{end}}
+          {{ end }}
         </div>
         {{ end }}
       </div>

appview/pages/templates/repo/tree.html

···
 
     {{ range .Files }}
       <div class="grid grid-cols-12 gap-4 items-center py-1">
-        <div class="col-span-6 md:col-span-3">
+        <div class="col-span-6 md:col-span-4">
           {{ $link := printf "/%s/%s/%s/%s/%s" $.RepoInfo.FullName "tree" (urlquery $.Ref) $.TreePath .Name }}
           {{ $icon := "folder" }}
           {{ $iconStyle := "size-4 fill-current" }}
 
           {{ if .IsFile }}
             {{ $icon = "file" }}
-            {{ $iconStyle = "flex-shrink-0 size-4" }}
+            {{ $iconStyle = "size-4" }}
           {{ end }}
           <a href="{{ $link }}" class="{{ $linkstyle }}">
             <div class="flex items-center gap-2">
-              {{ i $icon $iconStyle }}
+              {{ i $icon $iconStyle "flex-shrink-0" }}
               <span class="truncate">{{ .Name }}</span>
             </div>
           </a>
         </div>
 
-        <div class="col-span-0 md:col-span-7 hidden md:block overflow-hidden">
+        <div class="col-span-0 md:col-span-6 hidden md:block overflow-hidden">
           {{ with .LastCommit }}
             <a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash }}" class="text-gray-500 dark:text-gray-400 block truncate">{{ .Message }}</a>
           {{ end }}

input.css

···
         }
 
         code {
-            @apply px-1 font-mono rounded bg-gray-100 dark:bg-gray-700;
+            @apply font-mono rounded bg-gray-100 dark:bg-gray-700;
         }
     }