chore: fix responsiveness on narrow viewports (#236)

Author: iiio2

app/pages/[...package].vue

@@ -300,7 +300,7 @@ defineOgImageComponent('Package', {
 
     <article
       v-else-if="status === 'success' && pkg"
-      class="package-page motion-safe:animate-fade-in"
+      class="package-page motion-safe:animate-fade-in overflow-x-hidden"
     >
       <!-- Package header -->
       <header class="area-header pb-8 border-b border-border">
@@ -716,11 +716,11 @@ defineOgImageComponent('Package', {
               <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
               <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
             </div>
-            <div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
+            <div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
               <!-- Main package install -->
-              <div class="flex items-center gap-2">
-                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-                <code class="font-mono text-sm"
+              <div class="flex items-center gap-2 min-w-0">
+                <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+                <code class="font-mono text-sm min-w-0"
                   ><ClientOnly
                     ><span
                       v-for="(part, i) in installCommandParts"
@@ -735,9 +735,9 @@ defineOgImageComponent('Package', {
                 >
               </div>
               <!-- @types package install (when enabled) -->
-              <div v-if="showTypesInInstall" class="flex items-center gap-2">
-                <span class="text-fg-subtle font-mono text-sm select-none">$</span>
-                <code class="font-mono text-sm"
+              <div v-if="showTypesInInstall" class="flex items-center gap-2 min-w-0">
+                <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+                <code class="font-mono text-sm min-w-0"
                   ><span
                     v-for="(part, i) in typesInstallCommandParts"
                     :key="i"
@@ -953,4 +953,36 @@ defineOgImageComponent('Package', {
 .area-sidebar {
   grid-area: sidebar;
 }
+
+/* Improve package name wrapping for narrow screens */
+.area-header h1 {
+  overflow-wrap: anywhere;
+}
+
+/* Ensure description text wraps properly */
+.area-header p {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/* Allow install command text to break on narrow screens */
+.area-install code {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+/* Ensure all text content wraps on narrow screens */
+.package-page {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+}
+
+/* Ensure all children respect max-width */
+.package-page > * {
+  max-width: 100%;
+  min-width: 0;
+}
 </style>