From e3df40559bef4db2776bf51c671ec71f0b7e1b25 Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Mon, 11 May 2026 10:22:10 +0530
Subject: [PATCH] fix: search bar now takes full width

---
 app/about/page.tsx         | 8 ++++----
 components/page-header.tsx | 9 +++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index 8cf09f94..93e52e9b 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -8,8 +8,8 @@ import {
   BrainCircuit,
   Blocks,
   Circle,
-  CheckCircle2,
   CircleCheck,
+  Clock
 } from "lucide-react";
 
 const PHASES = [
@@ -32,13 +32,13 @@ const PHASES = [
     status: "in-progress" as const,
     icon: Users,
     description:
-      "Adding user-centric features so devotees can engage with the archive personally — sign in, save favourite quotes, build collections, share with attribution, and mention passages in their own writing.",
+      "Adding user-centric features so devotees can engage with the archive personally — sign in, save favourite quotes, build collections, share with attribution, and tag someone to a specific text.",
     highlights: [
       "Account sign-in and personal profiles",
       "Save and organise quotes into collections",
       "Share quotes with rich attribution and highlight links",
       "Bookmark verses, letters, and lectures for later reading",
-      "Mention passages — reference any line in the archive from outside the site",
+      "Mention on text — tag someone to look into your selected text",
     ],
   },
   {
@@ -193,7 +193,7 @@ export default function AboutPage() {
                         </span>
                       ) : isInProgress ? (
                         <span className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">
-                          <CheckCircle2 className="size-3" />
+                          <Clock className="size-3" />
                           In Progress
                         </span>
                       ) : (
diff --git a/components/page-header.tsx b/components/page-header.tsx
index 55954151..5beade01 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -63,13 +63,14 @@ export function PageHeader({
         <div
           className={cn(
             "flex items-center gap-1.5",
-            // Mobile: float so the title text wraps around it
-            "max-md:float-right max-md:ml-2",
             // Desktop: inline at the right of the flex row
             "md:pt-1 md:order-1",
+            // Mobile float (for title wrapping) only applies when collapsed.
+            // When expanded the search bar fills the full header width and
+            // should NOT have a left margin or be floated.
             searchExpanded
-              ? "max-md:float-none max-md:flex max-md:w-full max-md:min-w-0"
-              : "md:shrink-0",
+              ? "max-md:w-full max-md:min-w-0"
+              : "max-md:float-right max-md:ml-2 md:shrink-0",
           )}
         >
           <HeaderSearchButton