fix: responsiveness

Author: jherr

packages/cta-ui/src/components/cta-sidebar.tsx

@@ -20,13 +20,13 @@ export function AppSidebar() {
         <>
           {mode === 'setup' && (
             <div className="bg-white dark:bg-black/40 shadow-xl p-4 space-y-2 rounded-lg">
-              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
                 <ProjectName />
               </div>
-              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
                 <ModeSelector />
               </div>
-              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active">
+              <div className="block p-4 bg-gray-500/10 hover:bg-gray-500/20 rounded-lg transition-colors space-y-4 active @container">
                 <TypescriptSwitch />
               </div>
             </div>

packages/cta-ui/src/components/file-navigator.tsx

@@ -184,11 +184,11 @@ export default function FileNavigator() {
   return (
     <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
       {mode === 'add' && <Filters />}
-      <div className="flex flex-row">
-        <div className="w-1/4 max-w-1/4 bg-gray-500/10 rounded-l-lg">
+      <div className="flex flex-row @container">
+        <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
           <FileTree selectedFile={selectedFile} tree={fileTree} />
         </div>
-        <div className="max-w-3/4 w-3/4">
+        <div className="w-2/3 @6xl:w-3/4">
           {selectedFile && modifiedFileContents ? (
             <FileViewer
               filePath={selectedFile}

packages/cta-ui/src/components/sidebar-items/mode-selector.tsx

@@ -21,7 +21,7 @@ export default function ModeSelector() {
   }
 
   return (
-    <div className="flex flex-row gap-2 items-center">
+    <div className="flex flex-col @md:flex-row @md:items-center gap-2 items-start">
       <h3 className="font-medium whitespace-nowrap">Router Mode</h3>
       <div className="flex flex-row justify-center items-center">
         <ToggleGroup

packages/cta-ui/src/index.tsx

@@ -15,20 +15,15 @@ function Content() {
   useManager()
 
   return (
-    <main>
+    <main className="min-w-[1280px]">
       <BackgroundAnimation />
-      <div
-        className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4"
-        style={{
-          background: `radial-gradient(closest-side, rgba(0,10,40,0.2) 0%, rgba(0,0,0,0) 100%)`,
-        }}
-      >
+      <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-full sm:w-1/3 lg:w-1/4 pr-1 sm:pr-2">
+          <div className="w-1/2 @7xl:w-1/4 pr-1">
             <AppSidebar />
           </div>
-          <div className="w-full sm:w-2/3 lg:w-3/4 pl-1 sm:pl-2">
+          <div className="w-1/2 @7xl:w-3/4 pl-1">
             <FileNavigator />
           </div>
         </div>