fix: code page container flickering

Author: alex-key

app/composables/useSettings.ts

@@ -81,6 +81,8 @@ const STORAGE_KEY = 'npmx-settings'
 // Shared settings instance (singleton per app)
 let settingsRef: RemovableRef<AppSettings> | null = null
 
+const hasHydrated = ref(false)
+
 /**
  * Composable for managing application settings with localStorage persistence.
  * Settings are shared across all components that use this composable.
@@ -241,9 +243,12 @@ export function useBackgroundTheme() {
 
 export function useCodeContainer() {
   const { settings } = useSettings()
-  const isMounted = useMounted()
 
-  const codeContainerFull = computed(() => isMounted.value && settings.value.codeContainerFull)
+  onMounted(() => {
+    hasHydrated.value = true
+  })
+
+  const codeContainerFull = computed(() => hasHydrated.value && settings.value.codeContainerFull)
 
   function toggleCodeContainer() {
     settings.value.codeContainerFull = !settings.value.codeContainerFull

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

@@ -293,6 +293,7 @@ onPrehydrate(() => {
   const container = document.getElementById('code-page-container')
 
   if (settingsSaved?.codeContainerFull === true && container) {
+    console.log('add max-w-full');
     container!.classList.add('max-w-full', 'border-0')
   }
 })
@@ -335,8 +336,8 @@ onPrehydrate(() => {
     <div
       v-else-if="!!fileTree"
       id="code-page-container"
-      class="container w-full grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-is border-ie transition-mix-width duration-200 ease-in-out px-0"
-      :class="{ 'max-w-full border-0': codeContainerFull }"
+      class="w-full grid grid-cols-[18rem_1fr] max-lg:grid-cols-[16rem_1fr] max-md:grid-cols-[1fr] border-border border-x px-0 mx-auto transition-[max-width] duration-300"
+      :class="[codeContainerFull ? 'max-w-full border-0' : 'container']"
       dir="ltr"
     >
       <!-- File tree sidebar - sticky with internal scroll -->