KiwiGaze · KiwiGaze · Mar 3, 2026 · Mar 3, 2026 · Mar 3, 2026 · Mar 3, 2026
diff --git a/apps/web/app/(protected)/settings/layout.tsx b/apps/web/app/(protected)/settings/layout.tsx
@@ -6,11 +6,11 @@ interface SettingsLayoutProps {
 
 export default function SettingsLayout({ children }: SettingsLayoutProps) {
   return (
-    <div className="flex flex-1 flex-col gap-6 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-8 lg:grid-cols-[240px_minmax(0,1fr)]">
+    <div className="flex min-w-0 flex-1 flex-col gap-6 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-8 lg:grid-cols-[240px_minmax(0,1fr)]">
       <aside className="md:sticky md:top-0 md:self-start">
         <SettingsNav />
       </aside>
-      <div>{children}</div>
+      <div className="min-w-0">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/app/head.tsx b/apps/web/app/head.tsx
@@ -0,0 +1,8 @@
+export default function Head() {
+  return (
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+  );
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -82,10 +82,9 @@ export function generateMetadata(): Metadata {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head />
       <body
         className={cn(
-          "min-h-screen bg-background font-sans antialiased",
+          "min-h-screen w-full bg-background font-sans antialiased",
           fontSans.variable,
           fontUrban.variable,
           fontHeading.variable,

diff --git a/apps/web/components/integrations/integration-row.tsx b/apps/web/components/integrations/integration-row.tsx
@@ -31,13 +31,13 @@ export function IntegrationRow({
 }: IntegrationRowProps) {
   return (
     <div className="flex flex-col">
-      <div className="flex items-center justify-between py-4">
-        <div className="flex items-center gap-4">
+      <div className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex min-w-0 items-center gap-4">
           <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-border/40 bg-muted/30">
             {icon}
           </div>
-          <div className="flex flex-col gap-0.5">
-            <div className="flex items-center gap-2">
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <div className="flex flex-wrap items-center gap-2">
               <span className="text-sm font-medium leading-none">{title}</span>
               {isConnected && !isInvalid && isPrimaryProvider && (
                 <Badge
@@ -63,14 +63,14 @@ export function IntegrationRow({
             )}
           </div>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex w-full items-center justify-between gap-3 sm:w-auto sm:justify-end">
           {isConnected && !isInvalid && (
             <span className="text-xs font-medium text-blue-500">Connected</span>
           )}
           {action}
         </div>
       </div>
-      {children && <div className="pb-4 pl-14">{children}</div>}
+      {children && <div className="pb-4 pl-0 sm:pl-14">{children}</div>}
     </div>
   );
 }
diff --git a/apps/web/components/integrations/primary-calendar-selector.tsx b/apps/web/components/integrations/primary-calendar-selector.tsx
@@ -90,8 +90,8 @@ export function PrimaryCalendarSelector({
   };
 
   return (
-    <div className="flex items-center justify-between py-4">
-      <div className="flex items-center gap-4">
+    <div className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-center gap-4">
         <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-border/40 bg-muted/30">
           {selectedProvider === "GOOGLE_CALENDAR" ? (
             <GoogleCalendar className="size-5" />
@@ -101,7 +101,7 @@ export function PrimaryCalendarSelector({
             <Calendar className="size-5 text-muted-foreground" />
           )}
         </div>
-        <div className="flex flex-col gap-0.5">
+        <div className="flex min-w-0 flex-col gap-0.5">
           <span className="text-sm font-medium leading-none">
             Primary Calendar
           </span>
@@ -110,7 +110,7 @@ export function PrimaryCalendarSelector({
           </p>
         </div>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex w-full items-center gap-2 sm:w-auto">
         {(isPending || parentLoading) && (
           <Loader2 className="size-3.5 animate-spin text-muted-foreground" />
         )}
@@ -119,7 +119,7 @@ export function PrimaryCalendarSelector({
           onValueChange={(value) => void handleSelect(value)}
           disabled={isPending || parentLoading || calendars.length === 0}
         >
-          <SelectTrigger className="h-8 w-[200px] border-border/40 bg-transparent text-sm transition-colors hover:border-border hover:bg-muted/50 focus:ring-1 focus:ring-ring/20">
+          <SelectTrigger className="h-8 w-full border-border/40 bg-transparent text-sm transition-colors hover:border-border hover:bg-muted/50 focus:ring-1 focus:ring-ring/20 sm:w-[200px]">
             <SelectValue placeholder="Select a calendar..." />
           </SelectTrigger>
           <SelectContent>

diff --git a/apps/web/components/integrations/primary-task-list-selector.tsx b/apps/web/components/integrations/primary-task-list-selector.tsx
@@ -85,8 +85,8 @@ export function PrimaryTaskListSelector({
   };
 
   return (
-    <div className="flex items-center justify-between py-4">
-      <div className="flex items-center gap-4">
+    <div className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex min-w-0 items-center gap-4">
         <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-border/40 bg-muted/30">
           {selectedProvider === "GOOGLE_TASKS" ? (
             <GoogleTask className="size-5" />
@@ -96,7 +96,7 @@ export function PrimaryTaskListSelector({
             <CheckSquare className="size-5 text-muted-foreground" />
           )}
         </div>
-        <div className="flex flex-col gap-0.5">
+        <div className="flex min-w-0 flex-col gap-0.5">
           <span className="text-sm font-medium leading-none">
             Primary Task List
           </span>
@@ -105,7 +105,7 @@ export function PrimaryTaskListSelector({
           </p>
         </div>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex w-full items-center gap-2 sm:w-auto">
         {(isPending || parentLoading) && (
           <Loader2 className="size-3.5 animate-spin text-muted-foreground" />
         )}
@@ -114,7 +114,7 @@ export function PrimaryTaskListSelector({
           onValueChange={(value) => void handleSelect(value)}
           disabled={isPending || parentLoading || taskLists.length === 0}
         >
-          <SelectTrigger className="h-8 w-[200px] border-border/40 bg-transparent text-sm transition-colors hover:border-border hover:bg-muted/50 focus:ring-1 focus:ring-ring/20">
+          <SelectTrigger className="h-8 w-full border-border/40 bg-transparent text-sm transition-colors hover:border-border hover:bg-muted/50 focus:ring-1 focus:ring-ring/20 sm:w-[200px]">
             <SelectValue placeholder="Select a task list..." />
           </SelectTrigger>
           <SelectContent>

diff --git a/apps/web/components/settings/settings-nav.tsx b/apps/web/components/settings/settings-nav.tsx
@@ -24,6 +24,7 @@ export function SettingsNav() {
             <Link
               key={item.href}
               href={item.href}
+              aria-current={isActive ? "page" : undefined}
               className={cn(
                 "relative flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200",
                 isActive
@@ -49,40 +50,47 @@ export function SettingsNav() {
 
       {/* Mobile top nav */}
       <div className="md:hidden">
-        <div className="scrollbar-none flex items-center gap-1 overflow-x-auto rounded-lg border bg-muted p-1">
-          {settingsSections.map((item) => {
-            const isActive = pathname === item.href;
-            const Icon = item.icon ? Icons[item.icon] : null;
+        <div className="scrollbar-none w-full overflow-x-auto">
+          <div className="flex min-w-max items-center gap-1 rounded-lg border bg-muted p-1">
+            {settingsSections.map((item) => {
+              const isActive = pathname === item.href;
+              const Icon = item.icon ? Icons[item.icon] : null;
 
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={cn(
-                  "relative flex min-w-max flex-1 items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
-                  isActive
-                    ? "text-foreground"
-                    : "text-muted-foreground hover:text-foreground",
-                )}
-              >
-                {isActive && (
-                  <motion.div
-                    layoutId="active-settings-nav-mobile"
-                    className="absolute inset-0 rounded-md bg-background shadow-sm"
-                    transition={{ type: "spring", stiffness: 350, damping: 30 }}
-                  />
-                )}
-                {Icon ? (
-                  <span className="relative z-10">
-                    <Icon className="size-3.5" />
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  aria-current={isActive ? "page" : undefined}
+                  className={cn(
+                    "relative flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                    isActive
+                      ? "text-foreground"
+                      : "text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {isActive && (
+                    <motion.div
+                      layoutId="active-settings-nav-mobile"
+                      className="absolute inset-0 rounded-md bg-background shadow-sm"
+                      transition={{
+                        type: "spring",
+                        stiffness: 350,
+                        damping: 30,
+                      }}
+                    />
+                  )}
+                  {Icon ? (
+                    <span className="relative z-10">
+                      <Icon className="size-3.5" />
+                    </span>
+                  ) : null}
+                  <span className="relative z-10 tracking-tight">
+                    {item.title}
                   </span>
-                ) : null}
-                <span className="relative z-10 tracking-tight">
-                  {item.title}
-                </span>
-              </Link>
-            );
-          })}
+                </Link>
+              );
+            })}
+          </div>
         </div>
       </div>
     </div>