From 5177d89684d6e599971773696c4df02e4fac935a Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Sun, 14 Jun 2026 08:56:22 +0100
Subject: [PATCH 1/3] fix(feed): repair broken article thumbnails from doubled
 image URLs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/api/admin/sync-feeds/route.ts             | 15 +++-
 .../UnifiedContentCard/UnifiedContentCard.tsx | 23 +++--
 scripts/fetch-rss.ts                          |  5 ++
 scripts/fix-doubled-image-urls.ts             | 83 +++++++++++++++++++
 utils/url.test.ts                             | 47 +++++++++++
 utils/url.ts                                  | 18 ++++
 6 files changed, 180 insertions(+), 11 deletions(-)
 create mode 100644 scripts/fix-doubled-image-urls.ts
 create mode 100644 utils/url.test.ts

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/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/utils/url.test.ts b/utils/url.test.ts
new file mode 100644
index 000000000..8dafbe6d3
--- /dev/null
+++ b/utils/url.test.ts
@@ -0,0 +1,47 @@
+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("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..aa83da800 100644
--- a/utils/url.ts
+++ b/utils/url.ts
@@ -29,6 +29,24 @@ export function safeExternalHref(
   return parsed.protocol === "https:" ? url.trim() : undefined;
 }
 
+/**
+ * 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. We
+ * slice from the LAST embedded scheme so the inner, real URL wins. A normal URL
+ * (only scheme at index 0) and a `?url=https://...` proxy param are left intact.
+ */
+export function unwrapDoubledUrl(
+  url: string | null | undefined,
+): string | null {
+  if (!url) return null;
+  // Ignore a scheme that appears inside the query string — only unwrap when the
+  // embedded scheme sits in the path (before any `?`).
+  const path = url.split("?")[0];
+  const i = Math.max(path.lastIndexOf("http://"), path.lastIndexOf("https://"));
+  return i > 0 ? url.slice(i) : 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;

From ba31d9411ab138d18daa5de09fc5f1996c9eb649 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Sun, 14 Jun 2026 08:56:31 +0100
Subject: [PATCH 2/3] fix(mobile): resolve overflow, top-bar, filters and focus
 on small screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .claude/scheduled_tasks.lock                  |  1 +
 .../[username]/[slug]/_userLinkDetail.tsx     |  6 +-
 app/(app)/admin/_client.tsx                   |  2 +-
 app/(app)/admin/moderation/_client.tsx        |  2 +-
 app/(app)/admin/sources/_client.tsx           |  2 +-
 app/(app)/admin/tags/_client.tsx              |  2 +-
 app/(app)/admin/users/_client.tsx             |  2 +-
 app/(app)/company/[slug]/page.tsx             |  2 +-
 app/(app)/draft/[id]/page.tsx                 |  2 +-
 app/(app)/feed/_client.tsx                    |  7 +-
 .../[slug]/_feedArticleContent.tsx            |  2 +-
 .../s/[sourceSlug]/_sourceProfileClient.tsx   |  2 +-
 app/(app)/tag/[slug]/page.tsx                 |  2 +-
 components/CommandPalette/CommandPalette.tsx  | 28 +++++++-
 components/ContentDetail/Layout.tsx           |  2 +-
 components/ContentDetail/PostReader.tsx       |  2 +-
 components/Feed/Filters.tsx                   |  5 +-
 components/Layout/NavDrawer.tsx               | 28 ++++++++
 components/Layout/TopBar.tsx                  | 70 +++++++++++++++----
 styles/globals.css                            |  4 +-
 20 files changed, 138 insertions(+), 35 deletions(-)
 create mode 100644 .claude/scheduled_tasks.lock

diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
new file mode 100644
index 000000000..c0e01ed82
--- /dev/null
+++ 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}
\ No newline at end of file
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/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/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;

From cd2679d40e5d8fef22f6b50c220a9ed83a100906 Mon Sep 17 00:00:00 2001
From: NiallJoeMaher <nialljoemaher@gmail.com>
Date: Sun, 14 Jun 2026 09:01:49 +0100
Subject: [PATCH 3/3] fix(feed): anchor unwrapDoubledUrl to the host boundary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .claude/scheduled_tasks.lock |  1 -
 utils/url.test.ts            |  9 +++++++++
 utils/url.ts                 | 18 ++++++++++--------
 3 files changed, 19 insertions(+), 9 deletions(-)
 delete mode 100644 .claude/scheduled_tasks.lock

diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
deleted file mode 100644
index c0e01ed82..000000000
--- a/.claude/scheduled_tasks.lock
+++ /dev/null
@@ -1 +0,0 @@
-{"sessionId":"2e846f21-abe2-48e8-9271-db7412d07e21","pid":64036,"procStart":"Sat Jun  6 19:50:40 2026","acquiredAt":1781422714573}
\ No newline at end of file
diff --git a/utils/url.test.ts b/utils/url.test.ts
index 8dafbe6d3..cc64c52b0 100644
--- a/utils/url.test.ts
+++ b/utils/url.test.ts
@@ -29,6 +29,15 @@ describe("unwrapDoubledUrl", () => {
     ).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();
diff --git a/utils/url.ts b/utils/url.ts
index aa83da800..d90fb6807 100644
--- a/utils/url.ts
+++ b/utils/url.ts
@@ -29,22 +29,24 @@ 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. We
- * slice from the LAST embedded scheme so the inner, real URL wins. A normal URL
- * (only scheme at index 0) and a `?url=https://...` proxy param are left intact.
+ * `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;
-  // Ignore a scheme that appears inside the query string — only unwrap when the
-  // embedded scheme sits in the path (before any `?`).
-  const path = url.split("?")[0];
-  const i = Math.max(path.lastIndexOf("http://"), path.lastIndexOf("https://"));
-  return i > 0 ? url.slice(i) : url;
+  return DOUBLED_ORIGIN.exec(url)?.[1] ?? url;
 }
 
 /** Upgrades an `http://` URL to `https://`. Returns null for empty input. */