Merge pull request #36 from Ray-D-Song/read_mode

fix: read mode overflow
Ray-D-Song · Nov 9, 2024 · 30a03ac · 30a03ac
2 parents b500078 + 27e633b
commit 30a03ac
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/web/src/components/readability-page-content.tsx b/packages/web/src/components/readability-page-content.tsx
@@ -19,10 +19,10 @@ function ReadabilityPageContent({ pageHtml }: ReadabilityPageContentProps) {
   }, [article?.content])
 
   return (
-    <main className="flex flex-col gap-4 items-center">
+    <main className="flex flex-col gap-4 items-center w-full h-full">
       <h1 className="text-2xl font-bold">{article?.title}</h1>
       <h3 className="text-sm text-muted-foreground max-w-prose">{article?.excerpt}</h3>
-      <div className="prose dark:prose-invert" ref={articleContainerRef}></div>
+      <div className="prose dark:prose-invert w-full" ref={articleContainerRef}></div>
     </main>
   )
 }

diff --git a/packages/web/src/pages/(layout)/page.[slug].tsx b/packages/web/src/pages/(layout)/page.[slug].tsx
@@ -80,8 +80,8 @@ function ArchivePage() {
   const { readMode, setReadMode } = useContext(AppContext)
 
   return (
-    <main className="h-screen flex flex-col">
-      <nav className="p-2 flex justify-between items-center">
+    <main className="h-screen w-screen lg:w-full flex flex-col">
+      <nav className="p-2 w-full flex justify-between items-center">
         <Button variant="ghost" size="sm" onClick={goBack}>
           <ArrowLeft className="w-5 h-5" />
         </Button>
@@ -102,7 +102,7 @@ function ArchivePage() {
           </Button>
         </div>
       </nav>
-      <div className="flex-1 p-4">
+      <div className="flex-1 p-4 w-full">
         <LoadingWrapper loading={pageLoading}>
           {readMode
             ? <ReadabilityPageContent pageHtml={pageContentUrl || ''} />