Toolbar buttons render vertically in both markdown and richtext widgets — unnamed wrapper div missing display: flex
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
Bug Report: Toolbar buttons stack vertically instead of rendering in a horizontal row
Affects: decap-cms-widget-markdown and decap-cms-widget-richtext (introduced/worsened in 3.12.x)
Reproducible: Yes, consistently — confirmed via DOM inspection in Chrome and Playwright headless.
---
What happens
The markdown/richtext editor toolbar renders all formatting buttons (Bold, Italic, Strikethrough, Code, Link, Headings, Quote, Lists) stacked
vertically in a single column instead of a horizontal row.
Root cause
In both Toolbar.js files, the ToolbarContainer is a flex container with justify-content: space-between:
const ToolbarContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
`;
Inside it, buttons are grouped in an unnamed
...
Because this wrapper
expands to 100% block width — causing the vertical stack.
Confirmed via computed styles:
ToolbarContainer → display: flex, flex-direction: row ✓
└─
└─
└─ → width: 356px
└─ ...
With a fix applied (forcing display: flex on the wrapper), all buttons immediately align horizontally:
└─
└─
└─ → width: 36px ✓
---
Fix
In both files:
- packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js
- packages/decap-cms-widget-richtext/src/RichtextControl/components/Toolbar/Toolbar.js
Option A — replace the anonymous
const ToolbarButtonGroup = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 2px;
`;
...
Option B — minimal one-liner (quick fix):
...
---
Workaround (for users affected right now)
If you load Decap CMS from CDN and cannot pin the version, inject this CSS after the CMS script loads:
const style = document.createElement('style');
style.textContent = `
[class*="ToolbarContainer"] > div:not([class]) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
[class*="ToolbarContainer"] > div:not([class]) > button {
width: auto !important;
}
`;
document.head.appendChild(style);
---
Хочешь — вставляй как есть на GitHub Issues. Там всё: причина, DOM-дамп с числами, фикс в двух вариантах и воркэраунд для пользователей.
Contributor guide
Assessment
This issue has not been assessed yet.