fix: wrap lines and compute width

Author: nosthrillz

app/components/Code/Viewer.vue

@@ -86,11 +86,10 @@ watch(
 </script>
 
 <template>
-  <div class="code-viewer flex min-h-full max-w-full">
+  <div class="code-viewer flex min-h-full max-w-full" :style="{ '--line-digits': lineDigits }">
     <!-- Line numbers column -->
     <div
       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"
     >
       <!-- This needs to be a native <a> element, because `LinkBase` (or specifically `NuxtLink`) does not seem to work when trying to prevent default behavior (jumping to the anchor) -->
@@ -113,9 +112,9 @@ watch(
     </div>
 
     <!-- Code content -->
-    <div class="code-content flex-1 overflow-x-auto min-w-0">
+    <div class="code-content">
       <!-- eslint-disable vue/no-v-html -- HTML is generated server-side by Shiki -->
-      <div ref="codeRef" class="code-lines min-w-full w-fit" v-html="html" />
+      <div ref="codeRef" class="code-lines" v-html="html" />
       <!-- eslint-enable vue/no-v-html -->
     </div>
   </div>
@@ -124,59 +123,69 @@ watch(
 <style scoped>
 .code-viewer {
   font-size: 14px;
-}
-
-.line-numbers {
   /* 1ch per digit + 1.5rem (px-3 * 2) padding */
-  min-width: calc(var(--line-digits) * 1ch + 1.5rem);
-}
-
-.code-content :deep(pre) {
-  margin: 0;
-  padding: 0;
-  background: transparent !important;
-  overflow: visible;
-}
-
-.code-content :deep(code) {
-  display: block;
-  padding: 0 1rem;
-  background: transparent !important;
-}
-
-.code-content :deep(.line) {
-  display: block;
-  /* Ensure consistent height matching line numbers */
-  line-height: 24px;
-  min-height: 24px;
-  max-height: 24px;
-  white-space: pre;
-  overflow: hidden;
-  transition: background-color 0.1s;
+  --line-numbers-width: calc(var(--line-digits) * 1ch + 1.5rem);
 }
 
-/* Highlighted lines in code content - extend full width with negative margin */
-.code-content :deep(.line.highlighted) {
-  @apply bg-yellow-500/20;
-  margin: 0 -1rem;
-  padding: 0 1rem;
-}
-
-/* Clickable import links */
-.code-content :deep(.import-link) {
-  color: inherit;
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-decoration-color: rgba(158, 203, 255, 0.5); /* syntax.str with transparency */
-  text-underline-offset: 2px;
-  transition:
-    text-decoration-color 0.15s,
-    text-decoration-style 0.15s;
-  cursor: pointer;
+.line-numbers {
+  min-width: var(--line-numbers-width);
 }
 
-.code-content :deep(.import-link:hover) {
-  text-decoration-style: solid;
-  text-decoration-color: #9ecbff; /* syntax.str - light blue */
+.code-content {
+  flex: 1;
+  min-width: 0;
+  max-width: calc(100% - var(--line-numbers-width));
+
+  &:deep(pre) {
+    margin: 0;
+    padding: 0;
+    background: transparent !important;
+    overflow: visible;
+    max-width: 100%;
+  }
+
+  &:deep(code) {
+    display: block;
+    padding: 0 1rem;
+    background: transparent !important;
+    max-width: 100%;
+  }
+
+  &:deep(.line) {
+    display: flex;
+    flex-wrap: wrap;
+    /* Ensure consistent height matching line numbers */
+    line-height: 24px;
+    min-height: 24px;
+    white-space: pre-wrap;
+    overflow: hidden;
+    transition: background-color 0.1s;
+    max-width: 100%;
+  }
+
+  /* Highlighted lines in code content - extend full width with negative margin */
+  &:deep(.line.highlighted) {
+    @apply bg-yellow-500/20;
+    margin: 0 -1rem;
+    padding: 0 1rem;
+  }
+
+  /* Clickable import links */
+  &:deep(.import-link) {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: rgba(158, 203, 255, 0.5); /* syntax.str with transparency */
+    text-underline-offset: 2px;
+    transition:
+      text-decoration-color 0.15s,
+      text-decoration-style 0.15s;
+    cursor: pointer;
+  }
+
+  &:deep(.import-link:hover) {
+    text-decoration-style: solid;
+    text-decoration-color: #9ecbff; /* syntax.str - light blue */
+  }
 }
 </style>

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -347,10 +347,10 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Main content: file tree + file viewer -->
-    <div v-else-if="fileTree" class="flex flex-1" dir="ltr">
+    <div v-else-if="fileTree" class="main-content flex flex-1" dir="ltr">
       <!-- 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-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+        class="file-tree border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
       >
         <CodeFileTree
           :tree="fileTree.tree"
@@ -361,7 +361,7 @@ defineOgImageComponent('Default', {
       </aside>
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
-      <div class="flex-1 min-w-0 self-start">
+      <div class="file-viewer flex-1 min-w-0 self-start">
         <div
           class="sticky z-10 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
         >
@@ -584,3 +584,20 @@ defineOgImageComponent('Default', {
     </ClientOnly>
   </main>
 </template>
+
+<style scoped>
+.main-content {
+  --sidebar-space: calc(var(--spacing) * 64);
+  @screen lg {
+    --sidebar-space: calc(var(--spacing) * 72);
+  }
+
+  .file-tree {
+    width: var(--sidebar-space);
+  }
+
+  .file-viewer {
+    width: calc(100vw - var(--sidebar-space));
+  }
+}
+</style>