Fix #6: larger RTE toolbar buttons + bigger, both-axis-scrolling editor
The shared rich-text editor's toolbar buttons (especially the link and image icons) were too small, and the editor body was short and only scrolled vertically. These styles are shared by every RichTextEditor on the site, so the fix applies to the wiki editor, the post editor, and any future ones. - Toolbar buttons: 30px -> 38px, base font 0.85rem -> 1rem, with roomier toolbar padding and gap. - Icon (glyph) buttons (Link, Insert image, wiki-page, Quote, Divider, Undo, Redo) bumped to 1.25rem so they read clearly. - Editor body: max-height 460px -> min(640px, 65vh); ProseMirror min-height 220px -> 320px. - Body now scrolls both ways: overflow-y:auto -> overflow:auto (wide images, code blocks, tables can scroll sideways). - Nudged the internal-link popover offset to match the taller toolbar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -326,25 +326,38 @@ button[disabled] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: var(--panel-flat);
|
||||
}
|
||||
.rte-btn {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 11px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-family: var(--sans);
|
||||
font-size: 0.85rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s, color 0.12s, border-color 0.12s;
|
||||
}
|
||||
/* Icon (glyph) buttons render larger so picture/link/etc. read clearly. */
|
||||
.rte-btn[title="Link"],
|
||||
.rte-btn[title="Insert image"],
|
||||
.rte-btn[title="Link to another wiki page"],
|
||||
.rte-btn[title="Quote"],
|
||||
.rte-btn[title="Divider"],
|
||||
.rte-btn[title="Undo"],
|
||||
.rte-btn[title="Redo"] {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.rte-btn:hover:not([disabled]) {
|
||||
background: var(--blue);
|
||||
color: var(--ink);
|
||||
@@ -365,12 +378,13 @@ button[disabled] {
|
||||
background: var(--line);
|
||||
}
|
||||
.rte-content {
|
||||
padding: 14px 16px;
|
||||
max-height: 460px;
|
||||
overflow-y: auto;
|
||||
padding: 16px 18px;
|
||||
max-height: min(640px, 65vh);
|
||||
/* Scroll both vertically and sideways (wide images, code blocks, tables). */
|
||||
overflow: auto;
|
||||
}
|
||||
.rte-content .ProseMirror {
|
||||
min-height: 220px;
|
||||
min-height: 320px;
|
||||
outline: none;
|
||||
}
|
||||
.rte-content .ProseMirror p.is-editor-empty:first-child::before {
|
||||
@@ -384,8 +398,8 @@ button[disabled] {
|
||||
.rte-linkmenu {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 50px;
|
||||
left: 10px;
|
||||
top: 60px;
|
||||
left: 12px;
|
||||
width: min(360px, calc(100% - 20px));
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line);
|
||||
|
||||
Reference in New Issue
Block a user