From 146a3d936e716e0f1b421bb71d8c18d2593ab671 Mon Sep 17 00:00:00 2001
From: Lucas Scharenbroch <lucasscharenbroch@gmail.com>
Date: Tue, 6 Feb 2024 21:11:14 -0600
Subject: [PATCH] Fix corner rounding of alignment buttons in editor (#2989)

* Fix corner rounding of alignment buttons in editor

* Fix formatting

* Fix cascading button-rounding issues
---
 CONTRIBUTORS                                 |  1 +
 ts/editor/editor-toolbar/BlockButtons.svelte | 65 ++++++++++++--------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index 964ce24c0..d6a7b94ac 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -158,6 +158,7 @@ Viktor Ricci <ricci@primateer.de>
 Harvey Randall <harveyrandall2001@gmail.com>
 Pedro Lameiras <pedrolameiras@tecnico.ulisboa.pt>
 Kai Knoblich  <kai@FreeBSD.org>
+Lucas Scharenbroch <lucasscharenbroch@gmail.com>
 
 ********************
 
diff --git a/ts/editor/editor-toolbar/BlockButtons.svelte b/ts/editor/editor-toolbar/BlockButtons.svelte
index dbb08d113..01406132c 100644
--- a/ts/editor/editor-toolbar/BlockButtons.svelte
+++ b/ts/editor/editor-toolbar/BlockButtons.svelte
@@ -127,36 +127,49 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <Popover slot="floating" --popover-padding-inline="0">
                     <ButtonToolbar wrap={false}>
                         <ButtonGroup>
-                            <CommandIconButton
-                                key="justifyLeft"
-                                tooltip={tr.editingAlignLeft()}
-                                --border-left-radius="5px"
-                                --border-right-radius="0px"
+                            <DynamicallySlottable
+                                slotHost={ButtonGroupItem}
+                                {createProps}
+                                {updatePropsList}
+                                {setSlotHostContext}
+                                {api}
                             >
-                                {@html justifyLeftIcon}
-                            </CommandIconButton>
+                                <ButtonGroupItem>
+                                    <CommandIconButton
+                                        key="justifyLeft"
+                                        tooltip={tr.editingAlignLeft()}
+                                    >
+                                        {@html justifyLeftIcon}
+                                    </CommandIconButton>
+                                </ButtonGroupItem>
 
-                            <CommandIconButton
-                                key="justifyCenter"
-                                tooltip={tr.editingCenter()}
-                            >
-                                {@html justifyCenterIcon}
-                            </CommandIconButton>
+                                <ButtonGroupItem>
+                                    <CommandIconButton
+                                        key="justifyCenter"
+                                        tooltip={tr.editingCenter()}
+                                    >
+                                        {@html justifyCenterIcon}
+                                    </CommandIconButton>
+                                </ButtonGroupItem>
 
-                            <CommandIconButton
-                                key="justifyRight"
-                                tooltip={tr.editingAlignRight()}
-                            >
-                                {@html justifyRightIcon}
-                            </CommandIconButton>
+                                <ButtonGroupItem>
+                                    <CommandIconButton
+                                        key="justifyRight"
+                                        tooltip={tr.editingAlignRight()}
+                                    >
+                                        {@html justifyRightIcon}
+                                    </CommandIconButton>
+                                </ButtonGroupItem>
 
-                            <CommandIconButton
-                                key="justifyFull"
-                                tooltip={tr.editingJustify()}
-                                --border-right-radius="5px"
-                            >
-                                {@html justifyFullIcon}
-                            </CommandIconButton>
+                                <ButtonGroupItem>
+                                    <CommandIconButton
+                                        key="justifyFull"
+                                        tooltip={tr.editingJustify()}
+                                    >
+                                        {@html justifyFullIcon}
+                                    </CommandIconButton>
+                                </ButtonGroupItem>
+                            </DynamicallySlottable>
                         </ButtonGroup>
 
                         <ButtonGroup>