klbr/LetterFeed
1
0
Fork 0
mirror of https://github.com/khoaliber/LetterFeed.git synced 2026-03-02 21:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive layout

Browse Source
This commit is contained in:
Leon
2025-07-16 22:13:57 +02:00
parent 9f1eea4488
commit a3d42b51f4
5 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/letterfeed/EditNewsletterDialog.tsx
View File

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

12
frontend/components/letterfeed/Header.tsx
View File

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

2
frontend/components/letterfeed/NewsletterList.tsx
View File

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

2
frontend/components/letterfeed/SettingsDialog.tsx
View File

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

2
frontend/src/app/page.tsx
View File

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