From 2a1555bae755958b615f0cfc4ef24f2b68a05dd9 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <x@icyphox.sh>
Date: Sat, 5 Apr 2025 23:29:53 +0300
Subject: [PATCH] appview: commits: ensure overflow-x on filenames

---
 appview/pages/templates/fragments/diff.html | 12 +++++++-----
 appview/pages/templates/repo/commit.html    | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/appview/pages/templates/fragments/diff.html b/appview/pages/templates/fragments/diff.html
index 69a393c..76bd445 100644
--- a/appview/pages/templates/fragments/diff.html
+++ b/appview/pages/templates/fragments/diff.html
@@ -17,9 +17,10 @@
         <details open>
           <summary class="list-none cursor-pointer sticky top-0">
             <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between">
-              <div id="left-side-items" class="p-2 flex gap-2 items-center">
+              <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto" style="direction: rtl;">
                 {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }}
 
+                <div class="flex gap-2 items-center" style="direction: ltr;">
                 {{ if .IsNew }}
                 <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span>
                 {{ else if .IsDelete }}
@@ -33,22 +34,23 @@
                 {{ end }}
 
                 {{ if .IsDelete }}
-                <a class="dark:text-white" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
+                <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}>
                   {{ .Name.Old }}
                 </a>
                 {{ else if (or .IsCopy .IsRename) }}
-                <a class="dark:text-white" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
+                <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}>
                   {{ .Name.Old }}
                 </a>
                 {{ i "arrow-right" "w-4 h-4" }}
-                <a class="dark:text-white" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
+                <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
                   {{ .Name.New }}
                 </a>
                 {{ else }}
-                <a class="dark:text-white" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
+                <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}>
                   {{ .Name.New }}
                 </a>
                 {{ end }}
+                </div>
               </div>
 
               {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }}
diff --git a/appview/pages/templates/repo/commit.html b/appview/pages/templates/repo/commit.html
index eaaff45..3aecab7 100644
--- a/appview/pages/templates/repo/commit.html
+++ b/appview/pages/templates/repo/commit.html
@@ -46,15 +46,17 @@
   <div class="diff-stat">
     <br>
     <strong class="text-sm uppercase mb-4 dark:text-gray-200">Changed files</strong>
-    {{ range $diff }}
-    <ul class="dark:text-gray-200">
-      {{ if .IsDelete }}
-      <li><a href="#file-{{ .Name.Old }}" class="dark:hover:text-gray-300">{{ .Name.Old }}</a></li>
-      {{ else }}
-      <li><a href="#file-{{ .Name.New }}" class="dark:hover:text-gray-300">{{ .Name.New }}</a></li>
+    <div class="overflow-x-auto">
+      {{ range $diff }}
+      <ul class="dark:text-gray-200">
+        {{ if .IsDelete }}
+        <li><a href="#file-{{ .Name.Old }}" class="dark:hover:text-gray-300">{{ .Name.Old }}</a></li>
+        {{ else }}
+        <li><a href="#file-{{ .Name.New }}" class="dark:hover:text-gray-300">{{ .Name.New }}</a></li>
+        {{ end }}
+      </ul>
       {{ end }}
-    </ul>
-    {{ end }}
+    </div>
   </div>
 </section>
 
-- 
2.51.2