Fixes to responsive styling (#1325)

* feat(editor): add new PostEditor component and E2E test infrastructure

  - Add PostEditor with WriteTab and LinkTab for article/link creation
  - Add URL metadata fetching for link posts
  - Add article toolbar with formatting options
  - Add E2E editor tests and test utilities
  - Update E2E setup with link post test data
  - Update slash command and image upload extensions

* style: standardize formatting and clean up whitespace across multiple files

* feat(editor): enhance CreateContent component with improved data handling and state management

* feat: update UnifiedContentCard to display author username conditionally and prevent layout shift with scrollbar-gutter in globals.css

* feat: update layout and styling for ArticlesPage, FeedPage, Home, and Filters components

* style: refine layout and styling for FeedFilters component

* test: enhance article sorting and visibility checks in e2e tests

* fix: resolve ESLint errors and E2E test
   issues

   - Remove unused imports from layout.tsx (headers, ThemeProvider, etc.)
   - Remove unused sortAPIToUI mapping from articles/_client.tsx
   - Fix type parameter naming in Filters.tsx (prefix with underscore)
   - Fix networkidle usage in saved.spec.ts (use domcontentloaded)
   - Use platform-aware keyboard modifier in editor.spec.ts (Meta on Mac,
   Control on Linux)

* Add journal entry for lowly gunslinger migration (version 7)

* style: format JSON structure in 0017_snapshot.json and _journal.json for consistency

* fix: make migration 0017 idempotent for CI compatibility

Author: NiallJoeMaher

.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}