From 6eaef58db3c840078640e93135d91f826bfc6977 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Sat, 16 May 2026 00:51:35 -0500
Subject: [PATCH] Remove leftover arc overhang spacer below tab bars

SubHeaderBar switched to ArcBackground variant="rect" (commit 207794e7)
when navigation was restyled with V-angled bars, but 15 pages still
rendered a 20px ARC_OVERHANG_PX spacer div directly below the tab bar
to leave room for the now-removed downward arc. That spacer is the
empty band the user reported underneath the tabs.

Drop the spacer divs and their now-unused ARC_OVERHANG_PX imports across
Feed, Search, Notifications, Profile, Videos, Photos, Relay, Letters,
Music, ExternalContent, ArticleEditor, PeopleListDetail, BadgeDetail,
Communities, and Badges. FollowPage keeps the import because it still
renders an actual <ArcBackground variant="down" /> at the top of its
profile feed scrollbox.
---
 src/components/BadgeDetailContent.tsx      | 2 --
 src/components/Feed.tsx                    | 2 --
 src/components/PeopleListDetailContent.tsx | 4 ----
 src/components/articles/ArticleEditor.tsx  | 3 ---
 src/pages/BadgesPage.tsx                   | 3 ---
 src/pages/CommunitiesPage.tsx              | 3 ---
 src/pages/ExternalContentPage.tsx          | 2 --
 src/pages/LettersPage.tsx                  | 2 --
 src/pages/MusicPage.tsx                    | 2 --
 src/pages/NotificationsPage.tsx            | 2 --
 src/pages/PhotosFeedPage.tsx               | 2 --
 src/pages/ProfilePage.tsx                  | 3 ---
 src/pages/RelayPage.tsx                    | 3 ---
 src/pages/SearchPage.tsx                   | 2 --
 src/pages/VideosFeedPage.tsx               | 2 --
 15 files changed, 37 deletions(-)

diff --git a/src/components/BadgeDetailContent.tsx b/src/components/BadgeDetailContent.tsx
index 210ac77d..fe639c9d 100644
--- a/src/components/BadgeDetailContent.tsx
+++ b/src/components/BadgeDetailContent.tsx
@@ -13,7 +13,6 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { ComposeBox } from '@/components/ComposeBox';
 import { NoteCard } from '@/components/NoteCard';
 import { FlatThreadedReplyList } from '@/components/ThreadedReplyList';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
 import { useAuthor } from '@/hooks/useAuthor';
@@ -232,7 +231,6 @@ export function BadgeDetailContent({ event }: { event: NostrEvent }) {
       </SubHeaderBar>
 
       {/* Tab content */}
-      <div style={{ height: ARC_OVERHANG_PX }} />
       {activeTab === 'awarded' ? (
         <AwardedToTab
           awardedPubkeys={awardedPubkeys}
diff --git a/src/components/Feed.tsx b/src/components/Feed.tsx
index d2bc77eb..b34f5ab7 100644
--- a/src/components/Feed.tsx
+++ b/src/components/Feed.tsx
@@ -23,7 +23,6 @@ import { useWorldFeed } from '@/hooks/useWorldFeed';
 import { shouldHideFeedEvent } from '@/lib/feedUtils';
 import { isEventMuted } from '@/lib/muteHelpers';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { TabButton } from '@/components/TabButton';
 import { Button } from '@/components/ui/button';
 import { useNavHidden } from '@/contexts/LayoutContext';
@@ -281,7 +280,6 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage, fee
       )}
 
       {/* Feed content — saved feed tab gets its own stream */}
-      {user && <div style={{ height: ARC_OVERHANG_PX }} />}
       {activeSavedFeed ? (
         <SavedFeedContent feed={activeSavedFeed} />
       ) : (
diff --git a/src/components/PeopleListDetailContent.tsx b/src/components/PeopleListDetailContent.tsx
index bd47e936..acb2d980 100644
--- a/src/components/PeopleListDetailContent.tsx
+++ b/src/components/PeopleListDetailContent.tsx
@@ -37,7 +37,6 @@ import { VerifiedNip05Text } from '@/components/Nip05Badge';
 import { AddMembersDialog } from '@/components/AddMembersDialog';
 import { ComposeBox } from '@/components/ComposeBox';
 import { FlatThreadedReplyList } from '@/components/ThreadedReplyList';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { PostActionBar } from '@/components/PostActionBar';
 import { NoteMoreMenu } from '@/components/NoteMoreMenu';
 import { FollowAllSplitButton } from '@/components/FollowAllSplitButton';
@@ -513,9 +512,6 @@ export function PeopleListDetailContent({ event }: { event: NostrEvent }) {
         />
       </SubHeaderBar>
 
-      {/* Spacer below the pinned tabs (matches ProfilePage / BadgeDetailContent). */}
-      <div style={{ height: ARC_OVERHANG_PX }} />
-
       {/* Owner "Add members" row — above members tab content */}
       {ownerCanRemove && activeTab === 'members' && (
         <div className="px-4 py-3 border-b border-border">
diff --git a/src/components/articles/ArticleEditor.tsx b/src/components/articles/ArticleEditor.tsx
index 0e7d7c3b..336f52af 100644
--- a/src/components/articles/ArticleEditor.tsx
+++ b/src/components/articles/ArticleEditor.tsx
@@ -36,7 +36,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { TabButton } from '@/components/TabButton';
 import { FabButton } from '@/components/FabButton';
 import { toast } from '@/hooks/useToast';
@@ -559,8 +558,6 @@ export function ArticleEditor({ initialData, editMode = false }: ArticleEditorPr
           />
         </SubHeaderBar>
       </div>
-      {/* Spacer for the arc overhang */}
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       <input
         ref={fileInputRef}
diff --git a/src/pages/BadgesPage.tsx b/src/pages/BadgesPage.tsx
index 8d7d6ba2..8f3d3392 100644
--- a/src/pages/BadgesPage.tsx
+++ b/src/pages/BadgesPage.tsx
@@ -180,9 +180,6 @@ export function BadgesPage() {
         </SubHeaderBar>
       )}
 
-      {/* Arc overhang spacer (matches Feed.tsx) */}
-      {user && <div style={{ height: 20 }} />}
-
       {/* Tab content */}
       {activeTab === "mine" ? (
         <MyBadgesTab
diff --git a/src/pages/CommunitiesPage.tsx b/src/pages/CommunitiesPage.tsx
index 48a10a8d..9792c35e 100644
--- a/src/pages/CommunitiesPage.tsx
+++ b/src/pages/CommunitiesPage.tsx
@@ -122,9 +122,6 @@ export function CommunitiesPage() {
         </SubHeaderBar>
       )}
 
-      {/* Arc overhang spacer */}
-      {user && <div style={{ height: 20 }} />}
-
       {/* Tab content */}
       {activeTab === 'mine' ? (
         <MyCommunitiesTab />
diff --git a/src/pages/ExternalContentPage.tsx b/src/pages/ExternalContentPage.tsx
index 328a433e..931591f4 100644
--- a/src/pages/ExternalContentPage.tsx
+++ b/src/pages/ExternalContentPage.tsx
@@ -17,7 +17,6 @@ import { BookReviewFormDialog } from '@/components/BookReviewForm';
 import { ProfileHoverCard } from '@/components/ProfileHoverCard';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import {
   UrlContentHeader,
   BookContentHeader,
@@ -598,7 +597,6 @@ function BookContentTabs({ isbn, commentRoot, orderedReplies, commentsLoading }:
           onClick={() => setActiveTab('reviews')}
         />
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {activeTab === 'comments' ? (
         <ExternalCommentsSection
diff --git a/src/pages/LettersPage.tsx b/src/pages/LettersPage.tsx
index 0f21521c..820b7d7e 100644
--- a/src/pages/LettersPage.tsx
+++ b/src/pages/LettersPage.tsx
@@ -17,7 +17,6 @@ import { LoginArea } from '@/components/auth/LoginArea';
 import { PageHeader } from '@/components/PageHeader';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { EnvelopeCard } from '@/components/letter/EnvelopeCard';
 import { LetterDetailSheet } from '@/components/letter/LetterDetailSheet';
 import type { Letter } from '@/lib/letterTypes';
@@ -111,7 +110,6 @@ export function LettersPage() {
         <TabButton label="Inbox" active={tab === 'inbox'} onClick={() => setTab('inbox')} />
         <TabButton label="Sent" active={tab === 'sent'} onClick={() => setTab('sent')} />
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {/* Envelope grid */}
       <div className="px-4 py-3">
diff --git a/src/pages/MusicPage.tsx b/src/pages/MusicPage.tsx
index e9d75fdd..b3923640 100644
--- a/src/pages/MusicPage.tsx
+++ b/src/pages/MusicPage.tsx
@@ -5,7 +5,6 @@ import { KindInfoButton } from '@/components/KindInfoButton';
 import { PageHeader } from '@/components/PageHeader';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { useLayoutOptions } from '@/contexts/LayoutContext';
 import { useAppContext } from '@/hooks/useAppContext';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -61,7 +60,6 @@ export function MusicPage() {
         <TabButton label="Playlists" active={activeTab === 'playlists'} onClick={() => setActiveTab('playlists')} />
         <TabButton label="Artists" active={activeTab === 'artists'} onClick={() => setActiveTab('artists')} />
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {/* Tab content */}
       {activeTab === 'discover' && (
diff --git a/src/pages/NotificationsPage.tsx b/src/pages/NotificationsPage.tsx
index 3ab28d8f..aeb09d75 100644
--- a/src/pages/NotificationsPage.tsx
+++ b/src/pages/NotificationsPage.tsx
@@ -43,7 +43,6 @@ import { BadgeContent } from '@/components/BadgeContent';
 import type { BadgeData } from '@/lib/parseBadgeDefinition';
 import { PageHeader } from '@/components/PageHeader';
 import { useLayoutOptions } from '@/contexts/LayoutContext';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 
 type NotificationTab = 'all' | 'mentions';
 
@@ -233,7 +232,6 @@ export function NotificationsPage() {
           />
         ))}
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {/* Content */}
       <PullToRefresh onRefresh={handleRefresh}>
diff --git a/src/pages/PhotosFeedPage.tsx b/src/pages/PhotosFeedPage.tsx
index a4e46853..2de8b972 100644
--- a/src/pages/PhotosFeedPage.tsx
+++ b/src/pages/PhotosFeedPage.tsx
@@ -17,7 +17,6 @@ import {
   MediaCollage,
   MediaCollageSkeleton,
 } from "@/components/MediaCollage";
-import { ARC_OVERHANG_PX } from "@/components/ArcBackground";
 import { PageHeader } from "@/components/PageHeader";
 import { PullToRefresh } from "@/components/PullToRefresh";
 import { SubHeaderBar } from "@/components/SubHeaderBar";
@@ -138,7 +137,6 @@ export function PhotosFeedPage() {
             onClick={() => setActiveTab("global")}
           />
         </SubHeaderBar>
-        <div style={{ height: ARC_OVERHANG_PX }} />
 
         {/* Grid */}
         <PullToRefresh onRefresh={handleRefresh}>
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 79b70416..08cd468f 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -85,7 +85,6 @@ import { formatNumber } from '@/lib/formatNumber';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { useActiveTabIndicator } from '@/components/SubHeaderBarContext';
 import { TabButton } from '@/components/TabButton';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import type { AddrCoords } from '@/hooks/useEvent';
 import { sanitizeUrl } from '@/lib/sanitizeUrl';
 import { impactMedium } from '@/lib/haptics';
@@ -2003,8 +2002,6 @@ type EditableTab = { label: string; isCore: boolean; tab?: ProfileTab };
           )}
         </SubHeaderBar>
 
-        <div style={{ height: ARC_OVERHANG_PX }} />
-
         {/* Add/edit single tab modal */}
         {pubkey && (
           <ProfileTabEditModal
diff --git a/src/pages/RelayPage.tsx b/src/pages/RelayPage.tsx
index 67dcf064..2af27f39 100644
--- a/src/pages/RelayPage.tsx
+++ b/src/pages/RelayPage.tsx
@@ -4,7 +4,6 @@ import { Globe, Info, Mail, Shield, Zap, Server, Hash } from 'lucide-react';
 import { useParams } from 'react-router-dom';
 import { useNostr } from '@nostrify/react';
 import { useQuery } from '@tanstack/react-query';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { NoteCard } from '@/components/NoteCard';
 import { PageHeader } from '@/components/PageHeader';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
@@ -110,8 +109,6 @@ export function RelayPage() {
       <RelayInfoPanel info={info} infoLoading={infoLoading} infoError={infoError} open={infoOpen} />
       <SubHeaderBar>{null}</SubHeaderBar>
 
-      <div style={{ height: ARC_OVERHANG_PX }} />
-
       {/* Feed section */}
       <div>
         {eventsLoading ? (
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 9dfd0339..55c0e07a 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -48,7 +48,6 @@ import { genUserName } from '@/lib/genUserName';
 import { VerifiedNip05Text } from '@/components/Nip05Badge';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
-import { ARC_OVERHANG_PX } from '@/components/ArcBackground';
 import { cn, parseKindFilter } from '@/lib/utils';
 import type { TabFilter } from '@/contexts/AppContext';
 import { useLayoutOptions, useNavHidden } from '@/contexts/LayoutContext';
@@ -425,7 +424,6 @@ export function SearchPage() {
         <TabButton label="Posts" active={activeTab === 'posts'} onClick={() => setActiveTab('posts')} />
         <TabButton label="Accounts" active={activeTab === 'accounts'} onClick={() => setActiveTab('accounts')} />
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {/* Search input bar — always rendered right after tabs, like ComposeBox on Feed */}
       <div className="px-4 py-3">
diff --git a/src/pages/VideosFeedPage.tsx b/src/pages/VideosFeedPage.tsx
index b55b1eff..4e19f5fc 100644
--- a/src/pages/VideosFeedPage.tsx
+++ b/src/pages/VideosFeedPage.tsx
@@ -22,7 +22,6 @@ import { nip19 } from "nostr-tools";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Blurhash } from "react-blurhash";
 import { Link } from "react-router-dom";
-import { ARC_OVERHANG_PX } from "@/components/ArcBackground";
 import { FeedEmptyState } from "@/components/FeedEmptyState";
 import { KindInfoButton } from "@/components/KindInfoButton";
 import { PageHeader } from "@/components/PageHeader";
@@ -950,7 +949,6 @@ export function VideosFeedPage() {
           onClick={() => setFeedTab("global")}
         />
       </SubHeaderBar>
-      <div style={{ height: ARC_OVERHANG_PX }} />
 
       {/* Live streams strip — follows tab filters by followed authors */}
       <LiveStreamsStrip tab={feedTab} />