RunicGateway/website
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Activity

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

Merged
whitlocktech merged 1 commits from fix/rte-editor-sizing into main 2026-06-30 18:49:24 +00:00
Conversation 1 Commits 1 Files Changed 1 +27 -13
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/styles/theme.css
View File

@@ -326,25 +326,38 @@ button[disabled] {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
padding: 8px 10px; padding: 10px 12px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: var(--panel-flat); background: var(--panel-flat);
} }
.rte-btn { .rte-btn {
min-width: 30px; display: inline-flex;
height: 30px; align-items: center;
padding: 0 8px; justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 11px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: 7px;
background: transparent; background: transparent;
color: var(--muted); color: var(--muted);
font-family: var(--sans); font-family: var(--sans);
font-size: 0.85rem; font-size: 1rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s; 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]) { .rte-btn:hover:not([disabled]) {
background: var(--blue); background: var(--blue);
color: var(--ink); color: var(--ink);
@@ -365,12 +378,13 @@ button[disabled] {
background: var(--line); background: var(--line);
} }
.rte-content { .rte-content {
padding: 14px 16px; padding: 16px 18px;
max-height: 460px; max-height: min(640px, 65vh);
overflow-y: auto; /* Scroll both vertically and sideways (wide images, code blocks, tables). */
overflow: auto;
} }
.rte-content .ProseMirror { .rte-content .ProseMirror {
min-height: 220px; min-height: 320px;
outline: none; outline: none;
} }
.rte-content .ProseMirror p.is-editor-empty:first-child::before { .rte-content .ProseMirror p.is-editor-empty:first-child::before {
@@ -384,8 +398,8 @@ button[disabled] {
.rte-linkmenu { .rte-linkmenu {
position: absolute; position: absolute;
z-index: 20; z-index: 20;
top: 50px; top: 60px;
left: 10px; left: 12px;
width: min(360px, calc(100% - 20px)); width: min(360px, calc(100% - 20px));
padding: 10px; padding: 10px;
border: 1px solid var(--line); border: 1px solid var(--line);