fix: style of add page selector

src/assets/icons/Triangle.tsx

@@ -1,8 +1,13 @@
 export function TriangleUpIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
-        d="M8 5L4 10H12L8 5Z"
+        d="M8 3L2 12H14L8 3Z"
         stroke="currentColor"
         strokeWidth="1.5"
         fill="transparent"
@@ -14,9 +19,14 @@ export function TriangleUpIcon(props: React.SVGProps<SVGSVGElement>) {
 
 export function TriangleDownIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <path
-        d="M8 11L4 6H12L8 11Z"
+        d="M8 13L2 4H14L8 13Z"
         stroke="currentColor"
         strokeWidth="1.5"
         fill="transparent"
@@ -24,4 +34,4 @@ export function TriangleDownIcon(props: React.SVGProps<SVGSVGElement>) {
       />
     </svg>
   );
-}
+}

src/components/ChoiceSelect/ChoiceSelect.css

@@ -45,7 +45,7 @@
   position: absolute;
   right: var(--space-2);
   top: 50%;
-  height: 70%;
+  height: 45%;
   aspect-ratio: 1;
   transform: translateY(-50%);
 

src/components/ChoiceStepper/ChoiceStepper.css

@@ -39,20 +39,21 @@
 
 .choice-stepper__arrows {
   flex: 0 0 auto;
+
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 0.5cqh;
 
   height: 100%;
+
   box-sizing: border-box;
-  padding: 1cqh;
-  padding-left: 0;
 }
 
 .choice-stepper__arrow-btn {
-  aspect-ratio: 1;
+  width: 3cqh;
-  height: 4.5cqh;
+  height: 3cqh;
+
+  min-width: 0;
   min-height: 0;
 
   display: flex;
@@ -60,10 +61,13 @@
   justify-content: center;
 
   padding: 0;
-  color: var(--accent-brand);
+  padding-top: 0.2cqh;
+  margin: 0;
 
+  color: var(--accent-brand);
   background: transparent;
-  border-radius: 1cqh;
+  border: none;
+  border-radius: 0.75cqh;
 
   cursor: pointer;
 }
@@ -74,7 +78,7 @@
 }
 
 .choice-stepper__arrow-btn svg {
-  width: 100%;
+  display: block;
   height: 100%;
 }
 

src/pages/AddDspPage/AddDspPage.css

@@ -155,11 +155,6 @@
   height: var(--card-control-height);
 }
 
-.add-dsp-form__stepper .choice-stepper__arrows {
-  padding: 4px 4px 4px 0;
-  gap: 2px;
-}
-
 .add-dsp-form__field .choice-stepper__input {
   border: none;
   background: transparent;