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.divdisplay: flex; justify-content: space-between; align-items: center;;
Inside it, buttons are grouped in an unnamed
with no className and no explicit display style:
{/* ← this div has no style */}
...
Because this wrapper
has display: block by default, it stretches to fill the available flex-item width, and each inside it also
expands to 100% block width — causing the vertical stack.
Confirmed via computed styles:
ToolbarContainer → display: flex, flex-direction: row ✓
└─
→ display: block ← THE BUG
└─ <button "Bold"> → width: 356px (stretched full block width)
└─ <button "Italic"> → width: 356px
└─ ...
With a fix applied (forcing display: flex on the wrapper), all buttons immediately align horizontally:
└─
→ display: flex, flex-direction: row, flex-wrap: wrap
└─ <button "Bold"> → width: 36px ✓
└─ <button "Italic"> → 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
with a styled component (recommended):
const ToolbarButtonGroup = styled.divdisplay: 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-дамп с числами, фикс в двух вариантах и воркэраунд для пользователей.
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 ✓
└─
└─ <button "Bold"> → width: 356px (stretched full block width)
└─ <button "Italic"> → width: 356px
└─ ...
With a fix applied (forcing display: flex on the wrapper), all buttons immediately align horizontally:
└─
└─ <button "Bold"> → width: 36px ✓
└─ <button "Italic"> → width: 36px ✓
Fix
In both files:
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-дамп с числами, фикс в двух вариантах и воркэраунд для пользователей.