diff --git a/app/(app)/[username]/[slug]/_userLinkDetail.tsx b/app/(app)/[username]/[slug]/_userLinkDetail.tsx
index 3aa9ad3f0..75bdf0012 100644
--- 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
index 114b5d684..0c9166e3f 100644
--- 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
index f993bb9f3..a4c1fe307 100644
--- 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
index 2d88f5748..abec554fd 100644
--- 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
index dc6ab7e1f..3739e9ac8 100644
--- 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
index 53b36aa26..e66112c69 100644
--- 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
index f0b8a7b3a..f93e73242 100644
--- 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
index 86ff32fda..d9e70ea81 100644
--- 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
index 1f3cdc913..428a7cc0e 100644
--- 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
index b1e9ce7e5..617cf1aa1 100644
--- 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
index 29b4c4903..7e79fde76 100644
--- 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
index 452e9d530..f6f5d631f 100644
--- 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
index f12a71723..d4b4b57e2 100644
--- 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
index 755c78f88..8e8ac8790 100644
--- 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
index a6202a26b..f02943c1f 100644
--- 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
index 4dfc3322d..8c8bb91de 100644
--- 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
index 06365ad3f..4adbe51bd 100644
--- 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
index 8b95cb95e..a35b05de4 100644
--- 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
index d41a7e7ac..6d350df97 100644
--- 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
index 66d427b67..4d8b7d641 100644
--- a/components/UnifiedContentCard/UnifiedContentCard.tsx
+++ b/components/UnifiedContentCard/UnifiedContentCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import Link from "next/link";
 import * as Sentry from "@sentry/nextjs";
 import { api } from "@/server/trpc/react";
@@ -8,7 +8,7 @@ import { signIn, useSession } from "next-auth/react";
 import { toast } from "sonner";
 import VoteControl from "@/components/Vote/VoteControl";
 import { ReportButton } from "@/components/ReportModal/ReportModal";
-import { ensureHttps } from "@/utils/url";
+import { ensureHttps, unwrapDoubledUrl } from "@/utils/url";
 import { getRelativeTime } from "@/utils/relativeTime";
 
 export type ContentType = "POST" | "LINK";
@@ -94,10 +94,18 @@ const UnifiedContentCard = ({
   const [isBookmarked, setIsBookmarked] = useState(initialBookmarked);
   const [shared, setShared] = useState(false);
 
+  // SSR race: a broken <img> begins loading during HTML parse and its `error`
+  // event can fire before React hydrates and attaches `onError`, so the handler
+  // never runs and the broken image sticks. This ref callback runs on mount — a
+  // loaded-but-zero-size image already failed — and hides it like onError would.
+  const checkBrokenImage = useCallback((node: HTMLImageElement | null) => {
+    if (node?.complete && node.naturalWidth === 0) setImageError(true);
+  }, []);
+
   const { data: session } = useSession();
   const utils = api.useUtils();
 
-  const imageUrl = ensureHttps(rawImageUrl);
+  const imageUrl = ensureHttps(unwrapDoubledUrl(rawImageUrl));
 
   // Card URL priority (slug ends with urlId, so it stays canonical; urlId is the
   // fallback when slug is missing): discussion /d/ > member /{username}/ >
@@ -200,7 +208,7 @@ const UnifiedContentCard = ({
 
   return (
     <article
-      className="group rounded-lg border border-hairline bg-surface p-5 transition-colors duration-base ease-out hover:border-strong"
+      className="group rounded-lg border border-hairline bg-surface p-4 transition-colors duration-base ease-out hover:border-strong sm:p-5"
       data-testid="content-card"
     >
       <div className="flex gap-4">
@@ -226,17 +234,17 @@ const UnifiedContentCard = ({
               (handleHref ? (
                 <Link
                   href={handleHref}
-                  className="whitespace-nowrap text-sm font-semibold text-fg hover:underline"
+                  className="min-w-0 max-w-full truncate text-sm font-semibold text-fg hover:underline"
                 >
                   {authorName}
                 </Link>
               ) : (
-                <span className="whitespace-nowrap text-sm font-semibold text-fg">
+                <span className="min-w-0 max-w-full truncate text-sm font-semibold text-fg">
                   {authorName}
                 </span>
               ))}
             <span
-              className="whitespace-nowrap font-mono text-xs text-faint"
+              className="min-w-0 basis-full truncate font-mono text-xs text-faint"
               // Cards now SSR (feed initialData) and relative times derive
               // from Date.now() — a minute boundary between server render and
               // hydration would otherwise log a text mismatch.
@@ -293,6 +301,7 @@ const UnifiedContentCard = ({
             className="relative h-[68px] w-[104px] flex-shrink-0 self-start overflow-hidden rounded-sm border border-hairline"
           >
             <img
+              ref={checkBrokenImage}
               src={imageUrl}
               alt=""
               className="h-full w-full object-cover"
diff --git a/scripts/fetch-rss.ts b/scripts/fetch-rss.ts
index 58ea70686..0295f217e 100644
--- a/scripts/fetch-rss.ts
+++ b/scripts/fetch-rss.ts
@@ -13,6 +13,7 @@ import { eq, and, isNotNull } from "drizzle-orm";
 import { nanoid } from "nanoid";
 import Parser from "rss-parser";
 import crypto from "crypto";
+import { ensureHttps, unwrapDoubledUrl } from "../utils/url";
 
 const parser = new Parser({
   timeout: 10000,
@@ -231,6 +232,10 @@ async function fetchAndProcessFeed(source: FeedSource) {
         console.log(`    ✓ ${readTimeMins} min read`);
       }
 
+      // Some feeds (e.g. HackerNoon's media:thumbnail) prefix an already-
+      // absolute CDN URL with their own origin, producing a 404ing doubled URL.
+      imageUrl = ensureHttps(unwrapDoubledUrl(imageUrl));
+
       // Rate limit: small delay between fetches
       await delay(200);
 
diff --git a/scripts/fix-doubled-image-urls.ts b/scripts/fix-doubled-image-urls.ts
new file mode 100644
index 000000000..6a7261f92
--- /dev/null
+++ b/scripts/fix-doubled-image-urls.ts
@@ -0,0 +1,83 @@
+/**
+ * One-off scrub for image URLs that an upstream feed prefixed with its own
+ * origin, leaving a doubled-up, 404ing URL — e.g. HackerNoon's media:thumbnail:
+ *   https://hackernoon.com/https://cdn.hackernoon.com/images/x.png
+ *
+ * The card now unwraps these at render, so this only cleans the stored data
+ * (used by server-side OG/SEO tags). Safe to re-run — it's idempotent.
+ *
+ * Usage: npx tsx scripts/fix-doubled-image-urls.ts
+ */
+
+import { db } from "../server/db";
+import { posts, aggregated_article } from "../server/db/schema";
+import { eq, like, or } from "drizzle-orm";
+import { ensureHttps, unwrapDoubledUrl } from "../utils/url";
+
+// Matches a scheme that appears AFTER the first character — i.e. a second
+// embedded "http(s)://" further along the string. Cheap pre-filter; the real
+// decision is made by unwrapDoubledUrl per row.
+const DOUBLED = "%://http%://%";
+
+async function fixPosts() {
+  const rows = await db
+    .select({ id: posts.id, coverImage: posts.coverImage })
+    .from(posts)
+    .where(like(posts.coverImage, DOUBLED));
+
+  let fixed = 0;
+  for (const row of rows) {
+    const cleaned = ensureHttps(unwrapDoubledUrl(row.coverImage));
+    if (cleaned !== row.coverImage) {
+      await db
+        .update(posts)
+        .set({ coverImage: cleaned })
+        .where(eq(posts.id, row.id));
+      fixed++;
+    }
+  }
+  console.log(`posts.coverImage: ${fixed}/${rows.length} fixed`);
+}
+
+async function fixAggregatedArticles() {
+  const rows = await db
+    .select({
+      id: aggregated_article.id,
+      imageUrl: aggregated_article.imageUrl,
+      ogImageUrl: aggregated_article.ogImageUrl,
+    })
+    .from(aggregated_article)
+    .where(
+      or(
+        like(aggregated_article.imageUrl, DOUBLED),
+        like(aggregated_article.ogImageUrl, DOUBLED),
+      ),
+    );
+
+  let fixed = 0;
+  for (const row of rows) {
+    const imageUrl = ensureHttps(unwrapDoubledUrl(row.imageUrl));
+    const ogImageUrl = ensureHttps(unwrapDoubledUrl(row.ogImageUrl));
+    if (imageUrl !== row.imageUrl || ogImageUrl !== row.ogImageUrl) {
+      await db
+        .update(aggregated_article)
+        .set({ imageUrl, ogImageUrl })
+        .where(eq(aggregated_article.id, row.id));
+      fixed++;
+    }
+  }
+  console.log(`aggregated_article: ${fixed}/${rows.length} fixed`);
+}
+
+async function main() {
+  console.log("=== Scrubbing doubled image URLs ===");
+  await fixPosts();
+  await fixAggregatedArticles();
+  console.log("Done.");
+  process.exit(0);
+}
+
+main().catch((error) => {
+  console.error("Fatal error:", error);
+  process.exit(1);
+});
diff --git a/styles/globals.css b/styles/globals.css
index 9ca2f3e96..dadd11d1c 100644
--- 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;
diff --git a/utils/url.test.ts b/utils/url.test.ts
new file mode 100644
index 000000000..cc64c52b0
--- /dev/null
+++ b/utils/url.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+import { unwrapDoubledUrl, ensureHttps } from "./url";
+
+describe("unwrapDoubledUrl", () => {
+  it("unwraps a URL prefixed with another origin (HackerNoon media:thumbnail bug)", () => {
+    expect(
+      unwrapDoubledUrl(
+        "https://hackernoon.com/https://cdn.hackernoon.com/images/A7coZ0.png",
+      ),
+    ).toBe("https://cdn.hackernoon.com/images/A7coZ0.png");
+  });
+
+  it("unwraps an http-wrapped https URL, keeping the inner scheme", () => {
+    expect(
+      unwrapDoubledUrl("http://example.com/https://cdn.example.com/x.png"),
+    ).toBe("https://cdn.example.com/x.png");
+  });
+
+  it("leaves a normal absolute URL untouched", () => {
+    expect(unwrapDoubledUrl("https://cdn.thenewstack.io/media/x.png")).toBe(
+      "https://cdn.thenewstack.io/media/x.png",
+    );
+  });
+
+  it("does not treat a scheme in the query string as a wrapper", () => {
+    // Only one real scheme at index 0 — a `?url=https://...` proxy param is left alone.
+    expect(
+      unwrapDoubledUrl("https://img.proxy/optimize?url=https://cdn.site/x.png"),
+    ).toBe("https://img.proxy/optimize?url=https://cdn.site/x.png");
+  });
+
+  it("leaves a scheme that appears deeper in the path untouched", () => {
+    // A slug or nested path segment that contains `http://` is NOT a doubled
+    // origin — only a scheme immediately after the host counts.
+    const slug = "https://blog.com/2021/http-vs-https/cover.png";
+    expect(unwrapDoubledUrl(slug)).toBe(slug);
+    const nested = "https://cdn.site.com/a/https://b/x.png";
+    expect(unwrapDoubledUrl(nested)).toBe(nested);
+  });
+
+  it("passes through null/empty", () => {
+    expect(unwrapDoubledUrl(null)).toBeNull();
+    expect(unwrapDoubledUrl(undefined)).toBeNull();
+    expect(unwrapDoubledUrl("")).toBeNull();
+  });
+
+  it("composes with ensureHttps to clean a wrapped http CDN url", () => {
+    expect(
+      ensureHttps(
+        unwrapDoubledUrl(
+          "https://hackernoon.com/http://cdn.hackernoon.com/x.png",
+        ),
+      ),
+    ).toBe("https://cdn.hackernoon.com/x.png");
+  });
+});
diff --git a/utils/url.ts b/utils/url.ts
index e2878f869..d90fb6807 100644
--- a/utils/url.ts
+++ b/utils/url.ts
@@ -29,6 +29,26 @@ export function safeExternalHref(
   return parsed.protocol === "https:" ? url.trim() : undefined;
 }
 
+// `https://host[:port]/<absolute-url>` — an upstream feed prefixed its own
+// origin onto an already-absolute URL. Anchored so the embedded scheme must sit
+// immediately after the host's first slash: this is the precise shape of the
+// bug and avoids mangling a scheme that legitimately appears deeper in the path
+// (path-based image proxies, a slug containing `http://`) or in a query string.
+const DOUBLED_ORIGIN = /^https?:\/\/[^/]+\/(https?:\/\/.+)$/i;
+
+/**
+ * Unwraps a URL that an upstream feed prefixed with its own origin, leaving an
+ * already-absolute URL doubled up — e.g. HackerNoon's `media:thumbnail` serves
+ * `https://hackernoon.com/https://cdn.hackernoon.com/x.png`, which 404s. Returns
+ * the inner URL; a normal URL is returned unchanged.
+ */
+export function unwrapDoubledUrl(
+  url: string | null | undefined,
+): string | null {
+  if (!url) return null;
+  return DOUBLED_ORIGIN.exec(url)?.[1] ?? url;
+}
+
 /** Upgrades an `http://` URL to `https://`. Returns null for empty input. */
 export function ensureHttps(url: string | null | undefined): string | null {
   if (!url) return null;