fix: responsive fix for smaller screens

Author: jherr

packages/cta-ui/src/index.tsx

@@ -20,10 +20,10 @@ function Content() {
       <div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container">
         <AppHeader />
         <div className="flex flex-row">
-          <div className="w-1/2 @7xl:w-1/4 pr-1">
+          <div className="w-1/3 @8xl:w-1/4 pr-1">
             <AppSidebar />
           </div>
-          <div className="w-1/2 @7xl:w-3/4 pl-1">
+          <div className="w-2/3 @8xl:w-3/4 pl-1">
             <FileNavigator />
           </div>
         </div>

packages/cta-ui/src/styles.css

@@ -143,6 +143,9 @@ code {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --container-8xl: 96rem;
+  --container-9xl: 120rem;
+  --container-10xl: 144rem;
 }
 
 @layer base {