Fix #6: larger RTE toolbar buttons + bigger, both-axis-scrolling editor #8

wtclaude · 2026-06-30T18:47:50Z

wtclaude commented

2026-06-30 18:47:50 +00:00

Closes #6.

Summary

Makes the rich-text editor's toolbar buttons larger and clearer, enlarges the editor body, and lets it scroll both vertically and sideways. The change lives in the shared .rte* styles, so it applies to every rich-text editor on the site — the wiki editor, the post editor, and any added later.

What the issue asked for

The add pic and link … need to be bigger … the main rte editor should be a bit bigger overall and should be able to scroll sideways and vertically. Also these changes should apply to all rich text editors on the site.

Changes (`client/src/styles/theme.css`)

Toolbar buttons: 30px → 38px, base font 0.85rem → 1rem; roomier toolbar padding/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 (bigger overall).
Both-axis scrolling: overflow-y: auto → overflow: auto, so wide images / code blocks / tables can scroll sideways as well as vertically.
Nudged the internal-link popover offset to match the taller toolbar.

Scope

Single shared component → applies to all editors site-wide. No JS, schema, or dependency changes.

Verification

Verified in a live Wiki editor: toolbar buttons render at 38px tall (link & image glyphs at 20px), editor body max-height resolves to min(640px, 65vh) with both overflow-x and overflow-y set to auto, and ProseMirror min-height is 320px.

Follow-up (not in this PR)

In a headless browser the image button's emoji (🖼) rendered as a missing-glyph box — almost certainly an emoji-font quirk of that environment, but if we want toolbar icons guaranteed-consistent everywhere, replacing the emoji glyphs with inline SVG icons would be a good follow-up.

Closes #6. ## Summary Makes the rich-text editor's toolbar buttons larger and clearer, enlarges the editor body, and lets it scroll both vertically and sideways. The change lives in the **shared** `.rte*` styles, so it applies to **every** rich-text editor on the site — the wiki editor, the post editor, and any added later. ## What the issue asked for > The add pic and link … need to be bigger … the main rte editor should be a bit bigger overall and should be able to scroll sideways and vertically. Also these changes should apply to all rich text editors on the site. ## Changes (`client/src/styles/theme.css`) - **Toolbar buttons:** `30px → 38px`, base font `0.85rem → 1rem`; roomier toolbar padding/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` (bigger overall). - **Both-axis scrolling:** `overflow-y: auto → overflow: auto`, so wide images / code blocks / tables can scroll sideways as well as vertically. - Nudged the internal-link popover offset to match the taller toolbar. ## Scope Single shared component → applies to all editors site-wide. No JS, schema, or dependency changes. ## Verification Verified in a live Wiki editor: toolbar buttons render at 38px tall (link & image glyphs at 20px), editor body `max-height` resolves to `min(640px, 65vh)` with both `overflow-x` and `overflow-y` set to `auto`, and ProseMirror `min-height` is 320px. ## Follow-up (not in this PR) In a headless browser the image button's emoji (🖼) rendered as a missing-glyph box — almost certainly an emoji-font quirk of that environment, but if we want toolbar icons guaranteed-consistent everywhere, replacing the emoji glyphs with inline SVG icons would be a good follow-up.

wtclaude added 1 commit 2026-06-30 18:47:52 +00:00

Fix #6 : larger RTE toolbar buttons + bigger, both-axis-scrolling editor 4c16040373

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>

whitlocktech approved these changes 2026-06-30 18:49:12 +00:00

whitlocktech left a comment

Appropriate fix

whitlocktech merged commit 52c74db825 into main

2026-06-30 18:49:24 +00:00

whitlocktech referenced this issue from a commit

2026-06-30 18:49:26 +00:00

Merge pull request 'Fix #6: larger RTE toolbar buttons + bigger, both-axis-scrolling editor' (#8) from fix/rte-editor-sizing into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/website#8