From a5b8bf6f60841c2c84956e83df2aaaf4e6d16073 Mon Sep 17 00:00:00 2001
From: KiwiGaze <1244666638@qq.com>
Date: Tue, 3 Mar 2026 21:08:53 +0800
Subject: [PATCH 1/5] fix: improve mobile overflow handling in settings layout
 and navigation components

---
 apps/web/app/(protected)/settings/layout.tsx  |  4 +-
 .../integrations/integration-row.tsx          | 12 ++--
 .../primary-calendar-selector.tsx             | 10 +--
 .../primary-task-list-selector.tsx            | 10 +--
 apps/web/components/settings/settings-nav.tsx | 66 ++++++++++---------
 5 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/apps/web/app/(protected)/settings/layout.tsx b/apps/web/app/(protected)/settings/layout.tsx
index 489dcd83..e35b5073 100644
--- 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/components/integrations/integration-row.tsx b/apps/web/components/integrations/integration-row.tsx
index ee756f75..91f22c7b 100644
--- 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
index afe6d7e7..6fe26cd4 100644
--- 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
index 8a10e734..39bd4280 100644
--- 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
index f1bfbf81..fbf07cb0 100644
--- a/apps/web/components/settings/settings-nav.tsx
+++ b/apps/web/components/settings/settings-nav.tsx
@@ -49,40 +49,42 @@ 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}
+                  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>

From 4b291a18cdc3f871f3e2e42c1ad642fa01236387 Mon Sep 17 00:00:00 2001
From: KiwiGaze <1244666638@qq.com>
Date: Tue, 3 Mar 2026 21:29:39 +0800
Subject: [PATCH 2/5] fix: update mobile active settings nav transition for
 improved styling

---
 apps/web/components/settings/settings-nav.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/settings/settings-nav.tsx b/apps/web/components/settings/settings-nav.tsx
index fbf07cb0..79bd82fa 100644
--- a/apps/web/components/settings/settings-nav.tsx
+++ b/apps/web/components/settings/settings-nav.tsx
@@ -70,7 +70,11 @@ export function SettingsNav() {
                     <motion.div
                       layoutId="active-settings-nav-mobile"
                       className="absolute inset-0 rounded-md bg-background shadow-sm"
-                      transition={{ type: "spring", stiffness: 350, damping: 30 }}
+                      transition={{
+                        type: "spring",
+                        stiffness: 350,
+                        damping: 30,
+                      }}
                     />
                   )}
                   {Icon ? (

From 9024a785ae2fea4081b9ac4e4423219ef3feebfc Mon Sep 17 00:00:00 2001
From: KiwiGaze <1244666638@qq.com>
Date: Tue, 3 Mar 2026 22:04:39 +0800
Subject: [PATCH 3/5] fix: add viewport meta tag and improve layout overflow
 handling for mobile

---
 apps/web/app/head.tsx   | 10 ++++++++++
 apps/web/app/layout.tsx |  3 +--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/app/head.tsx

diff --git a/apps/web/app/head.tsx b/apps/web/app/head.tsx
new file mode 100644
index 00000000..48d1e23c
--- /dev/null
+++ b/apps/web/app/head.tsx
@@ -0,0 +1,10 @@
+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
index 352b07ae..4a86d05f 100644
--- 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,

From 1b12bbdfbf55b1a1001b2e0af3824a68ddb3919b Mon Sep 17 00:00:00 2001
From: KiwiGaze <1244666638@qq.com>
Date: Tue, 3 Mar 2026 22:05:24 +0800
Subject: [PATCH 4/5] fix: simplify viewport meta tag structure in Head
 component

---
 apps/web/app/head.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/head.tsx b/apps/web/app/head.tsx
index 48d1e23c..12d7f039 100644
--- a/apps/web/app/head.tsx
+++ b/apps/web/app/head.tsx
@@ -1,10 +1,8 @@
 export default function Head() {
   return (
-    <>
-      <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1, viewport-fit=cover"
-      />
-    </>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
   );
 }

From 88835db37c6e22fcafc59c644fd87e2992b8a86e Mon Sep 17 00:00:00 2001
From: KiwiGaze <1244666638@qq.com>
Date: Tue, 3 Mar 2026 22:10:27 +0800
Subject: [PATCH 5/5] fix: add aria-current attribute to mobile navigation
 links for accessibility

---
 apps/web/components/settings/settings-nav.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/web/components/settings/settings-nav.tsx b/apps/web/components/settings/settings-nav.tsx
index 79bd82fa..88b6d056 100644
--- 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
@@ -59,6 +60,7 @@ export function SettingsNav() {
                 <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