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.
This commit is contained in:
Chad Curtis
2026-05-16 00:51:35 -05:00
parent 4838ec3556
commit 6eaef58db3
15 changed files with 0 additions and 37 deletions
-2
View File
@@ -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}
-2
View File
@@ -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} />
) : (
@@ -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">
@@ -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}
-3
View File
@@ -180,9 +180,6 @@ export function BadgesPage() {
</SubHeaderBar>
)}
{/* Arc overhang spacer (matches Feed.tsx) */}
{user && <div style={{ height: 20 }} />}
{/* Tab content */}
{activeTab === "mine" ? (
<MyBadgesTab
-3
View File
@@ -122,9 +122,6 @@ export function CommunitiesPage() {
</SubHeaderBar>
)}
{/* Arc overhang spacer */}
{user && <div style={{ height: 20 }} />}
{/* Tab content */}
{activeTab === 'mine' ? (
<MyCommunitiesTab />
-2
View File
@@ -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
-2
View File
@@ -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">
-2
View File
@@ -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' && (
-2
View File
@@ -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}>
-2
View File
@@ -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}>
-3
View File
@@ -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
-3
View File
@@ -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 ? (
-2
View File
@@ -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">
-2
View File
@@ -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} />