From c3851c918bcd536ad6edefbe0901ef265ae2e7ca Mon Sep 17 00:00:00 2001
From: Lemon <lemonknowsall@gmail.com>
Date: Wed, 18 Mar 2026 23:28:53 -0700
Subject: [PATCH] Add decorative semi-ellipse arc below Search page
 Posts/Accounts tabs

Same curved arc treatment: removes border-b and backdrop-blur,
wraps tabs in a relative container with the SVG arc below.
---
 src/pages/SearchPage.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 2dd44e7a..a5fb7b06 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -408,11 +408,14 @@ export function SearchPage() {
   return (
     <main className="">
       {/* Tabs — sticky at top */}
-      <div className={cn(STICKY_HEADER_CLASS, 'bg-background/80 backdrop-blur-md z-10 border-b border-border')}>
-        <div className="flex">
+      <div className={cn(STICKY_HEADER_CLASS, 'relative z-10')}>
+        <div className="flex bg-background/80 overflow-x-auto scrollbar-none">
           <TabButton label="Posts" active={activeTab === 'posts'} onClick={() => setActiveTab('posts')} className="sidebar:py-5" />
           <TabButton label="Accounts" active={activeTab === 'accounts'} onClick={() => setActiveTab('accounts')} className="sidebar:py-5" />
         </div>
+        <svg className="absolute left-0 right-0 top-full w-full pointer-events-none" viewBox="0 0 100 12" preserveAspectRatio="none" style={{ height: 20 }}>
+          <path d="M0,0 Q50,12 100,0 Z" className="fill-background/80" />
+        </svg>
       </div>
 
       {/* ─── Posts Tab ─── */}