Fixes to responsive styling

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}

.claude/commands/do-test.md

@@ -0,0 +1,52 @@
+---
+description: Run development verification checks (lint, build, and optionally e2e tests)
+argument-hint: "[e2e]"
+---
+
+## Development Test Suite
+
+Run comprehensive development verification checks for the Codu project.
+
+## Current Context
+
+Branch: !`git branch --show-current`
+Status: !`git status --short | head -10`
+
+## Task
+
+Run the following verification steps in order:
+
+### 1. Lint Check
+Run ESLint and verify there are **0 errors** (warnings are acceptable):
+```bash
+npm run lint
+```
+Report the error/warning counts.
+
+### 2. TypeScript Compilation
+Verify TypeScript compiles without errors:
+```bash
+npx tsc --noEmit
+```
+
+### 3. Build Check
+Verify the Next.js build completes successfully:
+```bash
+npm run build
+```
+
+### 4. E2E Tests (if requested)
+If `$ARGUMENTS` includes "e2e", also run E2E tests:
+```bash
+npm run test:e2e
+```
+
+## Output
+
+Provide a clear summary:
+- Lint: PASS/FAIL (X errors, Y warnings)
+- TypeScript: PASS/FAIL
+- Build: PASS/FAIL
+- E2E Tests: PASS/FAIL/SKIPPED
+
+If any check fails, provide details and suggest fixes.

app/(app)/articles/_client.tsx

@@ -360,14 +360,6 @@ const sortUIToAPI: Record<UISortOption, APISortOption> = {
  popular: "top",
 };
 
-// Map API sort to UI sort (for URL params)
-const sortAPIToUI: Record<APISortOption, UISortOption> = {
- newest: "recent",
- oldest: "recent", // fallback
- top: "popular",
- trending: "trending",
-};
-
 const validUISorts: UISortOption[] = ["recent", "trending", "popular"];
 
 const ArticlesPage = () => {
@@ -432,8 +424,8 @@ const ArticlesPage = () => {
  return (
  <>
  <div className="mx-2">
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  {typeof tag === "string" ? (
  <div className="flex items-center justify-center">
  <TagIcon className="mr-3 h-6 w-6 text-neutral-800 dark:text-neutral-200" />

app/(app)/feed/_client.tsx

@@ -109,10 +109,11 @@ const FeedPage = () => {
  return (
  <div className="mx-2">
  {/* Header */}
- <div className="mt-8 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h1 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-2 flex max-w-5xl items-center justify-between sm:mx-auto sm:mt-6 sm:max-w-2xl lg:max-w-5xl">
+ <h1 className="hidden text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:block">
  Feed
  </h1>
+ <span />
  <FeedFilters
  sort={sort}
  type={type}

app/(app)/layout.tsx

@@ -1,11 +1,5 @@
-import { headers } from "next/headers";
-import ThemeProvider from "@/components/Theme/ThemeProvider";
-import { TRPCReactProvider } from "@/server/trpc/react";
 import { getServerAuthSession } from "@/server/auth";
-import AuthProvider from "@/context/AuthProvider";
-import ProgressBar from "@/components/ProgressBar/ProgressBar";
 import React from "react";
-import { PromptProvider } from "@/components/PromptService";
 import { db } from "@/server/db";
 import { eq } from "drizzle-orm";
 import { user } from "@/server/db/schema";

app/(app)/page.tsx

@@ -41,8 +41,8 @@ const Home = async () => {
  )}
 
  <div className="mx-2" id={session ? "cta" : ""}>
- <div className="mt-6 flex max-w-5xl items-center justify-between pb-2 sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
- <h3 className="text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50 sm:text-4xl">
+ <div className="mt-6 flex max-w-5xl items-center justify-between sm:mx-auto sm:max-w-2xl lg:max-w-5xl">
+ <h3 className="text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-50">
  Trending
  </h3>
  </div>

components/Feed/Filters.tsx

@@ -35,9 +35,9 @@ type Props = {
  type?: ContentType;
  category?: string | null;
  categories: string[];
- onSortChange: (sort: SortOption) => void;
- onTypeChange?: (type: ContentType) => void;
- onCategoryChange: (category: string | null) => void;
+ onSortChange: (_sort: SortOption) => void;
+ onTypeChange?: (_type: ContentType) => void;
+ onCategoryChange: (_category: string | null) => void;
  showTypeFilter?: boolean;
 };
 
@@ -80,11 +80,14 @@ const FeedFilters = ({
  typeOptions.find((opt) => opt.value === type) || typeOptions[0];
 
  return (
- <div className="flex items-center gap-3" data-testid="feed-filters">
+ <div
+ className="flex items-center gap-2 sm:gap-3"
+ data-testid="feed-filters"
+ >
  {/* Content Type Dropdown */}
  {showTypeFilter && onTypeChange && (
  <Menu as="div" className="relative" data-testid="type-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentType.icon className="h-4 w-4" />
  <span>{currentType.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +132,7 @@ const FeedFilters = ({
 
  {/* Sort Dropdown */}
  <Menu as="div" className="relative" data-testid="sort-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <currentSort.icon className="h-4 w-4" />
  <span>{currentSort.label}</span>
  <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +177,7 @@ const FeedFilters = ({
  {/* Category Dropdown */}
  {categories.length > 0 && (
  <Menu as="div" className="relative" data-testid="topic-filter">
- <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
+ <MenuButton className="flex items-center gap-1 rounded-lg border border-neutral-300 bg-white px-2 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700 sm:px-3">
  <span>{category || "All Topics"}</span>
  <ChevronDownIcon className="h-4 w-4" />
  </MenuButton>

components/Header/MinimalHeader.tsx

@@ -87,8 +87,8 @@ export function MinimalHeader({
  </Link>
  </div>
 
- {/* Mobile: Logo in center */}
- <div className="flex flex-1 justify-center lg:hidden">
+ {/* Mobile: Logo on left */}
+ <div className="flex lg:hidden">
  <Link to="/">
  <Image
  src="/images/codu.png"

components/UnifiedContentCard/UnifiedContentCard.tsx

@@ -243,8 +243,8 @@ const UnifiedContentCard = ({
  >
  {/* Meta info row */}
  <div className="mb-1.5 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-neutral-500 dark:text-neutral-400">
- {/* Author/Source info - show author for any content type with author */}
- {author ? (
+ {/* Author/Source info - show author for content with valid author username */}
+ {author?.username ? (
  <Link
  href={`/${author.username}`}
  className="flex items-center gap-1.5 hover:text-neutral-700 dark:hover:text-neutral-200"
@@ -384,7 +384,7 @@ const UnifiedContentCard = ({
  <Link
  href={cardUrl}
  onClick={type === "LINK" ? handleExternalClick : undefined}
- className="relative hidden w-[120px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:block"
+ className="relative w-[80px] flex-shrink-0 self-start overflow-hidden rounded-lg sm:w-[120px]"
  >
  <img
  src={imageUrl}