From 7150b1a62d8923e4700d2f9c2c34ea33328f7561 Mon Sep 17 00:00:00 2001
From: Chongyi Zheng <git@zcy.dev>
Date: Tue, 23 Jan 2024 08:16:03 +0800
Subject: [PATCH] Fix overflow on mobile view (#836)

---
 .github/linters/.stylelintrc.json             | 12 +++++++
 web/src/components/emails/EmailDraft.tsx      |  4 +--
 .../components/emails/FullScreenContent.tsx   |  2 +-
 web/src/components/inputs/RichTextEditor.tsx  |  2 +-
 web/src/index.css                             | 32 +++++++++----------
 web/src/pages/EmailList.tsx                   |  4 +--
 web/src/pages/EmailView.tsx                   |  8 ++---
 web/src/pages/Root.tsx                        |  4 +--
 8 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 .github/linters/.stylelintrc.json

diff --git a/.github/linters/.stylelintrc.json b/.github/linters/.stylelintrc.json
new file mode 100644
index 0000000000..6f560e9fe8
--- /dev/null
+++ b/.github/linters/.stylelintrc.json
@@ -0,0 +1,12 @@
+{
+  "rules": {
+    "no-invalid-position-at-import-rule": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind"
+        ]
+      }
+    ]
+  }
+}
diff --git a/web/src/components/emails/EmailDraft.tsx b/web/src/components/emails/EmailDraft.tsx
index 858375720b..614923154a 100644
--- a/web/src/components/emails/EmailDraft.tsx
+++ b/web/src/components/emails/EmailDraft.tsx
@@ -34,7 +34,7 @@ export function EmailDraft(props: EmailDraftProps) {
   return (
     <div
       className={`flex w-full flex-col rounded bg-neutral-50 text-neutral-800 shadow-md dark:bg-neutral-800 dark:text-neutral-100 md:rounded-md ${
-        !isReply ? ' h-full max-h-full' : ''
+        !isReply ? 'h-full max-h-full' : ''
       }`}
     >
       {!isReply && (
@@ -129,7 +129,7 @@ export function EmailDraft(props: EmailDraftProps) {
         )
       }
 
-      <div className="flex flex-1 overflow-scroll overscroll-contain px-2 pt-3">
+      <div className="flex flex-1 px-2 pt-3">
         <RichTextEditor
           initialHtml={email.html || ''}
           handleChange={({ html, text }) => {
diff --git a/web/src/components/emails/FullScreenContent.tsx b/web/src/components/emails/FullScreenContent.tsx
index 6b6f4f4384..1ee7488a19 100644
--- a/web/src/components/emails/FullScreenContent.tsx
+++ b/web/src/components/emails/FullScreenContent.tsx
@@ -108,7 +108,7 @@ export default function FullScreenContent(props: FullScreenContentProps) {
   }
 
   return (
-    <div className="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800/40 px-36 py-20 dark:bg-zinc-900/90">
+    <div className="absolute top-0 left-0 w-full h-screen bg-neutral-800/40 px-2 pt-12 pb-2 md:px-36 md:py-20 dark:bg-zinc-900/90">
       <EmailDraft
         email={draftEmailsContext.activeEmail}
         handleEmailChange={handleEmailChange}
diff --git a/web/src/components/inputs/RichTextEditor.tsx b/web/src/components/inputs/RichTextEditor.tsx
index 540c599e61..a87c6069c3 100644
--- a/web/src/components/inputs/RichTextEditor.tsx
+++ b/web/src/components/inputs/RichTextEditor.tsx
@@ -98,7 +98,7 @@ export default function RichTextEditor(props: RichTextEditorProps) {
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className="relative flex h-full min-h-[12rem] w-full flex-col rounded text-left font-normal leading-5 md:rounded-md">
-        <div className="relative flex-1 overflow-scroll">
+        <div className="relative flex-1 overflow-scroll overscroll-contain">
           <RichTextPlugin
             contentEditable={
               <ContentEditable
diff --git a/web/src/index.css b/web/src/index.css
index d2f47cd4bd..56da617378 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -11,57 +11,57 @@
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
diff --git a/web/src/pages/EmailList.tsx b/web/src/pages/EmailList.tsx
index 9fa30a2a35..1355a2e82d 100644
--- a/web/src/pages/EmailList.tsx
+++ b/web/src/pages/EmailList.tsx
@@ -204,7 +204,7 @@ export default function EmailList() {
 
   return (
     <>
-      <div ref={menuRef} className="preflight mb-4">
+      <div ref={menuRef} className="preflight mb-4 px-2 md:px-0">
         <EmailMenuBar
           emailIDs={selected}
           handleBack={() => setSelected([])}
@@ -224,7 +224,7 @@ export default function EmailList() {
       </div>
       <div
         ref={emailViewRef}
-        className="preflight mb-4 overflow-scroll rounded-md"
+        className="preflight mb-4 overflow-scroll rounded-md px-2 md:px-0"
         onScroll={() => {
           if (!emailViewRef.current) return
           setScrollYPosition(emailViewRef.current.scrollTop)
diff --git a/web/src/pages/EmailView.tsx b/web/src/pages/EmailView.tsx
index c76028465e..86e10bda85 100644
--- a/web/src/pages/EmailView.tsx
+++ b/web/src/pages/EmailView.tsx
@@ -187,7 +187,7 @@ export default function EmailView() {
 
   return (
     <>
-      <div className="mb-4 preflight">
+      <div className="px-2 md:px-0 mb-4 preflight">
         <EmailMenuBar
           emailIDs={'messageID' in data ? [data.messageID] : []}
           handleBack={() => {
@@ -212,7 +212,7 @@ export default function EmailView() {
 
       <React.Suspense
         fallback={
-          <div className="mb-4 overflow-scroll rounded-md bg-neutral-50 p-3 dark:bg-neutral-800 dark:text-neutral-200">
+          <div className="px-2 md:px-0 mb-4 overflow-scroll rounded-md bg-neutral-50 p-3 dark:bg-neutral-800 dark:text-neutral-200">
             <span>Loading...</span>
           </div>
         }
@@ -220,7 +220,7 @@ export default function EmailView() {
         {data.type == 'email' && (
           <Await resolve={data.email}>
             {(email: Email) => (
-              <div className="h-full overflow-scroll pb-5">
+              <div className="h-full overflow-y-scroll pb-5 px-2 md:px-0">
                 <div className="mb-2 px-3">
                   <span className="text-xl font-normal dark:text-neutral-200">
                     {email.subject}
@@ -278,7 +278,7 @@ export default function EmailView() {
                   />
                 )}
                 {thread.draftID && !activeReplyEmail && (
-                  <div className="preflight mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800">
+                  <div className="preflight mb-4 rounded-md bg-neutral-50 p-3 dark:bg-neutral-800 w-full">
                     <div className="flex items-start justify-between">
                       <span className="text-red-300">[Draft]</span>
                       <span className="text-neutral-500 dark:text-neutral-300">
diff --git a/web/src/pages/Root.tsx b/web/src/pages/Root.tsx
index 7c5244e2fe..fc15e52e64 100644
--- a/web/src/pages/Root.tsx
+++ b/web/src/pages/Root.tsx
@@ -55,7 +55,7 @@ export default function Root() {
 
         <div
           className={
-            'max-h-screen max-w-screen flex-1 px-2 pt-4 md:px-8 md:pt-5 ' +
+            'h-screen max-w-full flex-1 pt-4 md:px-8 md:pt-5 ' +
             (sidebarOnMobile ? 'blur-sm' : '')
           }
         >
@@ -70,7 +70,7 @@ export default function Root() {
             </div>
           </span>
         ) : (
-          <span className="absolute md:hidden top-5">
+          <span className="absolute md:hidden top-5 px-2">
             <span className="p-2" onClick={() => setSidebarOnMobile(true)}>
               <Bars3Icon className="h-4 w-4 dark:text-white" />
             </span>