fix(mobile): prevent widget overflow and overlap on screens < 375px (#975)

src/components/AccountToggle.tsx

@@ -115,13 +115,12 @@ export default function AccountToggle() {
 
   return (
     <div
-      className="mt-4 flex flex-wrap gap-2"
+      className="mt-4 flex flex-wrap gap-1.5"
       role="group"
       aria-label="Select GitHub account or organization"
     >
       {accountOptions.map((option) => {
         const isActive = selectedAccount === option.value;
-        // Determine if this option maps to a real GitHub login for avatar display
         const isOrgOption = option.value?.startsWith("org:") ?? false;
         const isCombined = option.value === "combined";
         const showAvatar = !isCombined && !isOrgOption;
@@ -137,7 +136,7 @@ export default function AccountToggle() {
             type="button"
             aria-pressed={isActive}
             onClick={() => setSelectedAccount(option.value)}
-            className={`inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] ${
+            className={`inline-flex max-w-[10rem] items-center gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] ${
               isActive
                 ? "border-[var(--accent)] bg-[var(--accent)] text-[var(--accent-foreground)]"
                 : "border-[var(--card-muted)] bg-[var(--card-muted)] text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"
@@ -178,7 +177,7 @@ export default function AccountToggle() {
                 <polyline points="9 22 9 12 15 12 15 22" />
               </svg>
             )}
-            <span>{option.label}</span>
+            <span className="truncate">{option.label}</span>
           </button>
         );
       })}

src/components/ContributionHeatmap.tsx

@@ -354,15 +354,15 @@ export default function ContributionHeatmap({
 
   return (
     <div className="w-full overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 sm:p-6 shadow-sm">
-      <div className="mb-4 flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center justify-between gap-4 sm:gap-2">
-        <div>
-          <h2 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-white">Contribution Heatmap</h2>          
-          <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-300">
+      <div className="mb-4 flex flex-col items-start justify-between gap-3">
+        <div className="w-full">
+          <h2 className="text-base font-semibold text-[var(--card-foreground)] dark:text-white">Contribution Heatmap</h2>          
+          <p className="text-xs text-[var(--muted-foreground)] dark:text-gray-300">
             {customLabel ? `${customLabel}` : `Last ${selectedDays} days of commit activity.`}
           </p>
         </div>
 
-        <div className="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-2">
+        <div className="flex w-full flex-wrap items-center gap-2">
           {/* Range buttons */}
           <div className="flex flex-wrap gap-1 rounded-lg border border-[var(--border)] bg-[var(--background)] p-1">
             {PRESET_RANGES.map((r) => (

src/components/DashboardHeader.tsx

@@ -311,15 +311,15 @@ export default function DashboardHeader() {
     : null;
 
   return (
-    <header className="relative mb-8 overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)]/95 p-4 shadow-[var(--shadow-soft)] backdrop-blur-md transition-all duration-300 hover:shadow-[var(--shadow-medium)] sm:p-5 md:p-6">
+    <header className="relative mb-8 overflow-hidden rounded-3xl border border-[var(--border)] bg-[var(--card)]/95 p-3 shadow-[var(--shadow-soft)] backdrop-blur-md transition-all duration-300 hover:shadow-[var(--shadow-medium)] sm:p-5 md:p-6">
       <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--accent)]/40 to-transparent" />
       <div className="pointer-events-none absolute -right-10 -top-12 h-32 w-32 rounded-full bg-[var(--accent)]/10 blur-3xl" />
       <div className="relative z-10 flex min-w-0 flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
 
         {/* Left Section */}
-        <div className="min-w-0 pr-12 lg:pr-0">
+        <div className="min-w-0 pr-0">
           <div className="mb-1 flex min-w-0 flex-wrap items-center gap-2">
-            <div className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--accent)]/20 bg-[var(--accent)]/10 px-2.5 py-0.5 text-xs font-semibold text-[var(--accent)] transition-all duration-300">
+            <div className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--accent)]/20 bg-[var(--accent)]/10 px-2 py-0.5 text-[11px] font-semibold text-[var(--accent)] transition-all duration-300">
               <span className="relative flex h-1.5 w-1.5">
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[var(--accent)] opacity-75"></span>
                 <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[var(--accent)]"></span>
@@ -352,7 +352,7 @@ export default function DashboardHeader() {
             >
               Dashboard overview
             </p>
-            <h1 className="mt-2 bg-gradient-to-r from-[var(--foreground)] via-[var(--foreground)] to-[var(--accent)] bg-clip-text text-2xl font-extrabold text-transparent sm:text-3xl md:text-4xl">
+            <h1 className="mt-2 bg-gradient-to-r from-[var(--foreground)] via-[var(--foreground)] to-[var(--accent)] bg-clip-text text-xl font-extrabold text-transparent sm:text-3xl md:text-4xl">
               Dashboard
             </h1>
             <p
@@ -384,7 +384,7 @@ export default function DashboardHeader() {
         {/* Right Section */}
         {/* Right Section */}
         <div className="w-full min-w-0 lg:w-auto">
-          <div className="flex w-full min-w-0 items-center gap-3 overflow-x-auto pb-1 lg:w-auto lg:justify-end lg:overflow-visible lg:pb-0">
+          <div className="flex w-full min-w-0 items-center gap-2 overflow-x-auto pb-1 lg:w-auto lg:justify-end lg:overflow-visible lg:pb-0">
             {isPublic === true && session?.githubLogin && (
               <ShareProfileButton githubLogin={session.githubLogin} />
             )}
@@ -413,11 +413,11 @@ export default function DashboardHeader() {
           </div>
         </div>
 
-        {/* Mobile hamburger button */}
+        {/* Mobile hamburger button - hidden since controls are inline on mobile via overflow-x-auto */}
         <Button
           variant="outline"
           size="icon"
-          className="self-start sm:hidden"
+          className="hidden"
           onClick={() => setMenuOpen((v) => !v)}
           aria-label="Toggle menu"
           aria-expanded={menuOpen}

src/components/PRMetrics.tsx

@@ -166,7 +166,7 @@ export default function PRMetrics() {
   const renderStat = (stat: PRStat) => {
     const content = (
       <>
-        <div className={`truncate text-2xl font-bold ${stat.warning ? "text-orange-300" : "text-[var(--accent)]"}`}>
+        <div className={`truncate text-xl font-bold ${stat.warning ? "text-orange-300" : "text-[var(--accent)]"}`}>
           {stat.value}
         </div>
         <div className="truncate mt-1 text-sm text-[var(--muted-foreground)]">{stat.label}</div>

src/components/StreakTracker.tsx

@@ -619,21 +619,21 @@ export default function StreakTracker() {
             </div>
             {data && <div className="h-8 w-24" />}
           </div>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-2 gap-2 xs:gap-3">
             {stats.map((stat) => (
               <div
                 key={stat.label}
-                className={`rounded-lg p-4 text-center ${stat.highlight
+                className={`rounded-lg p-3 text-center ${stat.highlight
                   ? "border border-[var(--accent)]/40 bg-[var(--accent-soft)]"
                   : "bg-[var(--control)]"
                   }`}
                 aria-label={stat.tooltip}
               >
                 <div className="flex justify-center mb-1">
-                  <stat.icon size={24} className="text-[var(--accent)]" aria-hidden="true" />
+                  <stat.icon size={20} className="text-[var(--accent)]" aria-hidden="true" />
                 </div>
                 <div
-                  className={`text-2xl font-bold ${stat.highlight ? "text-[var(--accent)]" : "text-[var(--accent)]"
+                  className={`text-lg font-bold leading-tight break-all ${stat.highlight ? "text-[var(--accent)]" : "text-[var(--accent)]"
                     }`}
                 >
                   {stat.value}