From 66e7fc4ee4e8e9b9a1895bbc64a1453aea55f16b Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:27:56 +0300
Subject: [PATCH 1/5] Use common page structure for the main pages

---
 .../[emailAccountId]/automation/page.tsx      |  87 +++---
 .../bulk-unsubscribe/BulkActions.tsx          |   2 +-
 .../bulk-unsubscribe/BulkUnsubscribe.tsx      |  94 ------
 .../BulkUnsubscribeSection.tsx                | 267 ++++++++++--------
 .../bulk-unsubscribe/page.tsx                 |   3 +-
 .../(app)/[emailAccountId]/stats/Stats.tsx    |  27 +-
 apps/web/components/PageWrapper.tsx           |  15 +
 7 files changed, 228 insertions(+), 267 deletions(-)
 delete mode 100644 apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribe.tsx
 create mode 100644 apps/web/components/PageWrapper.tsx

diff --git a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
index 679f92548c..ff5366f52a 100644
--- a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
@@ -21,6 +21,7 @@ import { PageHeading } from "@/components/Typography";
 import { TabSelect } from "@/components/TabSelect";
 import { RulesTab } from "@/app/(app)/[emailAccountId]/assistant/RulesTab";
 import { AIChatButton } from "@/app/(app)/[emailAccountId]/assistant/AIChatButton";
+import { PageWrapper } from "@/components/PageWrapper";
 
 export const maxDuration = 300; // Applies to the actions
 
@@ -86,53 +87,51 @@ export default async function AutomationPage({
       <Suspense>
         <PermissionsCheck />
 
-        <div className="mx-4 mt-2">
-          <div className="w-screen-xl mx-auto max-w-screen-xl">
-            <div className="w-full">
-              <PremiumAlertWithData className="mb-2" />
-
-              <div className="flex items-center justify-between">
-                <PageHeading>Assistant</PageHeading>
-                <ExtraActions />
-              </div>
-
-              <div className="border-b border-neutral-200 pt-2">
-                <Suspense
-                  fallback={
-                    <TabSelect
-                      options={tabOptions(emailAccountId)}
-                      selected={tab ?? "rules"}
-                    />
-                  }
-                >
-                  <TabNavigation
-                    emailAccountId={emailAccountId}
-                    tab={tab}
-                    hasPendingRule={hasPendingRule}
+        <PageWrapper>
+          <div className="w-full">
+            <PremiumAlertWithData className="mb-2" />
+
+            <div className="flex items-center justify-between">
+              <PageHeading>Assistant</PageHeading>
+              <ExtraActions />
+            </div>
+
+            <div className="border-b border-neutral-200 pt-2">
+              <Suspense
+                fallback={
+                  <TabSelect
+                    options={tabOptions(emailAccountId)}
+                    selected={tab ?? "rules"}
                   />
-                </Suspense>
-              </div>
-
-              <Tabs defaultValue="rules">
-                <TabsContent value="rules" className="mb-10">
-                  <RulesTab />
-                </TabsContent>
-                <TabsContent value="settings" className="mb-10">
-                  <SettingsTab />
-                </TabsContent>
-                <TabsContent value="test" className="mb-10">
-                  <Process />
-                </TabsContent>
-                <TabsContent value="history" className="mb-10">
-                  <History />
-                </TabsContent>
-                <Suspense>
-                  <PendingTab hasPendingRule={hasPendingRule} />
-                </Suspense>
-              </Tabs>
+                }
+              >
+                <TabNavigation
+                  emailAccountId={emailAccountId}
+                  tab={tab}
+                  hasPendingRule={hasPendingRule}
+                />
+              </Suspense>
             </div>
+
+            <Tabs defaultValue="rules">
+              <TabsContent value="rules" className="mb-10">
+                <RulesTab />
+              </TabsContent>
+              <TabsContent value="settings" className="mb-10">
+                <SettingsTab />
+              </TabsContent>
+              <TabsContent value="test" className="mb-10">
+                <Process />
+              </TabsContent>
+              <TabsContent value="history" className="mb-10">
+                <History />
+              </TabsContent>
+              <Suspense>
+                <PendingTab hasPendingRule={hasPendingRule} />
+              </Suspense>
+            </Tabs>
           </div>
-        </div>
+        </PageWrapper>
       </Suspense>
     </EmailProvider>
   );
diff --git a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkActions.tsx b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkActions.tsx
index 94c99fbd47..d823ed9e6a 100644
--- a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkActions.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkActions.tsx
@@ -68,7 +68,7 @@ export function BulkActions({
   return (
     <>
       <PremiumTooltip showTooltip={!hasUnsubscribeAccess} openModal={openModal}>
-        <div className="flex items-center space-x-1.5">
+        <div className="flex items-center space-x-1.5 mt-2">
           <div>
             <Button
               size="sm"
diff --git a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribe.tsx b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribe.tsx
deleted file mode 100644
index 11efc9bdc2..0000000000
--- a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribe.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import subDays from "date-fns/subDays";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useWindowSize } from "usehooks-ts";
-import type { DateRange } from "react-day-picker";
-import { BulkUnsubscribeSection } from "@/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection";
-import { LoadStatsButton } from "@/app/(app)/[emailAccountId]/stats/LoadStatsButton";
-import { ActionBar } from "@/app/(app)/[emailAccountId]/stats/ActionBar";
-import { useStatLoader } from "@/providers/StatLoaderProvider";
-import { OnboardingModal } from "@/components/OnboardingModal";
-import { TextLink } from "@/components/Typography";
-import { TopBar } from "@/components/TopBar";
-
-const selectOptions = [
-  { label: "Last week", value: "7" },
-  { label: "Last month", value: "30" },
-  { label: "Last 3 months", value: "90" },
-  { label: "Last year", value: "365" },
-  { label: "All", value: "0" },
-];
-const defaultSelected = selectOptions[2];
-
-// Some copy paste from /stats page in here
-// May want to refactor some of this into a shared hook
-export function BulkUnsubscribe() {
-  const windowSize = useWindowSize();
-  const isMobile = windowSize.width < 768;
-
-  const [dateDropdown, setDateDropdown] = useState<string>(
-    defaultSelected.label,
-  );
-
-  const onSetDateDropdown = useCallback(
-    (option: { label: string; value: string }) => {
-      const { label } = option;
-      setDateDropdown(label);
-    },
-    [],
-  );
-
-  const now = useMemo(() => new Date(), []);
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
-    from: subDays(now, Number.parseInt(defaultSelected.value)),
-    to: now,
-  });
-
-  const { isLoading, onLoad } = useStatLoader();
-  const refreshInterval = isLoading ? 5000 : 1_000_000;
-  useEffect(() => {
-    onLoad({ loadBefore: false, showToast: false });
-  }, [onLoad]);
-
-  return (
-    <div>
-      <TopBar sticky className="border-border bg-background">
-        <OnboardingModal
-          title="Getting started with Bulk Unsubscribe"
-          description={
-            <>
-              Learn how to quickly bulk unsubscribe from unwanted emails. You
-              can read more in our{" "}
-              <TextLink href="https://docs.getinboxzero.com/essentials/bulk-email-unsubscriber">
-                documentation
-              </TextLink>
-              .
-            </>
-          }
-          videoId="T1rnooV4OYc"
-        />
-
-        <div className="flex flex-wrap gap-1">
-          <ActionBar
-            selectOptions={selectOptions}
-            dateDropdown={dateDropdown}
-            setDateDropdown={onSetDateDropdown}
-            dateRange={dateRange}
-            setDateRange={setDateRange}
-            isMobile={isMobile}
-          />
-          <LoadStatsButton />
-        </div>
-      </TopBar>
-
-      <div className="my-2 sm:mx-4 sm:my-4">
-        <BulkUnsubscribeSection
-          dateRange={dateRange}
-          refreshInterval={refreshInterval}
-          isMobile={isMobile}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
index dad7cad71d..d5f62ce1d0 100644
--- a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
+import subDays from "date-fns/subDays";
 import { usePostHog } from "posthog-js/react";
 import { FilterIcon } from "lucide-react";
 import sortBy from "lodash/sortBy";
-import { Title } from "@tremor/react";
 import type { DateRange } from "react-day-picker";
 import { LoadingContent } from "@/components/LoadingContent";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -43,18 +43,51 @@ import { ArchiveProgress } from "@/app/(app)/[emailAccountId]/bulk-unsubscribe/A
 import { ClientOnly } from "@/components/ClientOnly";
 import { Toggle } from "@/components/Toggle";
 import { useAccount } from "@/providers/EmailAccountProvider";
+import { PageHeading } from "@/components/Typography";
+import { useWindowSize } from "usehooks-ts";
+import { ActionBar } from "@/app/(app)/[emailAccountId]/stats/ActionBar";
+import { LoadStatsButton } from "@/app/(app)/[emailAccountId]/stats/LoadStatsButton";
+import { PageWrapper } from "@/components/PageWrapper";
+
+const selectOptions = [
+  { label: "Last week", value: "7" },
+  { label: "Last month", value: "30" },
+  { label: "Last 3 months", value: "90" },
+  { label: "Last year", value: "365" },
+  { label: "All", value: "0" },
+];
+const defaultSelected = selectOptions[2];
 
 type Newsletter = NewsletterStatsResponse["newsletters"][number];
 
-export function BulkUnsubscribeSection({
-  dateRange,
-  refreshInterval,
-  isMobile,
-}: {
-  dateRange?: DateRange | undefined;
-  refreshInterval: number;
-  isMobile: boolean;
-}) {
+export function BulkUnsubscribe() {
+  const windowSize = useWindowSize();
+  const isMobile = windowSize.width < 768;
+
+  const [dateDropdown, setDateDropdown] = useState<string>(
+    defaultSelected.label,
+  );
+
+  const onSetDateDropdown = useCallback(
+    (option: { label: string; value: string }) => {
+      const { label } = option;
+      setDateDropdown(label);
+    },
+    [],
+  );
+
+  const now = useMemo(() => new Date(), []);
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: subDays(now, Number.parseInt(defaultSelected.value)),
+    to: now,
+  });
+
+  const { isLoading: isStatsLoaderLoading, onLoad } = useStatLoader();
+  const refreshInterval = isStatsLoaderLoading ? 5000 : 1_000_000;
+  useEffect(() => {
+    onLoad({ loadBefore: false, showToast: false });
+  }, [onLoad]);
+
   const { emailAccountId, userEmail } = useAccount();
 
   const [sortColumn, setSortColumn] = useState<
@@ -174,110 +207,122 @@ export function BulkUnsubscribeSection({
     !filters.approved;
 
   return (
-    <>
-      <Card className="mt-0 md:mt-4">
-        <div className="items-center justify-between px-2 pt-2 sm:px-4 md:flex">
-          {Array.from(selected.values()).filter(Boolean).length > 0 ? (
-            <BulkActions selected={selected} mutate={mutate} />
-          ) : (
-            <Title className="hidden md:block">Bulk Unsubscriber</Title>
-          )}
-
-          <div className="mt-2 flex flex-wrap items-center justify-end gap-1 md:mt-0 lg:flex-nowrap">
-            <div className="mr-2">
-              <Toggle
-                name="show-unhandled"
-                label="Only unhandled"
-                enabled={onlyUnhandled}
-                onChange={() =>
-                  setFilters(
-                    onlyUnhandled
-                      ? {
-                          unhandled: true,
-                          autoArchived: true,
-                          unsubscribed: true,
-                          approved: true,
-                        }
-                      : {
-                          unhandled: true,
-                          autoArchived: false,
-                          unsubscribed: false,
-                          approved: false,
-                        },
-                  )
-                }
-              />
-            </div>
-
-            <div className="hidden md:block">
-              <ShortcutTooltip />
-            </div>
-
-            <SearchBar onSearch={setSearch} />
-
-            <DetailedStatsFilter
-              label="Filter"
-              icon={<FilterIcon className="mr-2 h-4 w-4" />}
-              keepOpenOnSelect
-              columns={[
-                {
-                  label: "All",
-                  separatorAfter: true,
-                  checked:
-                    filters.approved &&
-                    filters.autoArchived &&
-                    filters.unsubscribed &&
-                    filters.unhandled,
-                  setChecked: () =>
-                    setFilters({
-                      approved: true,
-                      autoArchived: true,
-                      unsubscribed: true,
-                      unhandled: true,
-                    }),
-                },
-                {
-                  label: "Unhandled",
-                  checked: filters.unhandled,
-                  setChecked: () =>
-                    setFilters({
-                      ...filters,
-                      unhandled: !filters.unhandled,
-                    }),
-                },
-                {
-                  label: "Unsubscribed",
-                  checked: filters.unsubscribed,
-                  setChecked: () =>
-                    setFilters({
-                      ...filters,
-                      unsubscribed: !filters.unsubscribed,
-                    }),
-                },
-                {
-                  label: "Skip Inbox",
-                  checked: filters.autoArchived,
-                  setChecked: () =>
-                    setFilters({
-                      ...filters,
-                      autoArchived: !filters.autoArchived,
-                    }),
-                },
-                {
-                  label: "Approved",
-                  checked: filters.approved,
-                  setChecked: () =>
-                    setFilters({ ...filters, approved: !filters.approved }),
-                },
-              ]}
+    <PageWrapper>
+      <PageHeading>Bulk Unsubscriber</PageHeading>
+
+      <div className="items-center justify-between md:flex mt-4">
+        <div className="flex flex-wrap items-center justify-end gap-1 md:mt-0 lg:flex-nowrap">
+          <div className="">
+            <Toggle
+              name="show-unhandled"
+              label="Only unhandled"
+              enabled={onlyUnhandled}
+              onChange={() =>
+                setFilters(
+                  onlyUnhandled
+                    ? {
+                        unhandled: true,
+                        autoArchived: true,
+                        unsubscribed: true,
+                        approved: true,
+                      }
+                    : {
+                        unhandled: true,
+                        autoArchived: false,
+                        unsubscribed: false,
+                        approved: false,
+                      },
+                )
+              }
             />
           </div>
+
+          <div className="hidden md:block">
+            <ShortcutTooltip />
+          </div>
+
+          <SearchBar onSearch={setSearch} />
+
+          <DetailedStatsFilter
+            label="Filter"
+            icon={<FilterIcon className="mr-2 h-4 w-4" />}
+            keepOpenOnSelect
+            columns={[
+              {
+                label: "All",
+                separatorAfter: true,
+                checked:
+                  filters.approved &&
+                  filters.autoArchived &&
+                  filters.unsubscribed &&
+                  filters.unhandled,
+                setChecked: () =>
+                  setFilters({
+                    approved: true,
+                    autoArchived: true,
+                    unsubscribed: true,
+                    unhandled: true,
+                  }),
+              },
+              {
+                label: "Unhandled",
+                checked: filters.unhandled,
+                setChecked: () =>
+                  setFilters({
+                    ...filters,
+                    unhandled: !filters.unhandled,
+                  }),
+              },
+              {
+                label: "Unsubscribed",
+                checked: filters.unsubscribed,
+                setChecked: () =>
+                  setFilters({
+                    ...filters,
+                    unsubscribed: !filters.unsubscribed,
+                  }),
+              },
+              {
+                label: "Skip Inbox",
+                checked: filters.autoArchived,
+                setChecked: () =>
+                  setFilters({
+                    ...filters,
+                    autoArchived: !filters.autoArchived,
+                  }),
+              },
+              {
+                label: "Approved",
+                checked: filters.approved,
+                setChecked: () =>
+                  setFilters({ ...filters, approved: !filters.approved }),
+              },
+            ]}
+          />
         </div>
 
-        <ClientOnly>
-          <ArchiveProgress />
-        </ClientOnly>
+        <div className="flex flex-wrap gap-1">
+          <ActionBar
+            selectOptions={selectOptions}
+            dateDropdown={dateDropdown}
+            setDateDropdown={onSetDateDropdown}
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+            isMobile={isMobile}
+          />
+          <LoadStatsButton />
+        </div>
+      </div>
+
+      <ClientOnly>
+        <ArchiveProgress />
+      </ClientOnly>
 
+      {Array.from(selected.values()).filter(Boolean).length > 0 ? (
+        <BulkActions selected={selected} mutate={mutate} />
+      ) : null}
+
+      <Card className="mt-0 md:mt-4">
         {isStatsLoading && !isLoading && !data?.newsletters.length ? (
           <div className="p-4">
             <Skeleton className="h-screen rounded" />
@@ -324,6 +369,6 @@ export function BulkUnsubscribeSection({
         refreshInterval={refreshInterval}
       />
       <PremiumModal />
-    </>
+    </PageWrapper>
   );
 }
diff --git a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/page.tsx b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/page.tsx
index 7926446f80..386667f2c4 100644
--- a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/page.tsx
@@ -1,8 +1,7 @@
 import { PermissionsCheck } from "@/app/(app)/[emailAccountId]/PermissionsCheck";
-import { BulkUnsubscribe } from "./BulkUnsubscribe";
+import { BulkUnsubscribe } from "./BulkUnsubscribeSection";
 
 export default async function BulkUnsubscribePage() {
-  // await checkAndRedirectForUpgrade();
   return (
     <>
       <PermissionsCheck />
diff --git a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
index 307c3ea5a6..1082f864f6 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
@@ -15,7 +15,8 @@ import { EmailActionsAnalytics } from "@/app/(app)/[emailAccountId]/stats/EmailA
 import { BulkUnsubscribeSummary } from "@/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSummary";
 import { CardBasic } from "@/components/ui/card";
 import { Title } from "@tremor/react";
-import { TopBar } from "@/components/TopBar";
+import { PageHeading } from "@/components/Typography";
+import { PageWrapper } from "@/components/PageWrapper";
 
 const selectOptions = [
   { label: "Last week", value: "7" },
@@ -64,8 +65,9 @@ export function Stats() {
   }, [onLoad]);
 
   return (
-    <div className="pb-20">
-      <TopBar sticky>
+    <PageWrapper className="pb-20">
+      <PageHeading>Analytics</PageHeading>
+      <div className="flex items-center justify-between">
         {isLoading ? <LoadProgress /> : <div />}
         <div className="flex flex-wrap gap-1">
           <ActionBar
@@ -80,20 +82,15 @@ export function Stats() {
           />
           <LoadStatsButton />
         </div>
-      </TopBar>
+      </div>
 
-      <div className="px-4 py-4">
+      <div className="py-4">
         <StatsSummary dateRange={dateRange} refreshInterval={refreshInterval} />
       </div>
 
-      <div className="px-4">
-        <EmailAnalytics
-          dateRange={dateRange}
-          refreshInterval={refreshInterval}
-        />
-      </div>
+      <EmailAnalytics dateRange={dateRange} refreshInterval={refreshInterval} />
 
-      <div className="mx-4 mt-4">
+      <div className="mt-4">
         <DetailedStats
           dateRange={dateRange}
           period={period}
@@ -101,7 +98,7 @@ export function Stats() {
         />
       </div>
 
-      <div className="mt-4 px-4">
+      <div className="mt-4">
         <CardBasic>
           <Title>
             How many emailers you've handled with Inbox Zero bulk unsubscribe
@@ -112,11 +109,11 @@ export function Stats() {
         </CardBasic>
       </div>
 
-      <div className="mt-4 px-4">
+      <div className="mt-4">
         <EmailActionsAnalytics />
       </div>
 
       <StatsOnboarding />
-    </div>
+    </PageWrapper>
   );
 }
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
new file mode 100644
index 0000000000..393502bb3e
--- /dev/null
+++ b/apps/web/components/PageWrapper.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/utils";
+
+export function PageWrapper({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mx-auto max-w-screen-xl w-full", className)}>
+      {children}
+    </div>
+  );
+}

From d1d32d9dba8474a8d8461e8f1e1ff89601ddfa2c Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:43:16 +0300
Subject: [PATCH 2/5] fix up mobile page wrapper

---
 .../[emailAccountId]/automation/page.tsx      | 80 +++++++++----------
 apps/web/components/PageWrapper.tsx           |  7 +-
 apps/web/components/Typography.tsx            |  2 +-
 3 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
index ff5366f52a..d286038b38 100644
--- a/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/automation/page.tsx
@@ -88,49 +88,47 @@ export default async function AutomationPage({
         <PermissionsCheck />
 
         <PageWrapper>
-          <div className="w-full">
-            <PremiumAlertWithData className="mb-2" />
-
-            <div className="flex items-center justify-between">
-              <PageHeading>Assistant</PageHeading>
-              <ExtraActions />
-            </div>
-
-            <div className="border-b border-neutral-200 pt-2">
-              <Suspense
-                fallback={
-                  <TabSelect
-                    options={tabOptions(emailAccountId)}
-                    selected={tab ?? "rules"}
-                  />
-                }
-              >
-                <TabNavigation
-                  emailAccountId={emailAccountId}
-                  tab={tab}
-                  hasPendingRule={hasPendingRule}
+          <PremiumAlertWithData className="mb-2" />
+
+          <div className="flex items-center justify-between">
+            <PageHeading>Assistant</PageHeading>
+            <ExtraActions />
+          </div>
+
+          <div className="border-b border-neutral-200 pt-2">
+            <Suspense
+              fallback={
+                <TabSelect
+                  options={tabOptions(emailAccountId)}
+                  selected={tab ?? "rules"}
                 />
-              </Suspense>
-            </div>
-
-            <Tabs defaultValue="rules">
-              <TabsContent value="rules" className="mb-10">
-                <RulesTab />
-              </TabsContent>
-              <TabsContent value="settings" className="mb-10">
-                <SettingsTab />
-              </TabsContent>
-              <TabsContent value="test" className="mb-10">
-                <Process />
-              </TabsContent>
-              <TabsContent value="history" className="mb-10">
-                <History />
-              </TabsContent>
-              <Suspense>
-                <PendingTab hasPendingRule={hasPendingRule} />
-              </Suspense>
-            </Tabs>
+              }
+            >
+              <TabNavigation
+                emailAccountId={emailAccountId}
+                tab={tab}
+                hasPendingRule={hasPendingRule}
+              />
+            </Suspense>
           </div>
+
+          <Tabs defaultValue="rules">
+            <TabsContent value="rules" className="mb-10">
+              <RulesTab />
+            </TabsContent>
+            <TabsContent value="settings" className="mb-10">
+              <SettingsTab />
+            </TabsContent>
+            <TabsContent value="test" className="mb-10">
+              <Process />
+            </TabsContent>
+            <TabsContent value="history" className="mb-10">
+              <History />
+            </TabsContent>
+            <Suspense>
+              <PendingTab hasPendingRule={hasPendingRule} />
+            </Suspense>
+          </Tabs>
         </PageWrapper>
       </Suspense>
     </EmailProvider>
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
index 393502bb3e..1f6597e260 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/apps/web/components/PageWrapper.tsx
@@ -8,7 +8,12 @@ export function PageWrapper({
   className?: string;
 }) {
   return (
-    <div className={cn("mx-auto max-w-screen-xl w-full", className)}>
+    <div
+      className={cn(
+        "mx-auto max-w-screen-xl w-full px-2 md:px-4 2xl:px-0",
+        className,
+      )}
+    >
       {children}
     </div>
   );
diff --git a/apps/web/components/Typography.tsx b/apps/web/components/Typography.tsx
index e3606af3b4..740b081070 100644
--- a/apps/web/components/Typography.tsx
+++ b/apps/web/components/Typography.tsx
@@ -9,7 +9,7 @@ const PageHeading = forwardRef<
   <h1
     ref={ref}
     className={cn(
-      "font-cal text-2xl leading-7 text-primary dark:text-foreground sm:truncate sm:text-3xl",
+      "font-cal text-2xl leading-7 text-primary dark:text-foreground sm:truncate lg:text-3xl",
       className,
     )}
     {...props}

From d852ee5240bb5092db5a5daa84f64a362e56f053 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 19 Aug 2025 11:55:44 +0300
Subject: [PATCH 3/5] fix bulk unsub mobile

---
 .../bulk-unsubscribe/BulkUnsubscribeSection.tsx             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
index d5f62ce1d0..b6fde81e03 100644
--- a/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/bulk-unsubscribe/BulkUnsubscribeSection.tsx
@@ -210,8 +210,8 @@ export function BulkUnsubscribe() {
     <PageWrapper>
       <PageHeading>Bulk Unsubscriber</PageHeading>
 
-      <div className="items-center justify-between md:flex mt-4">
-        <div className="flex flex-wrap items-center justify-end gap-1 md:mt-0 lg:flex-nowrap">
+      <div className="items-center justify-between flex mt-4 flex-wrap">
+        <div className="flex items-center justify-end gap-1">
           <div className="">
             <Toggle
               name="show-unhandled"
@@ -322,7 +322,7 @@ export function BulkUnsubscribe() {
         <BulkActions selected={selected} mutate={mutate} />
       ) : null}
 
-      <Card className="mt-0 md:mt-4">
+      <Card className="mt-2 md:mt-4">
         {isStatsLoading && !isLoading && !data?.newsletters.length ? (
           <div className="p-4">
             <Skeleton className="h-screen rounded" />

From 64ba17b5906312c4571ef4b995a914f9aee73ac6 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 19 Aug 2025 12:03:56 +0300
Subject: [PATCH 4/5] clean up mobile stats

---
 .../stats/EmailActionsAnalytics.tsx           | 28 ++++++++-----------
 .../[emailAccountId]/stats/EmailAnalytics.tsx |  2 +-
 .../(app)/[emailAccountId]/stats/Stats.tsx    | 17 +++++------
 apps/web/components/PageWrapper.tsx           |  2 +-
 4 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/apps/web/app/(app)/[emailAccountId]/stats/EmailActionsAnalytics.tsx b/apps/web/app/(app)/[emailAccountId]/stats/EmailActionsAnalytics.tsx
index 7695b5d9ee..44f7d91231 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/EmailActionsAnalytics.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/EmailActionsAnalytics.tsx
@@ -20,23 +20,19 @@ export function EmailActionsAnalytics() {
       loadingComponent={<Skeleton className="h-32 w-full rounded" />}
     >
       {data && (
-        <div>
-          <div className="mt-2">
-            <CardBasic>
-              <Title>
-                How many emails you've archived and deleted with Inbox Zero
-              </Title>
+        <CardBasic>
+          <Title>
+            How many emails you've archived and deleted with Inbox Zero
+          </Title>
 
-              <BarChart
-                className="mt-4 h-72"
-                data={data.result}
-                index="date"
-                categories={["Archived", "Deleted"]}
-                colors={["lime", "pink"]}
-              />
-            </CardBasic>
-          </div>
-        </div>
+          <BarChart
+            className="mt-4 h-72"
+            data={data.result}
+            index="date"
+            categories={["Archived", "Deleted"]}
+            colors={["lime", "pink"]}
+          />
+        </CardBasic>
       )}
     </LoadingContent>
   );
diff --git a/apps/web/app/(app)/[emailAccountId]/stats/EmailAnalytics.tsx b/apps/web/app/(app)/[emailAccountId]/stats/EmailAnalytics.tsx
index 2ee7e982d2..d592fffc04 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/EmailAnalytics.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/EmailAnalytics.tsx
@@ -41,7 +41,7 @@ export function EmailAnalytics(props: {
   const { expanded, extra } = useExpanded();
 
   return (
-    <div className="grid gap-4 sm:grid-cols-3">
+    <div className="grid gap-2 sm:gap-4 sm:grid-cols-3">
       <LoadingContent
         loading={isLoading}
         error={error}
diff --git a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
index 1082f864f6..48413e07b9 100644
--- a/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/stats/Stats.tsx
@@ -65,9 +65,9 @@ export function Stats() {
   }, [onLoad]);
 
   return (
-    <PageWrapper className="pb-20">
+    <PageWrapper>
       <PageHeading>Analytics</PageHeading>
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between mt-2 sm:mt-0">
         {isLoading ? <LoadProgress /> : <div />}
         <div className="flex flex-wrap gap-1">
           <ActionBar
@@ -84,21 +84,20 @@ export function Stats() {
         </div>
       </div>
 
-      <div className="py-4">
+      <div className="grid gap-2 sm:gap-4 mt-2 sm:mt-4">
         <StatsSummary dateRange={dateRange} refreshInterval={refreshInterval} />
-      </div>
 
-      <EmailAnalytics dateRange={dateRange} refreshInterval={refreshInterval} />
+        <EmailAnalytics
+          dateRange={dateRange}
+          refreshInterval={refreshInterval}
+        />
 
-      <div className="mt-4">
         <DetailedStats
           dateRange={dateRange}
           period={period}
           refreshInterval={refreshInterval}
         />
-      </div>
 
-      <div className="mt-4">
         <CardBasic>
           <Title>
             How many emailers you've handled with Inbox Zero bulk unsubscribe
@@ -107,9 +106,7 @@ export function Stats() {
             <BulkUnsubscribeSummary />
           </div>
         </CardBasic>
-      </div>
 
-      <div className="mt-4">
         <EmailActionsAnalytics />
       </div>
 
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
index 1f6597e260..3f71551c86 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/apps/web/components/PageWrapper.tsx
@@ -10,7 +10,7 @@ export function PageWrapper({
   return (
     <div
       className={cn(
-        "mx-auto max-w-screen-xl w-full px-2 md:px-4 2xl:px-0",
+        "mx-auto max-w-screen-xl w-full px-2 md:px-4 2xl:px-0 mb-12 md:mb-4",
         className,
       )}
     >

From b97731da3f0130a80ca5369a874f84d49f05af97 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Tue, 19 Aug 2025 12:05:22 +0300
Subject: [PATCH 5/5] v2.5.26

---
 version.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/version.txt b/version.txt
index 13f43950a4..54615d7ad1 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v2.5.25
\ No newline at end of file
+v2.5.26
\ No newline at end of file