fix: meteor trail full-width from start, fix dialog not rendering in doc management, move sidebar trigger after logo

web/default/src/components/layout/components/header.tsx

@@ -31,8 +31,8 @@ export function Header({ className, children, ...props }: HeaderProps) {
       {...props}
     >
       <div className='flex h-full items-center gap-1.5 px-2 sm:gap-2 sm:px-3'>
-        <SidebarTrigger variant='ghost' className='size-8' />
         {children}
+        <SidebarTrigger variant='ghost' className='size-8' />
       </div>
     </header>
   )

web/default/src/features/doc-categories/index.tsx

@@ -116,6 +116,7 @@ export function DocCategories() {
   }
 
   return (
+    <>
     <SectionPageLayout>
       <SectionPageLayout.Title>{t('Document Categories')}</SectionPageLayout.Title>
       <SectionPageLayout.Actions>
@@ -217,5 +218,6 @@ export function DocCategories() {
         </AlertDialogContent>
       </AlertDialog>
     </SectionPageLayout>
+    </>
   )
 }

web/default/src/features/docs-management/index.tsx

@@ -160,6 +160,7 @@ export function DocsManagement() {
   }
 
   return (
+    <>
     <SectionPageLayout>
       <SectionPageLayout.Title>{t('Document Management')}</SectionPageLayout.Title>
       <SectionPageLayout.Actions>
@@ -290,5 +291,6 @@ export function DocsManagement() {
         </AlertDialogContent>
       </AlertDialog>
     </SectionPageLayout>
+    </>
   )
 }

web/default/src/features/docs/index.tsx

@@ -477,11 +477,11 @@ export function Docs() {
         .meteor {
           position: absolute;
           width: 1.5px;
-          height: 0;
+          height: 150px;
           border-radius: 999px;
           animation: meteor-fall linear infinite;
           opacity: 0;
-          will-change: transform, opacity, height;
+          will-change: transform, opacity;
         }
         .meteor::before {
           content: '';
@@ -518,12 +518,10 @@ export function Docs() {
         .meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 25s; }
         .meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 29s; }
         @keyframes meteor-fall {
-          0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
-          8% { opacity: 1; }
-          20% { height: 120px; opacity: 0.9; }
-          50% { height: 180px; opacity: 0.5; }
-          80% { height: 60px; opacity: 0.15; }
-          100% { height: 0; opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
+          0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
+          5% { opacity: 1; }
+          60% { opacity: 0.6; }
+          100% { opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
         }
         @media (prefers-reduced-motion: reduce) {
           .nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }

web/default/src/features/home/components/sections/hero.tsx

@@ -420,11 +420,11 @@ export function Hero(props: HeroProps) {
         .meteor {
           position: absolute;
           width: 1.5px;
-          height: 0;
+          height: 150px;
           border-radius: 999px;
           animation: meteor-fall linear infinite;
           opacity: 0;
-          will-change: transform, opacity, height;
+          will-change: transform, opacity;
         }
         .meteor::before {
           content: '';
@@ -485,27 +485,16 @@ export function Hero(props: HeroProps) {
         .meteor-10 { left: 95%; top: -2%; animation-duration: 2.0s; animation-delay: 27s; }
         @keyframes meteor-fall {
           0% {
-            height: 0;
             opacity: 0;
-            transform: translateY(0) translateX(0) rotate(220deg);
+            transform: translateY(-150px) translateX(0) rotate(220deg);
           }
-          8% {
+          5% {
             opacity: 1;
           }
-          20% {
-            height: 120px;
-            opacity: 0.9;
-          }
-          50% {
-            height: 180px;
-            opacity: 0.5;
-          }
-          80% {
-            height: 60px;
-            opacity: 0.15;
+          60% {
+            opacity: 0.6;
           }
           100% {
-            height: 0;
             opacity: 0;
             transform: translateY(800px) translateX(-120px) rotate(220deg);
           }

web/default/src/features/pricing/index.tsx

@@ -361,11 +361,11 @@ export function Pricing() {
           .meteor {
             position: absolute;
             width: 1.5px;
-            height: 0;
+            height: 150px;
             border-radius: 999px;
             animation: meteor-fall linear infinite;
             opacity: 0;
-            will-change: transform, opacity, height;
+            will-change: transform, opacity;
           }
           .meteor::before {
             content: '';
@@ -402,12 +402,10 @@ export function Pricing() {
           .meteor-7 { left: 88%; top: -2%; animation-duration: 1.9s; animation-delay: 24s; }
           .meteor-8 { left: 95%; top: -2%; animation-duration: 2.3s; animation-delay: 28s; }
           @keyframes meteor-fall {
-            0% { height: 0; opacity: 0; transform: translateY(0) translateX(0) rotate(220deg); }
-            8% { opacity: 1; }
-            20% { height: 120px; opacity: 0.9; }
-            50% { height: 180px; opacity: 0.5; }
-            80% { height: 60px; opacity: 0.15; }
-            100% { height: 0; opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
+            0% { opacity: 0; transform: translateY(-150px) translateX(0) rotate(220deg); }
+            5% { opacity: 1; }
+            60% { opacity: 0.6; }
+            100% { opacity: 0; transform: translateY(800px) translateX(-120px) rotate(220deg); }
           }
           @media (prefers-reduced-motion: reduce) {
             .nebula-cloud, .meteor { animation: none !important; opacity: 0 !important; }