From 014ccf5197a4d37783b5f0493e72b964363c6ad5 Mon Sep 17 00:00:00 2001
From: LucasDLTG <lucas.deletang.legravier@gmail.com>
Date: Sat, 12 Sep 2026 11:52:36 +0200
Subject: [PATCH] fix: style of add page selector

---
 src/assets/icons/Triangle.tsx                 | 20 ++++++++++++++-----
 src/components/ChoiceSelect/ChoiceSelect.css  |  2 +-
 .../ChoiceStepper/ChoiceStepper.css           | 20 +++++++++++--------
 src/pages/AddDspPage/AddDspPage.css           |  5 -----
 4 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/assets/icons/Triangle.tsx b/src/assets/icons/Triangle.tsx
index 9784dbb..5a6fe99 100644
--- a/src/assets/icons/Triangle.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ChoiceSelect/ChoiceSelect.css b/src/components/ChoiceSelect/ChoiceSelect.css
index 2ed13c7..1f4570f 100644
--- a/src/components/ChoiceSelect/ChoiceSelect.css
+++ b/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%);
 
diff --git a/src/components/ChoiceStepper/ChoiceStepper.css b/src/components/ChoiceStepper/ChoiceStepper.css
index c8c1914..677228a 100644
--- a/src/components/ChoiceStepper/ChoiceStepper.css
+++ b/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;
-  height: 4.5cqh;
+  width: 3cqh;
+  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%;
 }
 
diff --git a/src/pages/AddDspPage/AddDspPage.css b/src/pages/AddDspPage/AddDspPage.css
index 57f1137..61940c0 100644
--- a/src/pages/AddDspPage/AddDspPage.css
+++ b/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;