Consistent page layout and spacing (dubinc#3594)

marcusljf · steven-tey · web-flow · commit 8eec3792c3e1 · 2026-04-11T11:59:39.000-07:00
Co-authored-by: Steven Tey &lt;stevensteel97@gmail.com&gt;
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-table.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/payouts/payout-table.tsx
@@ -230,7 +230,7 @@ export function PayoutTable() {
           payout={detailsSheetState.payout}
         />
       )}
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-4">
         <PartnerPayoutFilters />
         {payouts?.length !== 0 ? (
           <Table {...table} />
@@ -256,7 +256,7 @@ function PartnerPayoutFilters() {
     usePayoutFilters();
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col">
       <Filter.Select
         className="w-full md:w-fit"
         filters={filters}
@@ -266,13 +266,15 @@ function PartnerPayoutFilters() {
       />
       <AnimatedSizeContainer height>
         {activeFilters.length > 0 && (
-          <Filter.List
-            filters={filters}
-            activeFilters={activeFilters}
-            onSelect={onSelect}
-            onRemove={onRemove}
-            onRemoveAll={onRemoveAll}
-          />
+          <div className="pt-3">
+            <Filter.List
+              filters={filters}
+              activeFilters={activeFilters}
+              onSelect={onSelect}
+              onRemove={onRemove}
+              onRemoveAll={onRemoveAll}
+            />
+          </div>
         )}
       </AnimatedSizeContainer>
     </div>
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/bounties/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/bounties/page-client.tsx
@@ -42,7 +42,7 @@ export function BountiesPageClient() {
 
   return (
     <PageWidthWrapper className="pb-10">
-      <div className="mb-6 grid grid-cols-2 gap-2">
+      <div className="mb-4 grid grid-cols-2 gap-2">
         {tabs.map((tab) => {
           const isActive = activeTab === tab.id;
 
@@ -74,7 +74,7 @@ export function BountiesPageClient() {
       </div>
 
       {filteredBounties?.length !== 0 || isLoading ? (
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
           {filteredBounties?.length
             ? filteredBounties?.map((bounty) => (
                 <PartnerBountyCard
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/customers/(index)/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/customers/(index)/page-client.tsx
@@ -269,7 +269,7 @@ export function ProgramCustomersPageClient() {
   });
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-4">
       <div>
         <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <Filter.Select
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx
@@ -116,7 +116,7 @@ export function EarningsCompositeChart() {
   );
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       <EarningsTableControls />
       <div className="rounded-lg border border-neutral-200 p-6">
         <div className="flex w-full items-center justify-between">
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/page.tsx
@@ -6,7 +6,7 @@ import { EarningsTablePartner } from "./earnings-table";
 export default function ProgramEarning() {
   return (
     <PageContent title="Earnings">
-      <PageWidthWrapper className="flex flex-col gap-6 pb-10">
+      <PageWidthWrapper className="flex flex-col gap-5 pb-10">
         <EarningsCompositeChart />
         <EarningsTablePartner />
       </PageWidthWrapper>
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/page-client.tsx
@@ -86,7 +86,7 @@ export function ProgramLinksPageClient() {
     !showDetailedAnalytics || displayOption === "cards";
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-4">
       <PartnerLinkModal />
       <div className="flex items-center justify-between">
         <SimpleDateRangePicker
@@ -100,7 +100,9 @@ export function ProgramLinksPageClient() {
         <div className="flex items-center gap-3">
           {!!showDetailedAnalytics && (
             <ToggleGroup
-              className="rounded-lg"
+              className="h-10 rounded-lg px-1"
+              optionClassName="px-2 rounded-md"
+              indicatorClassName="border-0 ring-1 ring-inset ring-neutral-200"
               options={[
                 {
                   value: "full",
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/page-client.tsx
@@ -123,7 +123,7 @@ export default function ProgramPageClient() {
             >
               <div
                 className={cn(
-                  "relative z-0 mb-4 flex flex-col overflow-hidden rounded-xl border border-neutral-200 p-4 sm:mb-8 md:p-6",
+                  "relative z-0 mb-4 flex flex-col overflow-hidden rounded-xl border border-neutral-200 p-4 sm:mb-5 md:p-6",
                   isDeactivated && "opacity-80",
                 )}
               >
@@ -247,7 +247,7 @@ export default function ProgramPageClient() {
         }}
       >
         <ChartTooltipSync>
-          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
             <div className="group rounded-xl border border-neutral-200 p-5 pb-3 pt-4 lg:col-span-2">
               <EarningsChart />
             </div>
@@ -270,7 +270,7 @@ export default function ProgramPageClient() {
             </NumberFlowGroup>
           </div>
         </ChartTooltipSync>
-        <div className="mt-6">
+        <div className="mt-5">
           <div className="flex items-center justify-between">
             <h2 className="text-base font-semibold text-neutral-900">
               Recent earnings
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page-client.tsx
@@ -48,7 +48,7 @@ export function ProgramMarketplacePageClient() {
   } = useProgramNetworkFilters();
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       <FeaturedPrograms />
       <div>
         <div className="xs:flex-row xs:items-center flex flex-col justify-between gap-4">
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/page-client.tsx
@@ -107,7 +107,7 @@ export function ProgramAnalyticsPageClient() {
   );
 
   return (
-    <div className="flex flex-col gap-3 pb-12">
+    <div className="flex flex-col gap-4 pb-12">
       <div>
         <div className="flex w-full flex-col items-center justify-between gap-2 md:flex-row">
           <div className="flex w-full flex-col items-center gap-2 min-[550px]:flex-row">
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/commissions/page.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/commissions/page.tsx
@@ -25,7 +25,7 @@ export default function ProgramCommissions() {
     >
       <PageWidthWrapper>
         <CommissionsStats />
-        <div className="mt-6">
+        <div className="mt-4">
           <CommissionsTable />
         </div>
       </PageWidthWrapper>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/fraud/fraud-group-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/fraud/fraud-group-table.tsx
@@ -312,7 +312,7 @@ export function FraudGroupTable() {
   }, [fraudGroups, detailsSheetState.groupId]);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-4">
       <BulkBanPartnersModal />
       <BulkResolveFraudGroupsModal />
       {detailsSheetState.groupId && currentFraudGroup && (
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/groups-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/groups-table.tsx
@@ -214,7 +214,7 @@ export function GroupsTable() {
   });
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <SearchBoxPersisted
           placeholder="Search by name"
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx
@@ -120,7 +120,7 @@ export function ProgramPartnerNetworkPageClient({
   }, [partners, detailsSheetState.partnerId]);
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col">
       {detailsSheetState.partnerId && currentPartner && (
         <NetworkPartnerSheet
           isOpen={detailsSheetState.open}
@@ -148,8 +148,9 @@ export function ProgramPartnerNetworkPageClient({
           }
         />
       )}
+
       {variant !== "ignored" && (
-        <div className="grid grid-cols-3 gap-2">
+        <div className="mt-px grid grid-cols-3 gap-2">
           {tabs.map((tab) => {
             const isActive = status === tab.id;
 
@@ -187,7 +188,7 @@ export function ProgramPartnerNetworkPageClient({
       )}
 
       {status === "discover" && (
-        <div>
+        <div className="mt-[17px]">
           <div className="xs:flex-row xs:items-center flex flex-col gap-4">
             <Filter.Select
               className="h-9 w-full rounded-lg md:w-fit"
@@ -212,19 +213,17 @@ export function ProgramPartnerNetworkPageClient({
             </label>
           </div>
           <AnimatedSizeContainer height>
-            <div>
-              {activeFilters.length > 0 && (
-                <div className="pt-3">
-                  <Filter.List
-                    filters={filters}
-                    activeFilters={activeFilters}
-                    onSelect={onSelect}
-                    onRemove={onRemove}
-                    onRemoveAll={onRemoveAll}
-                  />
-                </div>
-              )}
-            </div>
+            {activeFilters.length > 0 && (
+              <div className="pt-4">
+                <Filter.List
+                  filters={filters}
+                  activeFilters={activeFilters}
+                  onSelect={onSelect}
+                  onRemove={onRemove}
+                  onRemoveAll={onRemoveAll}
+                />
+              </div>
+            )}
           </AnimatedSizeContainer>
         </div>
       )}
@@ -234,7 +233,7 @@ export function ProgramPartnerNetworkPageClient({
           Failed to load partners
         </div>
       ) : !partners || partners?.length ? (
-        <div>
+        <div className="mt-4">
           <div
             className={cn(
               "@5xl/page:grid-cols-4 @3xl/page:grid-cols-3 @xl/page:grid-cols-2 grid grid-cols-1 gap-4 transition-opacity lg:gap-6",
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/page-client.tsx
@@ -70,7 +70,7 @@ export default function ProgramOverviewPageClient() {
   );
 
   return (
-    <div className="@container flex flex-col gap-6">
+    <div className="@container flex flex-col gap-4">
       <SimpleDateRangePicker align="start" className="w-fit" />
       <AnalyticsContext.Provider
         value={{
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/applications/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/applications/page-client.tsx
@@ -425,7 +425,7 @@ export function ProgramPartnersApplicationsPageClient() {
   }, [partners, detailsSheetState.partnerId]);
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       {detailsSheetState.partnerId && currentPartner && (
         <PartnerApplicationSheet
           isOpen={detailsSheetState.open}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx
@@ -560,7 +560,7 @@ export function PartnersTable() {
   });
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       <ChangeGroupModal />
       <BulkArchivePartnersModal />
       <BulkDeactivatePartnersModal />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/page-client.tsx
@@ -7,7 +7,7 @@ export function ProgramPayoutsPageClient() {
   return (
     <>
       <PayoutStats />
-      <div className="my-6">
+      <div className="my-4">
         <PayoutTable />
       </div>
     </>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/payout-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/payout-table.tsx
@@ -343,7 +343,7 @@ export function PayoutTable() {
   });
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-4">
       <PayoutFilters />
       {payouts?.length !== 0 ? (
         <Table {...tableProps} table={table} />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/folders/page-client.tsx
@@ -41,7 +41,7 @@ export const FoldersPageClient = () => {
 
   return (
     <div className="grid grid-cols-1 gap-4">
-      <div className="grid gap-5">
+      <div className="grid gap-4">
         <div className="flex w-full flex-wrap items-center justify-between gap-3 sm:w-auto">
           <div className="w-full md:w-56 lg:w-64">
             <SearchBoxPersisted
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/page-client.tsx
@@ -149,7 +149,7 @@ function WorkspaceLinks() {
       <LinkBuilder />
       <AddEditTagModal />
       <div className="flex w-full items-center">
-        <PageWidthWrapper className="flex flex-col gap-y-3">
+        <PageWidthWrapper className="flex flex-col">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="flex w-full grow gap-2 md:w-auto">
               {!workspace.isMegaWorkspace && (
@@ -243,18 +243,22 @@ function WorkspaceLinks() {
               )}
             </div>
           </div>
-          <Filter.List
-            filters={filters}
-            activeFilters={activeFilters}
-            onSelect={onSelect}
-            onRemove={onRemove}
-            onRemoveFilter={onRemoveFilter}
-            onRemoveAll={onRemoveAll}
-          />
+          {activeFilters.length > 0 && (
+            <div className="mt-3">
+              <Filter.List
+                filters={filters}
+                activeFilters={activeFilters}
+                onSelect={onSelect}
+                onRemove={onRemove}
+                onRemoveFilter={onRemoveFilter}
+                onRemoveAll={onRemoveAll}
+              />
+            </div>
+          )}
         </PageWidthWrapper>
       </div>
 
-      <div className="mt-3">
+      <div className="mt-4">
         <LinksContainer
           CreateLinkButton={canCreateLinks ? CreateLinkButton : () => <></>}
         />
@@ -389,7 +393,7 @@ const MoreLinkOptions = () => {
         <Button
           onClick={() => setOpenPopover(!openPopover)}
           variant="secondary"
-          className="w-auto px-1.5"
+          className="w-auto px-2"
           icon={<ThreeDots className="h-5 w-5 text-neutral-500" />}
         />
       </Popover>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/links/utm/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/links/utm/page-client.tsx
@@ -57,7 +57,6 @@ export default function WorkspaceUtmTemplatesClient() {
         </TemplatesListContext.Provider>
       ) : (
         <AnimatedEmptyState
-          className="mt-6"
           title="No UTM Templates Found"
           description="Create shared templates to streamline UTM campaign management across your team"
           cardContent={
diff --git a/apps/web/ui/analytics/events/index.tsx b/apps/web/ui/analytics/events/index.tsx
@@ -27,7 +27,7 @@ export default function AnalyticsEvents({
           {({ dashboardProps }) => (
             <div
               className={cn(
-                "mx-auto flex max-w-screen-xl flex-col gap-3 px-3 lg:px-10",
+                "mx-auto flex max-w-screen-xl flex-col gap-4 px-3 lg:px-10",
                 // TODO: [PageContent] Remove once all pages are migrated to the new PageContent
                 !dashboardProps && !adminPage && "lg:px-6",
               )}
diff --git a/apps/web/ui/analytics/toggle.tsx b/apps/web/ui/analytics/toggle.tsx
diff --git a/apps/web/ui/layout/page-content/index.tsx b/apps/web/ui/layout/page-content/index.tsx
diff --git a/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx b/apps/web/ui/layout/page-content/page-content-with-side-panel.tsx
diff --git a/apps/web/ui/links/links-container.tsx b/apps/web/ui/links/links-container.tsx
diff --git a/apps/web/ui/partners/program-marketplace/program-marketplace-banner.tsx b/apps/web/ui/partners/program-marketplace/program-marketplace-banner.tsx
diff --git a/apps/web/ui/shared/search-box.tsx b/apps/web/ui/shared/search-box.tsx
diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
diff --git a/packages/ui/src/date-picker/trigger.tsx b/packages/ui/src/date-picker/trigger.tsx
diff --git a/packages/ui/src/filter/filter-list.tsx b/packages/ui/src/filter/filter-list.tsx
diff --git a/packages/ui/src/filter/filter-select.tsx b/packages/ui/src/filter/filter-select.tsx

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export default function ProgramCommissions() {`
`25`	`25`	`>`
`26`	`26`	`<PageWidthWrapper>`
`27`	`27`	`<CommissionsStats />`
`28`		`- <div className="mt-6">`
	`28`	`+ <div className="mt-4">`
`29`	`29`	`<CommissionsTable />`
`30`	`30`	`</div>`
`31`	`31`	`</PageWidthWrapper>`