feat: update layout components to use flex-1 for better responsiveness

Author: hotlong

apps/studio/src/components/user-menu.tsx

@@ -50,8 +50,11 @@ export function UserMenu() {
   }
 
   const handleLogout = async () => {
-    await logout();
-    navigate({ to: '/login' });
+    try {
+      await logout();
+    } finally {
+      navigate({ to: '/login' });
+    }
   };
 
   return (

apps/studio/src/routes/login.tsx

@@ -49,7 +49,7 @@ function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex flex-1 items-center justify-center bg-background px-4">
       <Card className="w-full max-w-sm">
         <CardHeader>
           <CardTitle>Sign in</CardTitle>

apps/studio/src/routes/orgs.$orgId.tsx

@@ -61,7 +61,7 @@ function OrgDetailPage() {
   const isActive = session?.activeOrganizationId === orgId;
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex flex-1 flex-col">
       <SiteHeader selectedView="overview" />
       <div className="flex-1 px-6 py-8">
         <div className="mx-auto max-w-3xl space-y-6">

apps/studio/src/routes/orgs..tsx

@@ -1,9 +1,15 @@
-import { createFileRoute } from '@tanstack/react-router'
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/orgs/')({
-  component: RouteComponent,
-})
+  component: OrgsLayout,
+});
 
-function RouteComponent() {
-  return <div>Hello "/orgs/"!</div>
+function OrgsLayout() {
+  return (
+    <div className="flex flex-1 flex-col overflow-auto">
+      <Outlet />
+    </div>
+  );
 }

apps/studio/src/routes/orgs.index.tsx

@@ -33,7 +33,7 @@ function OrgsListPage() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex flex-1 flex-col">
       <SiteHeader selectedView="overview" />
       <div className="flex-1 px-6 py-8">
         <div className="mx-auto max-w-3xl space-y-6">

apps/studio/src/routes/orgs.new.tsx

@@ -58,7 +58,7 @@ function NewOrgPage() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex flex-1 flex-col">
       <SiteHeader selectedView="overview" />
       <div className="flex-1 px-6 py-8">
         <div className="mx-auto max-w-lg">

apps/studio/src/routes/register.tsx

@@ -50,7 +50,7 @@ function RegisterPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4">
+    <div className="flex flex-1 items-center justify-center bg-background px-4">
       <Card className="w-full max-w-sm">
         <CardHeader>
           <CardTitle>Create account</CardTitle>