Skip to content

fix: keep page height fixed and scroll editor/preview panes internally #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wendyyuchensun merged 2 commits into from
Jun 29, 2026
Merged

fix: keep page height fixed and scroll editor/preview panes internally #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb37b2d
fix: preview area same height as edit area
wendyyuchensun Jun 22, 2026
4b1fa34
fix(home): app-shell layout so only panes scroll, not the page
wendyyuchensun Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/edit-icons-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand All @@ -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"
Expand All @@ -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
Expand All @@ -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">
Expand Down
17 changes: 10 additions & 7 deletions src/pages/home/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -441,6 +444,6 @@ export default function Home() {
data={data}
/>
</main>
</>
</div>
);
}