From eb37b2dff069170b51063553a45f88e1c9496600 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 22 Jun 2026 13:12:47 +0800
Subject: [PATCH 1/2] fix: preview area same height as edit area

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

diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index d6d5495..640c04a 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -382,7 +382,7 @@ export default function Home() {
         </div>
 
         {/* Right side output panel */}
-        <div className="lg:w-2/5 flex flex-col lg:h-full h-[600px] p-6">
+        <div className="lg:w-2/5 flex flex-col p-6">
           <div className="flex justify-between items-center mb-4">
             <h2>{t('preview')}</h2>
             <div>
@@ -413,7 +413,7 @@ export default function Home() {
             </div>
           </div>
           <div
-            className={`right-side-preview-area border border-border-main leading-[1.5] space-y-3 p-4 flex-1 rounded-lg ${
+            className={`right-side-preview-area border border-border-main leading-[1.5] space-y-3 p-4 h-[600px] overflow-y-auto rounded-lg ${
               displayConfig.documentColor === DocumentColor.DARK
                 ? 'darkmode bg-gray-800 text-white'
                 : 'bg-white text-text-primary'

From 4b1fa348ea2d49c74286d89c977cec8e11e0a935 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Mon, 22 Jun 2026 13:44:01 +0800
Subject: [PATCH 2/2] fix(home): app-shell layout so only panes scroll, not the
 page

Pin the editor/preview area to viewport height and let each pane
scroll internally instead of growing the document:

- Wrap Home in a flex-column app shell (lg:h-screen lg:overflow-hidden)
  with main as flex-1, so panes fill viewport-minus-header without a
  hard-coded height.
- Make editor box and preview box flex-1 + min-h-0 so they scroll
  internally; preview box matches editor box height.
- Give preview box `relative` so see-mark's absolutely-positioned
  .sr-only MathML spans clip here instead of resolving against the
  viewport and adding phantom page scroll.
- EditIconsTab fills its container (h-full) and adds min-h-0 on flex
  ancestors so the category/template lists scroll to the last item
  instead of overflowing.
---
 src/components/edit-icons-tab.js |  9 +++++----
 src/pages/home/home.js           | 17 ++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/edit-icons-tab.js b/src/components/edit-icons-tab.js
index 3746ac1..6737458 100644
--- a/src/components/edit-icons-tab.js
+++ b/src/components/edit-icons-tab.js
@@ -79,7 +79,7 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
         as="div"
         selectedIndex={selectedMainTabIndex}
         onChange={setSelectedMainTabIndex}
-        className="flex flex-col w-full h-[600px] border-r border-border-main"
+        className="flex flex-col w-full h-full border-r border-border-main"
       >
         <Tab.List as="div" className="w-full flex items-center border-b border-border-main">
           {mainTabList.map(({ id }, index) => (
@@ -94,7 +94,7 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
             </Tab>
           ))}
         </Tab.List>
-        <Tab.Panels as="div" className="flex flex-1 h-full w-full">
+        <Tab.Panels as="div" className="flex flex-1 h-full w-full min-h-0">
           <Tab.Panel className="h-full w-full">
             <Tab.Group
               as="div"
@@ -107,7 +107,8 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
                   as="div"
                   className="flex flex-col px-2 py-3 gap-2 border-r border-border-main"
                   style={{
-                    maxHeight: '562px',
+                    maxHeight: '100%',
+                    minHeight: 0,
                     overflowY: 'auto',
                     scrollbarWidth: 'none', // hide scrollbar in Firefox
                     msOverflowStyle: 'none', // hide scrollbar in IE/Edge
@@ -130,7 +131,7 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
                     </Tooltip>
                   ))}
                 </Tab.List>
-                <Tab.Panels as="div" className="flex-1 px-2 py-3 overflow-y-auto">
+                <Tab.Panels as="div" className="flex-1 min-h-0 px-2 py-3 overflow-y-auto">
                   {mathTabList.map((mathTab) => {
                     return (
                       <Tab.Panel key={mathTab.id} className="flex flex-wrap gap-2">
diff --git a/src/pages/home/home.js b/src/pages/home/home.js
index 640c04a..5f25e52 100644
--- a/src/pages/home/home.js
+++ b/src/pages/home/home.js
@@ -315,16 +315,16 @@ export default function Home() {
   }
 
   return (
-    <>
+    <div className="flex flex-col lg:h-screen lg:overflow-hidden">
       <Header
         onImportClick={importClick}
         onExportClick={() => setShowSettingModal(true)}
         title={displayConfig.title}
         onTitleChange={(title) => setDisplayConfig({ title })}
       />
-      <main className="min-w-[768px] flex flex-col lg:flex-row">
+      <main className="min-w-[768px] flex flex-col lg:flex-row lg:flex-1 lg:min-h-0 lg:overflow-hidden">
         {/* Left side input panel */}
-        <div className="lg:w-3/5 bg-blue-50 p-6">
+        <div className="lg:w-3/5 bg-blue-50 p-6 flex flex-col lg:h-full min-h-0">
           <div className="flex items-center justify-between mb-4">
             <h2>{t('editContent')}</h2>
             <div className="flex items-center gap-2">
@@ -361,7 +361,7 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="flex h-[600px] border border-border-main bg-white rounded-lg overflow-hidden">
+          <div className="flex h-[600px] lg:h-auto lg:flex-1 min-h-0 border border-border-main bg-white rounded-lg overflow-hidden">
             <div className="w-1/3 flex-shrink-0 h-full">
               <EditIconsTab insertLatex={insertLatex} addImageToExport={addImageToExport} />
             </div>
@@ -382,7 +382,7 @@ export default function Home() {
         </div>
 
         {/* Right side output panel */}
-        <div className="lg:w-2/5 flex flex-col p-6">
+        <div className="lg:w-2/5 flex flex-col p-6 lg:h-full min-h-0">
           <div className="flex justify-between items-center mb-4">
             <h2>{t('preview')}</h2>
             <div>
@@ -412,8 +412,11 @@ export default function Home() {
               />
             </div>
           </div>
+          {/* `relative` makes this the containing block for the absolutely-positioned
+              `.sr-only` MathML spans see-mark emits, so they're clipped here instead of
+              resolving against the viewport and adding phantom page scroll. */}
           <div
-            className={`right-side-preview-area border border-border-main leading-[1.5] space-y-3 p-4 h-[600px] overflow-y-auto rounded-lg ${
+            className={`right-side-preview-area relative border border-border-main leading-[1.5] space-y-3 p-4 h-[600px] lg:h-auto lg:flex-1 min-h-0 overflow-y-auto rounded-lg ${
               displayConfig.documentColor === DocumentColor.DARK
                 ? 'darkmode bg-gray-800 text-white'
                 : 'bg-white text-text-primary'
@@ -441,6 +444,6 @@ export default function Home() {
           data={data}
         />
       </main>
-    </>
+    </div>
   );
 }