diff --git a/frontend/src/pages/EditorPage.jsx b/frontend/src/pages/EditorPage.jsx
index 0d8c8c5..de1bc50 100644
--- a/frontend/src/pages/EditorPage.jsx
+++ b/frontend/src/pages/EditorPage.jsx
@@ -204,22 +204,22 @@ export default function EditorPage() {
       <div className="editor-main">
         <div className="editor-topbar">
           <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
               className={`btn btn-ghost${chapterOpen ? ' active' : ''}`}
               onClick={() => setChapterOpen(o => !o)}
               title="Toggle chapter list"
-            >☰ Chapters</button>
+            >☰ <span>Chapters</span></button>
             <button
               className={`btn btn-ghost${focusMode ? ' active' : ''}`}
               onClick={() => setFocusMode(f => !f)}
               title="Focus mode (F11 or Alt+Z)"
-            >{focusMode ? '⊠ Exit Focus' : '⊡ Focus'}</button>
+            >{focusMode ? '⊠' : '⊡'} <span>{focusMode ? 'Exit Focus' : 'Focus'}</span></button>
           </div>
           <div className="topbar-right">
             <div className="prompt-wrap">
               <button className="btn btn-ghost" onClick={fetchPrompt} disabled={promptLoading} title="Get a writing prompt">
-                {promptLoading ? '…' : '💡 Prompt'}
+                {promptLoading ? '…' : <>💡 <span>Prompt</span></>}
               </button>
               {promptText && (
                 <div className="prompt-popover">
@@ -234,7 +234,7 @@ export default function EditorPage() {
             </div>
             <span className={`save-status save-status--${saveStatus}`}>{statusLabel[saveStatus]}</span>
             <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 && (
                 <div className="export-menu">
                   <button onClick={() => handleExport('pdf')}>PDF (print)</button>
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 03e32a9..96ab45c 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -92,7 +92,7 @@
   padding: 0;
 }
 
-html { height: 100%; }
+html { height: 100%; overflow-x: hidden; }
 
 body {
   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 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; }
 
   .login-box { padding: 2.25rem 1.5rem 2rem; }