From b1fe777e28d25939640c40691df97830a922b10f Mon Sep 17 00:00:00 2001
From: Eirik Backer <eirik.backer@gmail.com>
Date: Fri, 11 Oct 2024 14:22:12 +0200
Subject: [PATCH] fix(Theme): select styling (#2606)

Fixes rendering of select in theme builder
---
 apps/theme/components/ColorPicker/ColorPicker.tsx          | 5 +----
 apps/theme/components/ThemeToolbar/ThemeToolbar.module.css | 6 ++++++
 apps/theme/components/ThemeToolbar/ThemeToolbar.tsx        | 5 ++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/theme/components/ColorPicker/ColorPicker.tsx b/apps/theme/components/ColorPicker/ColorPicker.tsx
index 2261b303ce..ff75e4384b 100644
--- a/apps/theme/components/ColorPicker/ColorPicker.tsx
+++ b/apps/theme/components/ColorPicker/ColorPicker.tsx
@@ -109,10 +109,7 @@ export const ColorPicker = ({
           className={cl(classes.container, 'ds-focus')}
           onClick={() => handleClick()}
         >
-          <div
-            style={{ backgroundColor: color }}
-            className={classes.color}
-          ></div>
+          <div style={{ backgroundColor: color }} className={classes.color} />
           <div className={classes.input}>{color}</div>
         </button>
       </div>
diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css b/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css
index a713192436..49a5dcba0c 100644
--- a/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css
+++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.module.css
@@ -14,3 +14,9 @@
 .contrastSelect {
   width: 150px;
 }
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
+}
diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
index 66f159bbb9..fced0c298e 100644
--- a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
+++ b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -106,7 +106,7 @@ export const ThemeToolbar = ({
           }}
         />
 
-        <div className={classes.dropdown}>
+        <div className={classes.select}>
           <Label htmlFor='select-contrast'>Kontrastnivå</Label>
           <Select
             id='select-contrast'
@@ -121,12 +121,11 @@ export const ThemeToolbar = ({
             <Select.Option value='aaa'>AAA (WIP)</Select.Option>
           </Select>
         </div>
-        <div className={classes.borderRadii}>
+        <div className={classes.select}>
           <Label htmlFor='select-border-radius'>Border radius</Label>
           <Select
             id='select-border-radius'
             size='md'
-            className={classes.borderRadiiSelect}
             value={borderRadius}
             onChange={(e) => onBorderRadiusChanged(e.target.value)}
             style={{