From a3d42b51f495686bb969c5a87a58a32db3a82042 Mon Sep 17 00:00:00 2001
From: Leon <mail@leonmuscat.de>
Date: Wed, 16 Jul 2025 22:13:57 +0200
Subject: [PATCH] feat: responsive layout

---
 .../components/letterfeed/EditNewsletterDialog.tsx   |  2 +-
 frontend/components/letterfeed/Header.tsx            | 12 ++++++------
 frontend/components/letterfeed/NewsletterList.tsx    |  2 +-
 frontend/components/letterfeed/SettingsDialog.tsx    |  2 +-
 frontend/src/app/page.tsx                            |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/components/letterfeed/EditNewsletterDialog.tsx b/frontend/components/letterfeed/EditNewsletterDialog.tsx
index de9b541..4677d94 100644
--- a/frontend/components/letterfeed/EditNewsletterDialog.tsx
+++ b/frontend/components/letterfeed/EditNewsletterDialog.tsx
@@ -89,7 +89,7 @@ export function EditNewsletterDialog({ newsletter, isOpen, onOpenChange, onSucce
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Edit Newsletter</DialogTitle>
           <DialogDescription>Update the details for {newsletter.name}.</DialogDescription>
diff --git a/frontend/components/letterfeed/Header.tsx b/frontend/components/letterfeed/Header.tsx
index e868714..8d70a17 100644
--- a/frontend/components/letterfeed/Header.tsx
+++ b/frontend/components/letterfeed/Header.tsx
@@ -27,8 +27,8 @@ export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
   }
 
   return (
-    <div className="flex items-center justify-between mb-8">
-      <div className="flex items-center gap-4">
+    <div className="flex flex-col md:flex-row items-center justify-between mb-8">
+      <div className="flex items-center gap-4 mb-4 md:mb-0">
         <Image
           src="/logo.png"
           alt="LetterFeed Logo"
@@ -37,14 +37,14 @@ export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
           className="rounded-lg"
         />
         <div>
-          <h1 className="text-3xl font-bold text-gray-900">LetterFeed</h1>
-          <p className="text-gray-600 mt-1">
-            Read your newsletters as RSS feeds!
+          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">LetterFeed</h1>
+          <p className="text-gray-600 mt-1 hidden md:block">
+            Newsletters as RSS feeds
           </p>
         </div>
       </div>
 
-      <div className="flex gap-2">
+      <div className="flex flex-wrap gap-2">
         <Button onClick={onOpenAddNewsletter}>
           <Plus className="w-4 h-4 mr-2" />
           Add Newsletter
diff --git a/frontend/components/letterfeed/NewsletterList.tsx b/frontend/components/letterfeed/NewsletterList.tsx
index f9d0080..2941647 100644
--- a/frontend/components/letterfeed/NewsletterList.tsx
+++ b/frontend/components/letterfeed/NewsletterList.tsx
@@ -8,7 +8,7 @@ interface NewsletterListProps {
 
 export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) {
   return (
-    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+    <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {newsletters.map((newsletter) => (
         <NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} />
       ))}
diff --git a/frontend/components/letterfeed/SettingsDialog.tsx b/frontend/components/letterfeed/SettingsDialog.tsx
index 0fc3438..cea160a 100644
--- a/frontend/components/letterfeed/SettingsDialog.tsx
+++ b/frontend/components/letterfeed/SettingsDialog.tsx
@@ -98,7 +98,7 @@ export function SettingsDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
           <DialogDescription>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index ee16a26..ed348f7 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -59,7 +59,7 @@ export default function LetterFeedApp() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Header
           onOpenAddNewsletter={() => setIsAddDialogOpen(true)}
           onOpenSettings={() => setIsSettingsOpen(true)}