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 d6d5495..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 lg:h-full h-[600px] 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 flex-1 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>
   );
 }