From 8b6123c8f1fc0271a8340187f4d6ee1a0c0d4f13 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 18 May 2026 18:35:01 +0800
Subject: [PATCH 1/3] feat: stack right col below left col at 1024 breakpoint

---
 src/pages/home/home.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index f8f5d6d..b47d006 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -322,9 +322,9 @@ export default function Home() {
         title={displayConfig.title}
         onTitleChange={(title) => setDisplayConfig({ title })}
       />
-      <main className="pt-[72px] flex flex-col md:flex-row overflow-x-hidden overflow-y-auto">
+      <main className="pt-[72px] min-w-[1024px] flex flex-col lg:flex-row">
         {/* Left side input panel */}
-        <div className="md:w-3/5 bg-blue-50 p-6">
+        <div className="lg:w-3/5 bg-blue-50 p-6">
           <div className="flex items-center justify-between mb-4">
             <h2>{t('editContent')}</h2>
             <div className="flex items-center gap-2">
@@ -378,7 +378,7 @@ export default function Home() {
         </div>
 
         {/* Right side output panel */}
-        <div className="md:w-2/5 flex flex-col md:h-full h-[600px] p-6">
+        <div className="lg:w-2/5 flex flex-col lg:h-full h-[600px] p-6">
           <div className="flex justify-between items-center mb-4">
             <h2>{t('preview')}</h2>
             <div>

From 17be4e2ce2b511ab1f6daba73bcc83907c04a0bf Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 18 May 2026 18:39:02 +0800
Subject: [PATCH 2/3] feat: minimun page width 768px

---
 src/pages/home/home.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index b47d006..509a320 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -322,7 +322,7 @@ export default function Home() {
         title={displayConfig.title}
         onTitleChange={(title) => setDisplayConfig({ title })}
       />
-      <main className="pt-[72px] min-w-[1024px] flex flex-col lg:flex-row">
+      <main className="pt-[72px] min-w-[768px] flex flex-col lg:flex-row">
         {/* Left side input panel */}
         <div className="lg:w-3/5 bg-blue-50 p-6">
           <div className="flex items-center justify-between mb-4">

From d1ae43be260ca3f2d4fad5cdc7c3a67d1928769f Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 18 May 2026 18:56:01 +0800
Subject: [PATCH 3/3] chore: minor adjust in style to fit rwd

---
 src/components/header/index.js         | 12 ++++++++----
 src/components/header/language-menu.js |  6 +++++-
 src/components/header/menu.js          |  2 +-
 src/pages/home/home.js                 |  4 ++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/header/index.js b/src/components/header/index.js
index 70b4a3e..b76cb01 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -14,7 +14,7 @@ const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
   const [showTipModal, setShowTipModal] = useState(false);
 
   return (
-    <header className="px-6 fixed h-[72px] flex items-center gap-2 bg-white inset-x-0 z-10 shadow-shadow2">
+    <header className="px-6 sticky top-0 min-w-[768px] h-[72px] flex items-center gap-2 bg-white z-10 shadow-shadow2">
       <div className="flex items-center gap-3 grow">
         <h1 className="sr-only">Access8Math</h1>
         <A8mLogo aria-hidden="true" />
@@ -31,7 +31,7 @@ const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
       <div className="flex items-center gap-3">
         <Button
           variant="tertiary"
-          className="min-w-[88px] flex items-center gap-1"
+          className="min-w-[64px] lg:min-w-[88px] flex items-center gap-1"
           onClick={() => setShowTipModal(true)}
         >
           <IconBulb size={16} aria-hidden="true" />
@@ -39,10 +39,14 @@ const Header = ({ onImportClick, onExportClick, title, onTitleChange }) => {
         </Button>
         <Menu />
         <LanguageMenu />
-        <Button variant="secondary" className="min-w-[88px]" onClick={onImportClick}>
+        <Button
+          variant="secondary"
+          className="min-w-[64px] lg:min-w-[88px]"
+          onClick={onImportClick}
+        >
           {t('import')}
         </Button>
-        <Button variant="primary" className="min-w-[88px]" onClick={onExportClick}>
+        <Button variant="primary" className="min-w-[64px] lg:min-w-[88px]" onClick={onExportClick}>
           {t('export')}
         </Button>
       </div>
diff --git a/src/components/header/language-menu.js b/src/components/header/language-menu.js
index 31e075d..2d547bc 100644
--- a/src/components/header/language-menu.js
+++ b/src/components/header/language-menu.js
@@ -25,7 +25,11 @@ const LanguageMenu = () => {
   return (
     <DropdownMenu
       triggerButton={
-        <Button variant="tertiary" className="min-w-[88px]" aria-label={t('changeLocale')}>
+        <Button
+          variant="tertiary"
+          className="min-w-[64px] lg:min-w-[88px]"
+          aria-label={t('changeLocale')}
+        >
           <IconLanguage size={16} className="flex-none mr-1" aria-hidden="true" />
           <span>{t(`locale.${i18n.language}`)}</span>
         </Button>
diff --git a/src/components/header/menu.js b/src/components/header/menu.js
index 73c9e6f..94b8c3a 100644
--- a/src/components/header/menu.js
+++ b/src/components/header/menu.js
@@ -64,7 +64,7 @@ const NativeMenu = () => {
   return (
     <DropdownMenu
       triggerButton={
-        <Button variant="tertiary" className="min-w-[88px]" aria-label={t('more')}>
+        <Button variant="tertiary" className="min-w-[64px] lg:min-w-[88px]" aria-label={t('more')}>
           <IconDots size={16} className="flex-none mr-1" aria-hidden="true" />
           <span>{t('more')}</span>
         </Button>
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 509a320..0e3dee5 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -322,7 +322,7 @@ export default function Home() {
         title={displayConfig.title}
         onTitleChange={(title) => setDisplayConfig({ title })}
       />
-      <main className="pt-[72px] min-w-[768px] flex flex-col lg:flex-row">
+      <main className="min-w-[768px] flex flex-col lg:flex-row">
         {/* Left side input panel */}
         <div className="lg:w-3/5 bg-blue-50 p-6">
           <div className="flex items-center justify-between mb-4">
@@ -336,7 +336,7 @@ export default function Home() {
                   items={latexDelimiterOptions}
                   value={displayConfig.latexDelimiter}
                   onChange={(option) => setDisplayConfig({ latexDelimiter: option })}
-                  buttonClassName="w-[88px] h-7"
+                  buttonClassName="w-[64px] h-7"
                 />
               </div>
               <Button variant="secondary" onClick={insertMark}>