fix(mobile): resolve overflow, top-bar, filters and focus on small screens

NiallJoeMaher · claude · NiallJoeMaher · commit ba31d9411ab1 · 2026-06-14T09:03:07.000+01:00
The relaunch redesign had several mobile regressions:

- cards overflowed the viewport (byline meta line couldn't shrink) — now
  truncates; card padding p-4 on mobile
- app-main side gutters reduced to 0.75rem and per-page content wrappers
  drop px-4 py-8 → px-0 py-4 on mobile (parent already gutters), so text
  gets full reading width without double padding
- top bar collapses to burger + logo + search icon ≤720px; Log in / Join
  free move into the nav drawer; real search SVG replaces the tiny glyph
- feed filters drop to their own row below the tabs instead of cramming
  under them, and no longer sit in an overflow container that clipped the
  FilterPill dropdowns (they now open on mobile)
- command palette: Esc hint becomes an X close button on mobile
- search field active state is a subtle accent underline, not the global
  (blue-resolving) focus ring

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
@@ -0,0 +1 @@
+{"sessionId":"2e846f21-abe2-48e8-9271-db7412d07e21","pid":64036,"procStart":"Sat Jun  6 19:50:40 2026","acquiredAt":1781422714573}
diff --git a/app/(app)/[username]/[slug]/_userLinkDetail.tsx b/app/(app)/[username]/[slug]/_userLinkDetail.tsx
@@ -119,7 +119,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
 
   if (status === "pending") {
     return (
-      <div className="mx-auto max-w-prose px-4 py-8">
+      <div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
         <div className="animate-pulse">
           <div className="mb-4 h-6 w-24 rounded bg-elevated" />
           <div className="mb-4 h-4 w-48 rounded bg-elevated" />
@@ -134,7 +134,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
 
   if (status === "error" || !linkContent) {
     return (
-      <div className="mx-auto max-w-prose px-4 py-8">
+      <div className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
         <Link
           href="/"
           className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
@@ -173,7 +173,7 @@ const UserLinkDetail = ({ username, contentSlug, initialContent }: Props) => {
   const isOwner = session?.user?.id === linkContent.author?.id;
 
   return (
-    <article className="mx-auto max-w-prose px-4 py-8">
+    <article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
       <Link
         href="/"
         className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
diff --git a/app/(app)/admin/_client.tsx b/app/(app)/admin/_client.tsx
@@ -77,7 +77,7 @@ const AdminDashboard = () => {
   const { data: reportCounts } = api.report.getCounts.useQuery();
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
+    <div className="mx-auto max-w-6xl px-0 py-4 sm:px-4 sm:py-8">
       <div className="mb-8">
         <p className="eyebrow">
           <span className="slash">{"// "}</span>admin
diff --git a/app/(app)/admin/moderation/_client.tsx b/app/(app)/admin/moderation/_client.tsx
@@ -182,7 +182,7 @@ const ModerationQueue = () => {
     highlightedItem === id ? "ring-2 ring-accent rounded-lg" : "";
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
+    <div className="mx-auto max-w-6xl px-0 py-4 sm:px-4 sm:py-8">
       <div className="mb-6 flex items-center gap-4">
         <Link
           href="/admin"
diff --git a/app/(app)/admin/sources/_client.tsx b/app/(app)/admin/sources/_client.tsx
@@ -327,7 +327,7 @@ const AdminSourcesPage = () => {
   };
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
+    <div className="mx-auto max-w-6xl px-0 py-4 sm:px-4 sm:py-8">
       <div className="mb-8 flex items-center justify-between">
         <div>
           <p className="eyebrow">
diff --git a/app/(app)/admin/tags/_client.tsx b/app/(app)/admin/tags/_client.tsx
@@ -208,7 +208,7 @@ const TagsAdmin = () => {
   };
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
+    <div className="mx-auto max-w-6xl px-0 py-4 sm:px-4 sm:py-8">
       <div className="mb-8 flex items-center justify-between">
         <div>
           <p className="eyebrow">
diff --git a/app/(app)/admin/users/_client.tsx b/app/(app)/admin/users/_client.tsx
@@ -81,7 +81,7 @@ const UserManagement = () => {
     : usersData?.users;
 
   return (
-    <div className="mx-auto max-w-6xl px-4 py-8">
+    <div className="mx-auto max-w-6xl px-0 py-4 sm:px-4 sm:py-8">
       <div className="mb-6 flex items-center gap-4">
         <Link
           href="/admin"
diff --git a/app/(app)/company/[slug]/page.tsx b/app/(app)/company/[slug]/page.tsx
@@ -19,7 +19,7 @@ export default async function Page(props: Props) {
   if (!company) return notFound();
 
   return (
-    <div className="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+    <div className="mx-auto w-full max-w-4xl px-0 py-4 sm:px-6 sm:py-8 lg:px-8">
       <div className="overflow-hidden rounded-lg bg-white shadow dark:bg-neutral-800">
         <div className="border-b border-neutral-200 p-6 dark:border-neutral-700">
           <div className="flex flex-col items-center gap-6 sm:flex-row">
diff --git a/app/(app)/draft/[id]/page.tsx b/app/(app)/draft/[id]/page.tsx
@@ -48,7 +48,7 @@ const PreviewPage = async (props: Props) => {
   const content = Markdoc.transform(ast, config);
 
   return (
-    <div className="mx-auto max-w-3xl px-4 py-8">
+    <div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
       <nav className="mb-6 flex items-center gap-2 text-sm">
         <span className="rounded-full bg-accent/15 px-3 py-1 font-medium text-accent">
           Draft Preview
diff --git a/app/(app)/feed/_client.tsx b/app/(app)/feed/_client.tsx
@@ -162,7 +162,12 @@ const FeedPage = ({ initialFeed }: { initialFeed?: FeedFirstPage | null }) => {
               {t.label}
             </button>
           ))}
-          <div className="ml-auto pl-4">{filterCluster}</div>
+          {/* Mobile: filters drop to their own full-width row below the tabs
+              instead of cramming under them. Desktop: inline, pushed right.
+              No overflow clip here — it would hide the FilterPill popovers. */}
+          <div className="order-last flex w-full justify-end pt-1 min-[640px]:order-none min-[640px]:ml-auto min-[640px]:w-auto min-[640px]:pl-4 min-[640px]:pt-0">
+            {filterCluster}
+          </div>
         </div>
       ) : (
         <div className="flex items-center border-b border-hairline pb-2">
diff --git a/app/(app)/s/[sourceSlug]/[slug]/_feedArticleContent.tsx b/app/(app)/s/[sourceSlug]/[slug]/_feedArticleContent.tsx
@@ -42,7 +42,7 @@ const FeedArticleContent = ({ sourceSlug, article }: Props) => {
   const safeExternalUrl = safeExternalHref(article.externalUrl);
 
   return (
-    <article className="mx-auto max-w-prose px-4 py-8">
+    <article className="mx-auto max-w-prose px-0 py-4 sm:px-4 sm:py-8">
       <Link
         href="/"
         className="mb-6 inline-flex items-center gap-1.5 font-mono text-sm text-muted transition-colors hover:text-fg"
diff --git a/app/(app)/s/[sourceSlug]/_sourceProfileClient.tsx b/app/(app)/s/[sourceSlug]/_sourceProfileClient.tsx
@@ -72,7 +72,7 @@ const SourceProfileContent = ({ sourceSlug, initialProfile }: Props) => {
   // first render (including SSR) is the real profile rather than a skeleton.
   if (status === "error" || !pub) {
     return (
-      <div className="mx-auto max-w-2xl px-4 py-8 text-fg">
+      <div className="mx-auto max-w-2xl px-0 py-4 sm:px-4 sm:py-8 text-fg">
         <div className="bg-danger/12 rounded-lg border border-danger/30 p-6 text-center">
           <h1 className="text-lg font-semibold text-danger">
             Publication Not Found
diff --git a/app/(app)/tag/[slug]/page.tsx b/app/(app)/tag/[slug]/page.tsx
@@ -165,7 +165,7 @@ export default async function TagPage(props: Props) {
   const nextHref = hasNextPage ? `/tag/${slug}?page=${page + 1}` : null;
 
   return (
-    <div className="mx-auto max-w-3xl px-4 py-8">
+    <div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
       <p className="eyebrow">
         <span className="slash">{"// "}</span>
         Tag
diff --git a/components/CommandPalette/CommandPalette.tsx b/components/CommandPalette/CommandPalette.tsx
@@ -140,7 +140,8 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
         aria-label="Search Codú"
         className="w-full max-w-[600px] overflow-hidden rounded-xl border border-strong bg-elevated shadow-lg"
       >
-        <div className="flex items-center gap-3 border-b border-hairline px-5 py-4">
+        {/* A subtle thin accent line marks the active field — no focus ring. */}
+        <div className="flex items-center gap-3 border-b border-hairline px-5 py-4 transition-colors focus-within:border-accent">
           <span className="text-lg leading-none text-faint">⌕</span>
           <input
             autoFocus
@@ -154,11 +155,32 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
             role="combobox"
             aria-expanded="true"
             aria-controls="cmdk-list"
-            className="flex-1 bg-transparent text-lg text-fg outline-none placeholder:text-faint"
+            // The global focus-visible ring resolves to blue here; opt out and
+            // let the parent's focus-within accent underline mark the field.
+            className="flex-1 bg-transparent text-lg text-fg outline-none ring-0 ring-offset-0 placeholder:text-faint focus-visible:ring-0 focus-visible:ring-offset-0"
           />
-          <kbd className="rounded-sm border border-hairline px-1.5 py-0.5 font-mono text-[11px] text-faint">
+          {/* Desktop closes with the Esc key; mobile gets a tap target. */}
+          <kbd className="hidden rounded-sm border border-hairline px-1.5 py-0.5 font-mono text-[11px] text-faint sm:inline-flex">
             Esc
           </kbd>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close search"
+            className="-mr-1 flex h-8 w-8 items-center justify-center rounded-md text-faint transition-colors hover:bg-surface hover:text-fg sm:hidden"
+          >
+            <svg
+              className="h-5 w-5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </button>
         </div>
 
         <div
diff --git a/components/ContentDetail/Layout.tsx b/components/ContentDetail/Layout.tsx
@@ -24,7 +24,7 @@ const ContentDetailLayout = ({
   sideInfo,
 }: ContentDetailLayoutProps) => {
   return (
-    <div className="mx-auto max-w-3xl px-4 py-8">
+    <div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
       {/* Breadcrumb navigation */}
       {breadcrumbs.length > 0 && (
         <nav
diff --git a/components/ContentDetail/PostReader.tsx b/components/ContentDetail/PostReader.tsx
@@ -176,7 +176,7 @@ const PostReader = async ({
       {articleSchema && <JsonLd data={articleSchema} />}
       {breadcrumbSchema && <JsonLd data={breadcrumbSchema} />}
 
-      <div className="mx-auto max-w-3xl px-4 py-8">
+      <div className="mx-auto max-w-3xl px-0 py-4 sm:px-4 sm:py-8">
         <nav className="mb-6 flex items-center gap-2 text-sm text-muted">
           <Link href="/" className="hover:text-fg">
             Feed
diff --git a/components/Feed/Filters.tsx b/components/Feed/Filters.tsx
@@ -189,7 +189,10 @@ const FeedFilters = ({
     typeValue !== "all" || sort !== "recent" || tagValue !== ALL_TOPICS;
 
   return (
-    <div className="flex items-center gap-2" data-testid="feed-filters">
+    <div
+      className="flex flex-wrap items-center justify-end gap-x-2 gap-y-1"
+      data-testid="feed-filters"
+    >
       {isDirty && (
         <button
           type="button"
diff --git a/components/Layout/NavDrawer.tsx b/components/Layout/NavDrawer.tsx
@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
+import { signIn } from "next-auth/react";
 import { type Session } from "next-auth";
 import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
 
@@ -106,6 +107,33 @@ export function NavDrawer({
           </button>
         </div>
 
+        {/* Logged-out auth CTAs live here on mobile — the top bar drops them to
+            make room for the search icon. */}
+        {!session && (
+          <div className="mb-3 flex flex-col gap-2 px-1">
+            <button
+              type="button"
+              onClick={() => {
+                onClose();
+                signIn();
+              }}
+              className="primary-button w-full justify-center"
+            >
+              Join free
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                onClose();
+                signIn();
+              }}
+              className="w-full rounded-md border border-strong px-3 py-2 text-center text-sm font-semibold text-fg transition-colors hover:bg-surface"
+            >
+              Log in
+            </button>
+          </div>
+        )}
+
         <nav className="flex flex-col gap-0.5">
           {nav.map((item) => {
             const active = isActive(item.href);
diff --git a/components/Layout/TopBar.tsx b/components/Layout/TopBar.tsx
@@ -73,12 +73,14 @@ export function TopBar({
         </Link>
       </div>
 
+      {/* Desktop: a full search field that opens the ⌘K palette. Hidden on
+          mobile, where a compact icon button in the right cluster takes over. */}
       <button
         type="button"
         onClick={onOpenPalette}
-        className="flex w-full min-w-0 max-w-[440px] items-center gap-2 justify-self-center rounded-full border border-hairline bg-surface py-1.5 pl-3.5 pr-2.5 text-left transition-colors duration-base ease-out hover:border-strong"
+        className="hidden w-full min-w-0 max-w-[440px] items-center gap-2 justify-self-center rounded-full border border-hairline bg-surface py-1.5 pl-3.5 pr-2.5 text-left transition-colors duration-base ease-out hover:border-strong focus:outline-none focus-visible:border-accent focus-visible:ring-0 focus-visible:ring-offset-0 min-[721px]:flex"
       >
-        <span className="text-sm leading-none text-faint">⌕</span>
+        <SearchIcon className="h-[18px] w-[18px] shrink-0 text-faint" />
         <span className="min-w-0 flex-1 truncate text-sm text-faint">
           Search…
         </span>
@@ -89,6 +91,7 @@ export function TopBar({
 
       {session ? (
         <div className="flex items-center gap-3 justify-self-end">
+          <SearchIconButton onClick={onOpenPalette} />
           <Link
             href="/notifications"
             aria-label="Notifications"
@@ -160,24 +163,63 @@ export function TopBar({
         </div>
       ) : (
         <div className="flex items-center gap-3 justify-self-end">
-          <button
-            onClick={() => signIn()}
-            className="whitespace-nowrap text-sm font-semibold text-fg"
-          >
-            Log in
-          </button>
-          <button
-            onClick={() => signIn()}
-            className="primary-button whitespace-nowrap"
-          >
-            Join free
-          </button>
+          <SearchIconButton onClick={onOpenPalette} />
+          {/* Log in / Join free move into the hamburger drawer on mobile — hide
+              the whole cluster (wrapping the parent beats primary-button's own
+              display, which would otherwise survive a bare `hidden`). */}
+          <div className="hidden items-center gap-3 min-[721px]:flex">
+            <button
+              onClick={() => signIn()}
+              className="whitespace-nowrap text-sm font-semibold text-fg"
+            >
+              Log in
+            </button>
+            <button
+              onClick={() => signIn()}
+              className="primary-button whitespace-nowrap"
+            >
+              Join free
+            </button>
+          </div>
         </div>
       )}
     </header>
   );
 }
 
+function SearchIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="11" cy="11" r="7" />
+      <path d="m20 20-3.4-3.4" />
+    </svg>
+  );
+}
+
+/** Mobile-only search affordance: the full search field collapses to this icon
+ *  button (≤sm), which opens the same ⌘K palette. */
+function SearchIconButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Search"
+      className="flex h-9 w-9 items-center justify-center rounded-full text-fg hover:bg-elevated min-[721px]:hidden"
+    >
+      <SearchIcon className="h-[22px] w-[22px]" />
+    </button>
+  );
+}
+
 function Avatar({
   name,
   image,
diff --git a/styles/globals.css b/styles/globals.css
@@ -265,7 +265,9 @@ body {
 @media (max-width: 720px) {
   .app-main {
     grid-template-columns: minmax(0, 1fr);
-    padding-bottom: 6rem;
+    /* Small side gutters on mobile (not the desktop clamp) so cards get the
+       full reading width and don't overflow the viewport. */
+    padding: 1.25rem 0.75rem 6rem;
   }
   .app-leftrail {
     display: none;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{"sessionId":"2e846f21-abe2-48e8-9271-db7412d07e21","pid":64036,"procStart":"Sat Jun 6 19:50:40 2026","acquiredAt":1781422714573}`