fix: clickable rows & mobile scroll overflow & dynamic line width

Author: RYGRIT

app/components/Code/DirectoryListing.vue

@@ -59,16 +59,15 @@ const parentPath = computed(() => {
           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="parentPath ? `${baseUrl}/${parentPath}` : baseUrl"
-              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 -->
@@ -77,25 +76,26 @@ const parentPath = computed(() => {
           :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="`${baseUrl}/${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,13 @@ const lineNumbers = computed(() => {
   return Array.from({ length: props.lines }, (_, i) => i + 1)
 })
 
+// Dynamically compute line number column width based on digit count
+const lineNumberWidth = computed(() => {
+  const digits = String(props.lines).length
+  // ch unit matches monospace digit width + 1.5rem for px-3 padding
+  return `calc(${digits}ch + 1.5rem)`
+})
+
 // Check if a line is selected
 function isLineSelected(lineNum: number): boolean {
   if (!props.selectedLines) return false
@@ -55,10 +62,11 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full">
+  <div class="code-viewer flex min-h-full overflow-hidden 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-r border-solid border-border text-end select-none relative z-10"
+      :style="{ minWidth: lineNumberWidth }"
       aria-hidden="true"
     >
       <a
@@ -93,10 +101,6 @@ watch(
   font-size: 14px;
 }
 
-.line-numbers {
-  min-width: 3.5rem;
-}
-
 .code-content :deep(pre) {
   margin: 0;
   padding: 0;

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

@@ -389,7 +389,7 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Main content: file tree + file viewer -->
-    <div v-else-if="fileTree" class="flex flex-1">
+    <div v-else-if="fileTree" class="flex flex-1 overflow-hidden">
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
         class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-28 self-start h-[calc(100vh-7rem)] overflow-y-auto"
@@ -403,7 +403,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 md:sticky md:top-28 md:self-start md:h-[calc(100vh-7rem)] md:overflow-y-auto"
       >
         <!-- File viewer -->
         <template v-if="isViewingFile && fileContent">