fix: prevent layout shift for short/narrow content

Author: danielroe

app/pages/@[org].vue

@@ -135,7 +135,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="container py-8 sm:py-12 w-full">
+  <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex items-center gap-4 mb-4">

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

@@ -494,7 +494,7 @@ function handleClick(event: MouseEvent) {
 </script>
 
 <template>
-  <main class="container py-8 xl:py-12">
+  <main class="container flex-1 py-8 xl:py-12">
     <PackageSkeleton v-if="status === 'pending'" />
 
     <article

app/pages/about.vue

@@ -41,7 +41,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
 </script>
 
 <template>
-  <main class="container py-12 sm:py-16 min-h-screen">
+  <main class="container flex-1 py-12 sm:py-16">
     <article class="max-w-2xl mx-auto">
       <header class="mb-12">
         <h1 class="font-mono text-3xl sm:text-4xl font-medium mb-4">{{ $t('about.heading') }}</h1>

app/pages/docs/[...path].vue

@@ -88,7 +88,7 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
 </script>
 
 <template>
-  <div class="docs-page min-h-screen">
+  <div class="docs-page flex-1 flex flex-col">
     <!-- Visually hidden h1 for accessibility -->
     <h1 class="sr-only">{{ packageName }} API Documentation</h1>
 

app/pages/search.vue

@@ -758,7 +758,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="overflow-x-hidden">
+  <main class="flex-1 overflow-x-hidden">
     <!-- Sticky search header - positioned below AppHeader (h-14 = 56px) -->
     <header class="sticky top-14 z-40 bg-bg/95 backdrop-blur-sm border-b border-border">
       <div class="container-sm py-4">

app/pages/settings.vue

@@ -29,7 +29,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="container py-12 sm:py-16 min-h-screen w-full">
+  <main class="container flex-1 py-12 sm:py-16 w-full">
     <article class="max-w-2xl mx-auto">
       <!-- Header -->
       <header class="mb-12">

app/pages/~[username]/index.vue

@@ -165,7 +165,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="container py-8 sm:py-12 w-full">
+  <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex items-center gap-4 mb-4">

app/pages/~[username]/orgs.vue

@@ -104,7 +104,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <main class="container py-8 sm:py-12 w-full">
+  <main class="container flex-1 py-8 sm:py-12 w-full">
     <!-- Header -->
     <header class="mb-8 pb-8 border-b border-border">
       <div class="flex items-center gap-4 mb-4">