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:
2026-06-30 13:47:15 -05:00
parent 103007e49a
commit 4c16040373

View File

@@ -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);