From 2eba871a6d4e923629b2ad2807e16a1ff053cca2 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Thu, 3 Jul 2025 00:39:45 +0800
Subject: [PATCH] :lipstick: Web article has max width

---
 lib/screens/article_detail_screen.dart | 91 ++++++++++++++------------
 lib/screens/discovery/articles.dart    | 23 ++++---
 2 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/lib/screens/article_detail_screen.dart b/lib/screens/article_detail_screen.dart
index ce9078a..e171e94 100644
--- a/lib/screens/article_detail_screen.dart
+++ b/lib/screens/article_detail_screen.dart
@@ -51,54 +51,59 @@ class _ArticleDetailContent extends HookConsumerWidget {
     );
 
     return SingleChildScrollView(
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          if (article.preview?.imageUrl != null)
-            Image.network(
-              article.preview!.imageUrl!,
-              width: double.infinity,
-              height: 200,
-              fit: BoxFit.cover,
-            ),
-          Padding(
-            padding: const EdgeInsets.all(16.0),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  article.title,
-                  style: Theme.of(context).textTheme.headlineSmall,
+      child: Center(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 560),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              if (article.preview?.imageUrl != null)
+                Image.network(
+                  article.preview!.imageUrl!,
+                  width: double.infinity,
+                  height: 200,
+                  fit: BoxFit.cover,
                 ),
-                const SizedBox(height: 8),
-                if (article.feed?.title != null)
-                  Text(
-                    article.feed!.title,
-                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+              Padding(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      article.title,
+                      style: Theme.of(context).textTheme.headlineSmall,
                     ),
-                  ),
-                const Divider(height: 32),
-                if (article.content != null)
-                  ...MarkdownTextContent.buildGenerator(
-                    isDark: Theme.of(context).brightness == Brightness.dark,
-                  ).buildWidgets(markdownContent)
-                else if (article.preview?.description != null)
-                  Text(article.preview!.description!),
-                const Gap(24),
-                FilledButton(
-                  onPressed:
-                      () => launchUrlString(
-                        article.url,
-                        mode: LaunchMode.externalApplication,
+                    const SizedBox(height: 8),
+                    if (article.feed?.title != null)
+                      Text(
+                        article.feed!.title,
+                        style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
                       ),
-                  child: const Text('Read Full Article'),
+                    const Divider(height: 32),
+                    if (article.content != null)
+                      ...MarkdownTextContent.buildGenerator(
+                        isDark: Theme.of(context).brightness == Brightness.dark,
+                      ).buildWidgets(markdownContent)
+                    else if (article.preview?.description != null)
+                      Text(article.preview!.description!),
+                    const Gap(24),
+                    FilledButton(
+                      onPressed:
+                          () => launchUrlString(
+                            article.url,
+                            mode: LaunchMode.externalApplication,
+                          ),
+                      child: const Text('Read Full Article'),
+                    ),
+                    Gap(MediaQuery.of(context).padding.bottom),
+                  ],
                 ),
-                Gap(MediaQuery.of(context).padding.bottom),
-              ],
-            ),
+              ),
+            ],
           ),
-        ],
+        ),
       ),
     );
   }
diff --git a/lib/screens/discovery/articles.dart b/lib/screens/discovery/articles.dart
index 5571a85..be14a50 100644
--- a/lib/screens/discovery/articles.dart
+++ b/lib/screens/discovery/articles.dart
@@ -126,16 +126,21 @@ class ArticlesScreen extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return Scaffold(
       appBar: AppBar(title: Text(title ?? 'Articles')),
-      body: CustomScrollView(
-        slivers: [
-          SliverPadding(
-            padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
-            sliver: SliverArticlesList(
-              feedId: feedId,
-              publisherId: publisherId,
-            ),
+      body: Center(
+        child: ConstrainedBox(
+          constraints: const BoxConstraints(maxWidth: 560),
+          child: CustomScrollView(
+            slivers: [
+              SliverPadding(
+                padding: const EdgeInsets.only(top: 8, left: 8, right: 8),
+                sliver: SliverArticlesList(
+                  feedId: feedId,
+                  publisherId: publisherId,
+                ),
+              ),
+            ],
           ),
-        ],
+        ),
       ),
     );
   }