feat(ui): added word wrap to code viewer

app/components/Code/Viewer.vue

@@ -3,13 +3,15 @@ const props = defineProps<{
   html: string
   lines: number
   selectedLines: { start: number; end: number } | null
+  wordWrap?: boolean
 }>()
 
 const emit = defineEmits<{
   lineClick: [lineNum: number, event: MouseEvent]
 }>()
 
 const codeRef = useTemplateRef('codeRef')
+const lineNumbersRef = useTemplateRef('lineNumbersRef')
 
 // Generate line numbers array
 const lineNumbers = computed(() => {
@@ -32,6 +34,32 @@ function onLineClick(lineNum: number, event: MouseEvent) {
   emit('lineClick', lineNum, event)
 }
 
+// Synchronize line number heights with code line heights (needed for word wrap)
+function syncLineHeights() {
+  if (!props.wordWrap || !codeRef.value || !lineNumbersRef.value) {
+    // Reset heights if word wrap is disabled
+    if (lineNumbersRef.value) {
+      const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+      for (const num of nums) {
+        num.style.height = ''
+      }
+    }
+    return
+  }
+
+  const lines = codeRef.value.querySelectorAll<HTMLElement>('code > .line')
+  const nums = lineNumbersRef.value.querySelectorAll<HTMLElement>('.line-number')
+
+  lines.forEach((line, index) => {
+    const num = nums[index]
+    if (num) {
+      // Use getBoundingClientRect for more precision if needed, but offsetHeight is usually enough
+      const height = line.offsetHeight
+      num.style.height = `${height}px`
+    }
+  })
+}
+
 // Apply highlighting to code lines when selection changes
 function updateLineHighlighting() {
   if (!codeRef.value) return
@@ -53,11 +81,27 @@ function updateLineHighlighting() {
 watch(
   () => [props.selectedLines, props.html] as const,
   () => {
-    nextTick(updateLineHighlighting)
+    nextTick(() => {
+      updateLineHighlighting()
+      syncLineHeights()
+    })
   },
   { immediate: true },
 )
 
+// Also watch wordWrap specifically
+watch(
+  () => props.wordWrap,
+  () => {
+    nextTick(syncLineHeights)
+  },
+)
+
+// Sync on resize
+if (import.meta.client) {
+  useEventListener(window, 'resize', syncLineHeights)
+}
+
 // Use Nuxt's `navigateTo` for the rendered import links
 function handleImportLinkNavigate() {
   if (!codeRef.value) return
@@ -86,9 +130,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" :class="{ 'is-wrapped': wordWrap }">
     <!-- Line numbers column -->
     <div
+      ref="lineNumbersRef"
       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"
@@ -155,6 +200,12 @@ watch(
   transition: background-color 0.1s;
 }
 
+.is-wrapped .code-content :deep(.line) {
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: none;
+}
+
 /* Highlighted lines in code content - extend full width with negative margin */
 .code-content :deep(.line.highlighted) {
   @apply bg-yellow-500/20;

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

@@ -251,6 +251,8 @@ const { copied: fileContentCopied, copy: copyFileContent } = useClipboard({
 // Canonical URL for this code page
 const canonicalUrl = computed(() => `https://npmx.dev${getCodeUrl(route.params)}`)
 
+const wordWrap = useLocalStorage('npmx-code-word-wrap', false)
+
 // Toggle markdown view mode
 const markdownViewModes = [
   {
@@ -416,6 +418,17 @@ defineOgImageComponent('Default', {
             </nav>
           </div>
           <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
+            <button
+              type="button"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors items-center inline-flex gap-1"
+              :aria-pressed="wordWrap"
+              :class="{ 'bg-accent/10 text-accent border-accent/20': wordWrap }"
+              @click="wordWrap = !wordWrap"
+            >
+              <span v-if="!!wordWrap" class="i-lucide:wrap-text w-3 h-3" />
+              <span v-else class="i-lucide:text w-3 h-3" />
+              {{ $t('code.word_wrap') }}
+            </button>
             <button
               v-if="selectedLines"
               type="button"
@@ -462,6 +475,7 @@ defineOgImageComponent('Default', {
             :html="fileContent.html"
             :lines="fileContent.lines"
             :selected-lines="selectedLines"
+            :word-wrap="wordWrap"
             @line-click="handleLineClick"
           />
           <div class="sticky bottom-0 bg-bg border-t border-border px-4 py-1">

i18n/locales/en.json

@@ -800,6 +800,7 @@
       "code": "code"
     },
     "file_path": "File path",
+    "word_wrap": "Word wrap",
     "binary_file": "Binary file",
     "binary_rendering_warning": "File type \"{contentType}\" is not supported for preview."
   },

i18n/schema.json

@@ -2404,6 +2404,9 @@
         "file_path": {
           "type": "string"
         },
+        "word_wrap": {
+          "type": "string"
+        },
         "binary_file": {
           "type": "string"
         },