diff --git a/ts/editor-toolbar/ButtonBar.svelte b/ts/editor-toolbar/ButtonBar.svelte
deleted file mode 100644
index 50e1d9601..000000000
--- a/ts/editor-toolbar/ButtonBar.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<style lang="scss">
-    ul {
-        padding-inline-start: 0;
-        margin-bottom: 0;
-    }
-</style>
-
-<ul>
-    <slot />
-</ul>
diff --git a/ts/editor-toolbar/ButtonBarOuter.svelte b/ts/editor-toolbar/ButtonBarOuter.svelte
deleted file mode 100644
index 48231e41f..000000000
--- a/ts/editor-toolbar/ButtonBarOuter.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<style lang="scss">
-    div {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        position: sticky;
-        top: 0;
-        left: 0;
-        z-index: 5;
-        padding: 2px;
-
-        background: var(--bg-color);
-    }
-</style>
-
-<div>
-    <slot />
-</div>
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 2b531f5b1..4bb2d857a 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,34 +1,55 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
+    type Buttons =
+        | { component: SvelteComponent; [...arg: string]: unknown }
+        | Buttons[];
+
+    export let buttons: Buttons;
 </script>
 
 <style lang="scss">
     ul {
         display: inline-block;
-        padding-inline-start: 0;
 
-        margin-left: 0.25rem;
-        margin-right: 0.25rem;
+        padding-inline-start: 0;
+        margin-bottom: 0;
 
         & :global(button) {
             margin-left: -1px;
         }
+    }
 
-        & > :global(li:nth-child(1) button) {
-            margin-left: 0px;
-            border-top-left-radius: 0.35rem;
-            border-bottom-left-radius: 0.35rem;
+    li {
+        display: inline-block;
+        margin-bottom: 2px;
+
+        &:nth-child(1) {
+            margin-left: 0.25rem;
+
+            & > :global(button) {
+                border-top-left-radius: 0.25rem;
+                border-bottom-left-radius: 0.25rem;
+            }
         }
 
-        & > :global(li:nth-last-child(1) button) {
-            border-top-right-radius: 0.35rem;
-            border-bottom-right-radius: 0.35rem;
+        &:nth-last-child(1) {
+            margin-right: 0.25rem;
+
+            & > :global(button) {
+                border-top-right-radius: 0.25rem;
+                border-bottom-right-radius: 0.25rem;
+            }
         }
     }
 </style>
 
-<ButtonItem>
-    <ul>
-        <slot />
-    </ul>
-</ButtonItem>
+<ul>
+    {#each buttons as button}
+        <li>
+            {#if Array.isArray(button)}
+                <svelte:self buttons={button} />
+            {:else}
+                <svelte:component this={button.component} {...button} />
+            {/if}
+        </li>
+    {/each}
+</ul>
diff --git a/ts/editor-toolbar/ButtonItem.svelte b/ts/editor-toolbar/ButtonItem.svelte
deleted file mode 100644
index 82eeda646..000000000
--- a/ts/editor-toolbar/ButtonItem.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<style lang="scss">
-    li {
-        display: inline-block;
-        margin-bottom: 2px;
-    }
-</style>
-
-<li>
-    <slot />
-</li>
diff --git a/ts/editor-toolbar/ColorPicker.svelte b/ts/editor-toolbar/ColorPicker.svelte
index eec03047f..6ccc7ca20 100644
--- a/ts/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor-toolbar/ColorPicker.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let className: string;
     export let onChange: (event: ChangeEvent) => void;
 </script>
@@ -28,8 +26,6 @@
     }
 </style>
 
-<ButtonItem>
-    <button>
-        <span class={className}> <input type="color" on:change={onChange} /> </span>
-    </button>
-</ButtonItem>
+<button>
+    <span class={className}> <input type="color" on:change={onChange} /> </span>
+</button>
diff --git a/ts/editor-toolbar/CommandIconButton.svelte b/ts/editor-toolbar/CommandIconButton.svelte
index 6e417fce3..2513c04bf 100644
--- a/ts/editor-toolbar/CommandIconButton.svelte
+++ b/ts/editor-toolbar/CommandIconButton.svelte
@@ -26,7 +26,6 @@
 </script>
 
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -50,8 +49,6 @@
     }
 </script>
 
-<ButtonItem>
-    <InnerButton {className} {active} {onClick}>
-        {@html icon}
-    </InnerButton>
-</ButtonItem>
+<InnerButton {className} {active} {onClick}>
+    {@html icon}
+</InnerButton>
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 2d4d2f758..ede95cab5 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonBarOuter from "./ButtonBarOuter.svelte";
-    import ButtonBar from "./ButtonBar.svelte";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     import LabelButton from "./LabelButton.svelte";
@@ -48,14 +46,21 @@
     console.log(nightMode);
 </script>
 
-<ButtonBarOuter>
-    <ButtonBar>
-        {#each buttons as group}
-            <ButtonGroup>
-                {#each group as button}
-                    <svelte:component this={button.component} {...button} />
-                {/each}
-            </ButtonGroup>
-        {/each}
-    </ButtonBar>
-</ButtonBarOuter>
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        padding: 2px;
+
+        background: var(--bg-color);
+    }
+</style>
+
+<div>
+    <ButtonGroup {buttons} />
+</div>
diff --git a/ts/editor-toolbar/IconButton.svelte b/ts/editor-toolbar/IconButton.svelte
index 5588ddbc7..613a53433 100644
--- a/ts/editor-toolbar/IconButton.svelte
+++ b/ts/editor-toolbar/IconButton.svelte
@@ -1,5 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
     import InnerButton from "./InnerButton.svelte";
 
     export let className = "";
@@ -7,8 +6,6 @@
     export let onClick: (event: ClickEvent) => void;
 </script>
 
-<ButtonItem>
-    <InnerButton {className} {onClick}>
-        {@html icon}
-    </InnerButton>
-</ButtonItem>
+<InnerButton {className} {onClick}>
+    {@html icon}
+</InnerButton>
diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 89c3488af..5e7c34049 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import ButtonItem from "./ButtonItem.svelte";
-
     export let label: string;
 </script>
 
@@ -20,6 +18,4 @@
     }
 </style>
 
-<ButtonItem>
-    <button type="button" class="btn btn-secondary" on:click> {label} </button>
-</ButtonItem>
+<button type="button" class="btn btn-secondary" on:click> {label} </button>
diff --git a/ts/editor/editable.scss b/ts/editor/editable.scss
index 9cd7186f3..8a2e9e374 100644
--- a/ts/editor/editable.scss
+++ b/ts/editor/editable.scss
@@ -6,6 +6,9 @@ anki-editable {
     overflow: auto;
     padding: 6px;
 
+    /* Fit bootstraps .rounded */
+    border-radius: 0.25rem;
+
     &:empty::after {
         content: "\a";
         white-space: pre;
diff --git a/ts/editor/editingArea.ts b/ts/editor/editingArea.ts
index 737493f6b..3db206d6e 100644
--- a/ts/editor/editingArea.ts
+++ b/ts/editor/editingArea.ts
@@ -24,7 +24,7 @@ export class EditingArea extends HTMLDivElement {
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.className = "field";
+        this.className = "field rounded";
 
         const rootStyle = document.createElement("link");
         rootStyle.setAttribute("rel", "stylesheet");