diff --git a/qt/aqt/addcards.py b/qt/aqt/addcards.py
index c564340a4..63f38829f 100644
--- a/qt/aqt/addcards.py
+++ b/qt/aqt/addcards.py
@@ -68,21 +68,31 @@ class AddCards(QDialog):
 
             editor.web.eval(
                 f"""
-const notetypeChooser = editorToolbar.labelButton({{
-    label: `Choose note type`,
-    onClick: () => bridgeCommand("choosenotetype"),
-    disables: false,
+const notetypeChooser = editorToolbar.withLabel({{
+    label: `{tr.notetypes_type()}`,
+    className: "flex-grow-1",
+    button: editorToolbar.labelButton({{
+        label: `Choose note type`,
+        className: "flex-grow-1",
+        onClick: () => bridgeCommand("choosenotetype"),
+        disables: false,
+    }})
 }});
 
-const deckChooser = editorToolbar.labelButton({{
-    label: `Choose deck`,
-    onClick: () => bridgeCommand("choosedeck"),
-    disables: false,
+const deckChooser = editorToolbar.withLabel({{
+    label: `{tr.decks_deck()}`,
+    className: "flex-grow-1",
+    button: editorToolbar.labelButton({{
+        label: `Choose deck`,
+        className: "flex-grow-1",
+        onClick: () => bridgeCommand("choosedeck"),
+        disables: false,
+    }})
 }});
 
 $editorToolbar.insertButton(editorToolbar.buttonGroup({{
     id: "choosers",
-    fullWidth: true,
+    className: "flex-basis-100",
     items: [notetypeChooser, deckChooser],
 }}), 0);
 """
diff --git a/ts/editor-toolbar/ButtonGroup.d.ts b/ts/editor-toolbar/ButtonGroup.d.ts
index cbf4376ff..f5f273e45 100644
--- a/ts/editor-toolbar/ButtonGroup.d.ts
+++ b/ts/editor-toolbar/ButtonGroup.d.ts
@@ -6,4 +6,5 @@ export interface ButtonGroupProps {
     id: string;
     className?: string;
     items: ToolbarItem[];
+    fullWidth?: boolean;
 }
diff --git a/ts/editor-toolbar/DropdownMenu.svelte b/ts/editor-toolbar/DropdownMenu.svelte
index 4fdfcadce..f616dd0a5 100644
--- a/ts/editor-toolbar/DropdownMenu.svelte
+++ b/ts/editor-toolbar/DropdownMenu.svelte
@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index b09f9897a..7460ad68a 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -24,7 +24,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
-    import type { ButtonGroupProps } from "./ButtonGroup";
 
     export let buttons: Readable<IterableToolbarItem>[];
     export let menus: Readable<ToolbarItem[]>;
diff --git a/ts/editor-toolbar/WithLabel.d.ts b/ts/editor-toolbar/WithLabel.d.ts
index a5606160d..0d0c98a14 100644
--- a/ts/editor-toolbar/WithLabel.d.ts
+++ b/ts/editor-toolbar/WithLabel.d.ts
@@ -3,6 +3,9 @@
 import type { ToolbarItem } from "./types";
 
 export interface WithLabelProps {
+    id?: string;
+    className?: string;
+
     button: ToolbarItem;
     label: string;
 }
diff --git a/ts/editor-toolbar/WithLabel.svelte b/ts/editor-toolbar/WithLabel.svelte
index da743696a..29544290a 100644
--- a/ts/editor-toolbar/WithLabel.svelte
+++ b/ts/editor-toolbar/WithLabel.svelte
@@ -3,20 +3,25 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import type { ToolbarItem } from "./types";
-    import type { Modifier } from "lib/shortcuts";
 
-    import { onDestroy } from "svelte";
-    import { registerShortcut, getPlatformString } from "lib/shortcuts";
+    export let id: string;
+    export let className = "";
 
-    export let button: ToolbarItem;
     export let label: string;
+    export let button: ToolbarItem;
 </script>
 
+<style lang="scss">
+    label {
+        display: flex;
+        padding: 0 calc(var(--toolbar-size) / 10);
+    }
+</style>
+
 <!-- svelte-ignore a11y-label-has-associated-control -->
 
-<label>
-    {label}
+<label {id} class={className}>
+    <span class="me-1">{label}</span>
     <svelte:component this={button.component} {...button} />
 </label>
diff --git a/ts/editor/addons.ts b/ts/editor/addons.ts
index c7383cf1f..06ba37f85 100644
--- a/ts/editor/addons.ts
+++ b/ts/editor/addons.ts
@@ -9,10 +9,12 @@ import {
     iconButton,
     commandIconButton,
     selectButton,
+
     dropdownMenu,
     dropdownItem,
     buttonDropdown,
     withDropdownMenu,
+    withLabel,
 } from "editor-toolbar/dynamicComponents";
 
 export const editorToolbar: Record<
@@ -30,4 +32,5 @@ export const editorToolbar: Record<
     dropdownItem,
     buttonDropdown,
     withDropdownMenu,
+    withLabel,
 };
diff --git a/ts/editor/fields.scss b/ts/editor/fields.scss
index b8745c982..cdc64d079 100644
--- a/ts/editor/fields.scss
+++ b/ts/editor/fields.scss
@@ -59,3 +59,7 @@
         opacity: 0.5;
     }
 }
+
+.flex-basis-100 {
+    flex-basis: 100%;
+}