From 20e5597104c4349df61c112899fab42227ad8c19 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Fri, 13 Oct 2023 23:26:56 +0800
Subject: [PATCH] chore: fix memo container max width

---
 web/src/components/HomeSidebar.tsx         | 6 +++---
 web/src/components/MobileHeader.tsx        | 2 +-
 web/src/labs/marked/parser/BlockLatex.tsx  | 6 +++++-
 web/src/labs/marked/parser/InlineLatex.tsx | 6 +++++-
 web/src/pages/Archived.tsx                 | 2 +-
 web/src/pages/Home.tsx                     | 2 +-
 web/src/pages/Setting.tsx                  | 2 +-
 7 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index d09c6754..583ddfaf 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -9,18 +9,18 @@ const HomeSidebar = () => {
 
   return (
     <div
-      className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
+      className={`fixed lg:sticky top-0 left-0 w-full lg:w-56 h-full shrink-0 pointer-events-none lg:pointer-events-auto z-10 ${
         showHomeSidebar && "pointer-events-auto"
       }`}
     >
       <div
-        className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
+        className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 lg:!hidden ${
           showHomeSidebar && "opacity-60 pointer-events-auto"
         }`}
         onClick={() => layoutStore.setHomeSidebarStatus(false)}
       ></div>
       <aside
-        className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
+        className={`absolute lg:relative top-0 right-0 w-56 pr-2 lg:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 lg:bg-transparent lg:shadow-none transition-all duration-300 translate-x-full lg:translate-x-0 ${
           showHomeSidebar && "!translate-x-0 shadow-2xl"
         }`}
       >
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index 43680b17..d06197d3 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -12,7 +12,7 @@ const MobileHeader = (props: Props) => {
   const [titleText] = useState("MEMOS");
 
   return (
-    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
+    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex lg:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
         <div
           className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"
diff --git a/web/src/labs/marked/parser/BlockLatex.tsx b/web/src/labs/marked/parser/BlockLatex.tsx
index 7a98bad4..902508a9 100644
--- a/web/src/labs/marked/parser/BlockLatex.tsx
+++ b/web/src/labs/marked/parser/BlockLatex.tsx
@@ -25,7 +25,11 @@ const blockRenderer = (rawStr: string) => {
     latexCode = matchResult[3];
   }
 
-  return <TeX block={true}>{latexCode}</TeX>;
+  return (
+    <div className="w-full max-w-full overflow-x-auto">
+      <TeX block={true}>{latexCode}</TeX>
+    </div>
+  );
 };
 
 export default {
diff --git a/web/src/labs/marked/parser/InlineLatex.tsx b/web/src/labs/marked/parser/InlineLatex.tsx
index bf3cecb7..be9be949 100644
--- a/web/src/labs/marked/parser/InlineLatex.tsx
+++ b/web/src/labs/marked/parser/InlineLatex.tsx
@@ -12,7 +12,11 @@ const inlineRenderer = (rawStr: string) => {
     } else if (matchResult[2]) {
       latexCode = matchResult[2];
     }
-    return <TeX key={latexCode}>{latexCode}</TeX>;
+    return (
+      <div className="w-full max-w-full overflow-x-auto">
+        <TeX key={latexCode}>{latexCode}</TeX>
+      </div>
+    );
   }
   return rawStr;
 };
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 5b0e45f7..e3f3cb2a 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -36,7 +36,7 @@ const Archived = () => {
   }, [memos, textQuery]);
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="archived-memo-page">
         <MemoFilter />
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 7d78d4f4..9cde12f3 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -7,7 +7,7 @@ import MobileHeader from "@/components/MobileHeader";
 const Home = () => {
   return (
     <div className="w-full flex flex-row justify-start items-start">
-      <div className="flex-grow shrink w-auto px-4 sm:px-2 sm:pt-4">
+      <div className="grow shrink w-auto max-w-full px-4 lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
         <MobileHeader />
         <div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index 7585273a..c2cec571 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -43,7 +43,7 @@ const Setting = () => {
   };
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col md:flex-row justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="setting-page-wrapper">
         <div className="section-selector-container">