chris/write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile topbar horizontal overflow

Browse Source 
Wrap button labels in spans so the existing hide-on-mobile rule fires.
Hide all topbar text labels and save status on small screens, leaving
only icons. Add overflow-x: hidden to html as a safety net.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chris 2026-05-11 15:48:41 -04:00
parent 219fd87e5e
commit 88e4441222
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/pages/EditorPage.jsx
View File

@ -204,22 +204,22 @@ export default function EditorPage() {
<div className="editor-main"> <div className="editor-main">
<div className="editor-topbar"> <div className="editor-topbar">
<div className="topbar-left"> <div className="topbar-left">
<button onClick={goBack} className="btn btn-ghost back-btn">← Stories</button> <button onClick={goBack} className="btn btn-ghost back-btn">← <span>Stories</span></button>
<button <button
className={`btn btn-ghost${chapterOpen ? ' active' : ''}`} className={`btn btn-ghost${chapterOpen ? ' active' : ''}`}
onClick={() => setChapterOpen(o => !o)} onClick={() => setChapterOpen(o => !o)}
title="Toggle chapter list" title="Toggle chapter list"
>☰ Chapters</button> >☰ <span>Chapters</span></button>
<button <button
className={`btn btn-ghost${focusMode ? ' active' : ''}`} className={`btn btn-ghost${focusMode ? ' active' : ''}`}
onClick={() => setFocusMode(f => !f)} onClick={() => setFocusMode(f => !f)}
title="Focus mode (F11 or Alt+Z)" title="Focus mode (F11 or Alt+Z)"
>{focusMode ? '⊠ Exit Focus' : '⊡ Focus'}</button> >{focusMode ? '⊠' : '⊡'} <span>{focusMode ? 'Exit Focus' : 'Focus'}</span></button>
</div> </div>
<div className="topbar-right"> <div className="topbar-right">
<div className="prompt-wrap"> <div className="prompt-wrap">
<button className="btn btn-ghost" onClick={fetchPrompt} disabled={promptLoading} title="Get a writing prompt"> <button className="btn btn-ghost" onClick={fetchPrompt} disabled={promptLoading} title="Get a writing prompt">
{promptLoading ? '…' : '💡 Prompt'} {promptLoading ? '…' : <>💡 <span>Prompt</span></>}
</button> </button>
{promptText && ( {promptText && (
<div className="prompt-popover"> <div className="prompt-popover">
@ -234,7 +234,7 @@ export default function EditorPage() {
</div> </div>
<span className={`save-status save-status--${saveStatus}`}>{statusLabel[saveStatus]}</span> <span className={`save-status save-status--${saveStatus}`}>{statusLabel[saveStatus]}</span>
<div className="export-wrap"> <div className="export-wrap">
<button className="btn btn-ghost" onClick={() => setExportOpen(o => !o)}>Export ▾</button> <button className="btn btn-ghost" onClick={() => setExportOpen(o => !o)}><span>Export</span> ▾</button>
{exportOpen && ( {exportOpen && (
<div className="export-menu"> <div className="export-menu">
<button onClick={() => handleExport('pdf')}>PDF (print)</button> <button onClick={() => handleExport('pdf')}>PDF (print)</button>

8
frontend/src/styles/index.css
View File

@ -92,7 +92,7 @@
padding: 0; padding: 0;
} }
html { height: 100%; } html { height: 100%; overflow-x: hidden; }
body { body {
background: var(--bg); background: var(--bg);
@ -1233,7 +1233,11 @@ button { cursor: pointer; font-family: inherit; }
.editor-body .ProseMirror { padding: 1rem 1.1rem; font-size: 1rem; } .editor-body .ProseMirror { padding: 1rem 1.1rem; font-size: 1rem; }
.editor-body .ProseMirror h1 { font-size: 1.4rem; } .editor-body .ProseMirror h1 { font-size: 1.4rem; }
.topbar-left .btn:not(.back-btn) span { display: none; } .editor-topbar { padding: 0.4rem 0.5rem; gap: 0.25rem; }
.topbar-left, .topbar-right { gap: 0.25rem; }
.editor-topbar .btn-ghost { padding: 0.35rem 0.5rem; font-size: 0.72rem; }
.topbar-left span, .topbar-right span { display: none; }
.save-status { display: none; }
.cover-img { max-height: 160px; } .cover-img { max-height: 160px; }
.login-box { padding: 2.25rem 1.5rem 2rem; } .login-box { padding: 2.25rem 1.5rem 2rem; }