fix: feed image thumbnails + mobile layout regressions (#1332)

NiallJoeMaher · claude · web-flow · commit dd621f24cef5 · 2026-06-14T13:35:13.000+05:30
* fix(feed): repair broken article thumbnails from doubled image URLs HackerNoon's RSS media:thumbnail/media:content URLs are malformed at the source — an already-absolute CDN URL prefixed with their own origin (https://hackernoon.com/https://cdn.hackernoon.com/…), which 404s. Our ingestion stored them verbatim, and the redesigned cards SSR the <img>, so the broken-image icon stuck: the error event fires before React hydrates and attaches onError, so the fallback never runs. - add unwrapDoubledUrl() (utils/url.ts) + unit tests - card: unwrap at render and detect pre-hydration failures via a ref callback, so a dead image collapses to no thumbnail (not a broken icon) - sanitise URLs at ingestion (fetch-rss, admin/sync-feeds — media + OG) - one-off scrub script for already-stored rows Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(mobile): resolve overflow, top-bar, filters and focus on small screens 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) <noreply@anthropic.com> * fix(feed): anchor unwrapDoubledUrl to the host boundary Code review caught that the naive lastIndexOf scan would truncate a URL whose path legitimately contains http://https:// deeper down (path-based image proxies, or a slug literally containing a scheme). Match only an absolute URL sitting immediately after the host — the exact shape of the upstream doubled-origin bug — and leave everything else untouched. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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/app/api/admin/sync-feeds/route.ts b/app/api/admin/sync-feeds/route.ts
@@ -11,6 +11,7 @@ import { eq } from "drizzle-orm";
 import Parser from "rss-parser";
 import { customAlphabet } from "nanoid";
 import { fetchOgImage } from "@/lib/og-image";
+import { ensureHttps, unwrapDoubledUrl } from "@/utils/url";
 
 // Generate Reddit-style short IDs: lowercase + numbers, 7 characters
 const generateShortId = customAlphabet(
@@ -128,10 +129,14 @@ function extractImageUrl(item: Parser.Item): string | null {
     | { url?: string; type?: string }
     | undefined;
 
-  if (mediaContent?.$?.url) return mediaContent.$.url;
-  if (mediaThumbnail?.$?.url) return mediaThumbnail.$.url;
+  // Some feeds (e.g. HackerNoon's media:thumbnail) prefix an already-absolute
+  // CDN URL with their own origin, producing a 404ing doubled URL — unwrap it.
+  if (mediaContent?.$?.url)
+    return ensureHttps(unwrapDoubledUrl(mediaContent.$.url));
+  if (mediaThumbnail?.$?.url)
+    return ensureHttps(unwrapDoubledUrl(mediaThumbnail.$.url));
   if (enclosure?.url && enclosure.type?.startsWith("image/"))
-    return enclosure.url;
+    return ensureHttps(unwrapDoubledUrl(enclosure.url));
 
   return null;
 }
@@ -246,7 +251,9 @@ export async function POST(request: Request) {
 
           // Fetch OG image from the article URL
           try {
-            const ogImageUrl = await fetchOgImage(item.link);
+            const ogImageUrl = ensureHttps(
+              unwrapDoubledUrl(await fetchOgImage(item.link)),
+            );
             if (ogImageUrl) {
               await db
                 .update(aggregated_article)
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/components/UnifiedContentCard/UnifiedContentCard.tsx b/components/UnifiedContentCard/UnifiedContentCard.tsx
diff --git a/scripts/fetch-rss.ts b/scripts/fetch-rss.ts
diff --git a/scripts/fix-doubled-image-urls.ts b/scripts/fix-doubled-image-urls.ts
diff --git a/styles/globals.css b/styles/globals.css
diff --git a/utils/url.test.ts b/utils/url.test.ts
diff --git a/utils/url.ts b/utils/url.ts
