header

components/page-header.tsx

@@ -48,10 +48,46 @@ export function PageHeader({
         className,
       )}
     >
-      <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
+      {/*
+        Layout strategy:
+          - Mobile: actions float to the right so the title text wraps around
+            them on the first line and uses the FULL container width on every
+            subsequent line (which is what `pr-*` cannot achieve since padding
+            applies to all lines).
+          - Desktop (md+): standard flex row so title and actions sit side-by-side.
+      */}
+      <div className="max-w-5xl mx-auto md:flex md:items-start md:justify-between md:gap-4">
+        {/* Actions — float on mobile (rendered first so float works correctly),
+            inline flex on desktop. Order doesn't matter visually on desktop
+            because the parent's `justify-between` places them at the end. */}
+        <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",
+            searchExpanded
+              ? "max-md:float-none max-md:flex max-md:w-full max-md:min-w-0"
+              : "md:shrink-0",
+          )}
+        >
+          <HeaderSearchButton
+            expanded={searchExpanded}
+            onExpandedChange={setSearchExpanded}
+          />
+          {/* Hide reading settings on mobile when search is active */}
+          <div className={cn(searchExpanded && "max-md:hidden")}>
+            <ReadingSettings />
+          </div>
+        </div>
+
         {/* Title / logo area — hidden on mobile when search is active */}
         <div
-          className={cn("flex-1 min-w-0", searchExpanded && "max-md:hidden")}
+          className={cn(
+            "md:flex-1 md:min-w-0",
+            searchExpanded && "max-md:hidden",
+          )}
         >
           {fromSearch ? (
             <>
@@ -72,23 +108,6 @@ export function PageHeader({
             children
           )}
         </div>
-
-        {/* Actions — expands to fill width on mobile when search is active */}
-        <div
-          className={cn(
-            "pt-1 flex items-center gap-1.5",
-            searchExpanded ? "max-md:flex-1 max-md:min-w-0" : "shrink-0",
-          )}
-        >
-          <HeaderSearchButton
-            expanded={searchExpanded}
-            onExpandedChange={setSearchExpanded}
-          />
-          {/* Hide reading settings on mobile when search is active */}
-          <div className={cn(searchExpanded && "max-md:hidden")}>
-            <ReadingSettings />
-          </div>
-        </div>
       </div>
     </header>
   );