fix: clickable rows & mobile scrollbar overflow & dynamic line width (#1080)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: RYGRIT

app/components/Code/DirectoryListing.vue

@@ -74,16 +74,15 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
           v-if="parentPath !== null"
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
-          <td class="py-2 px-4">
+          <td colspan="2">
             <NuxtLink
               :to="getCodeRoute(parentPath || undefined)"
-              class="flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
+              class="flex items-center gap-2 py-2 px-4 font-mono text-sm text-fg-muted hover:text-fg transition-colors"
             >
               <span class="i-carbon:folder w-4 h-4 text-yellow-600" />
               <span>..</span>
             </NuxtLink>
           </td>
-          <td />
         </tr>
 
         <!-- Directory/file rows -->
@@ -92,25 +91,26 @@ function getCodeRoute(nodePath?: string): RouteLocationRaw {
           :key="node.path"
           class="border-b border-border hover:bg-bg-subtle transition-colors"
         >
-          <td class="py-2 px-4">
+          <td colspan="2">
             <NuxtLink
               :to="getCodeRoute(node.path)"
-              class="flex items-center gap-2 font-mono text-sm hover:text-fg transition-colors"
+              class="flex items-center gap-2 py-2 px-4 font-mono text-sm hover:text-fg transition-colors"
               :class="node.type === 'directory' ? 'text-fg' : 'text-fg-muted'"
             >
               <span
                 v-if="node.type === 'directory'"
                 class="i-carbon:folder w-4 h-4 text-yellow-600"
               />
               <span v-else class="w-4 h-4" :class="getFileIcon(node.name)" />
-              <span>{{ node.name }}</span>
+              <span class="flex-1">{{ node.name }}</span>
+              <span
+                v-if="node.type === 'file' && node.size"
+                class="text-end font-mono text-xs text-fg-subtle"
+              >
+                {{ formatBytes(node.size) }}
+              </span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
-            <span v-if="node.type === 'file' && node.size">
-              {{ formatBytes(node.size) }}
-            </span>
-          </td>
         </tr>
       </tbody>
     </table>

app/components/Code/Viewer.vue

@@ -16,6 +16,11 @@ const lineNumbers = computed(() => {
   return Array.from({ length: props.lines }, (_, i) => i + 1)
 })
 
+// Used for CSS calculation of line number column width
+const lineDigits = computed(() => {
+  return String(props.lines).length
+})
+
 // Check if a line is selected
 function isLineSelected(lineNum: number): boolean {
   if (!props.selectedLines) return false
@@ -55,10 +60,11 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full">
+  <div class="code-viewer flex min-h-full max-w-full">
     <!-- Line numbers column -->
     <div
-      class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
+      class="line-numbers shrink-0 bg-bg-subtle border-ie border-solid border-border text-end select-none relative"
+      :style="{ '--line-digits': lineDigits }"
       aria-hidden="true"
     >
       <a
@@ -94,7 +100,8 @@ watch(
 }
 
 .line-numbers {
-  min-width: 3.5rem;
+  /* 1ch per digit + 1.5rem (px-3 * 2) padding */
+  min-width: calc(var(--line-digits) * 1ch + 1.5rem);
 }
 
 .code-content :deep(pre) {

app/pages/package-code/[...path].vue

@@ -408,7 +408,7 @@ defineOgImageComponent('Default', {
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
       <div
-        class="flex-1 min-w-0 md:sticky md:top-28 md:self-start md:h-[calc(100vh-7rem)] md:overflow-y-auto"
+        class="flex-1 min-w-0 overflow-x-hidden sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <!-- File viewer -->
         <template v-if="isViewingFile && fileContent">