+
-
- ) }
+
+
>
);
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index 5366babc266c6..daba828fa64f2 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -76,8 +76,8 @@ export function useBorderControlDropdown(
return cx( styles.borderControlPopoverContent );
}, [ cx ] );
- const resetButtonClassName = useMemo( () => {
- return cx( styles.resetButton );
+ const resetButtonWrapperClassName = useMemo( () => {
+ return cx( styles.resetButtonWrapper );
}, [ cx ] );
return {
@@ -94,7 +94,7 @@ export function useBorderControlDropdown(
onReset,
popoverContentClassName,
popoverControlsClassName,
- resetButtonClassName,
+ resetButtonWrapperClassName,
size,
__experimentalIsRenderedInSidebar,
};
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index a678b6f362308..0109c0598e85b 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -147,16 +147,10 @@ export const borderControlPopoverControls = css`
export const borderControlPopoverContent = css``;
export const borderColorIndicator = css``;
-export const resetButton = css`
- justify-content: center;
- width: 100%;
-
- /* Override button component styling */
- && {
- border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- }
+export const resetButtonWrapper = css`
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 12px;
`;
export const borderSlider = () => css`