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

Author: NiallJoeMaher

app/(app)/articles/_client.tsx

@@ -432,8 +432,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)/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

@@ -80,11 +80,11 @@ 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 sm:px-3 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
             <currentType.icon className="h-4 w-4" />
             <span>{currentType.label}</span>
             <ChevronDownIcon className="h-4 w-4" />
@@ -129,7 +129,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 sm:px-3 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
           <currentSort.icon className="h-4 w-4" />
           <span>{currentSort.label}</span>
           <ChevronDownIcon className="h-4 w-4" />
@@ -174,7 +174,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 sm:px-3 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
             <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

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