From 1b203249611e455cddb8b9806c98dc3be9850324 Mon Sep 17 00:00:00 2001
From: Meriem-BenIsmail <meriembenismail867@gmail.com>
Date: Thu, 16 Jan 2025 18:11:13 +0100
Subject: [PATCH] add css class to mode in symbology.

---
 .../components/color_ramp/ModeSelectRow.tsx   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
index a1926368d..354ba6f41 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
@@ -28,20 +28,21 @@ const ModeSelectRow = ({
       </div>
       <div className="jp-gis-color-ramp-div">
         <label htmlFor="mode-select">Mode:</label>
-        <select
-          name="mode-select"
-          onChange={event => setSelectedMode(event.target.value)}
-        >
-          {modeOptions.map(mode => (
-            <option
-              className="jp-mod-styled"
-              value={mode}
-              selected={selectedMode === mode}
-            >
-              {mode}
-            </option>
-          ))}
-        </select>
+        <div className="jp-select-wrapper">
+          <select
+            name="mode-select"
+            id="mode-select"
+            className="jp-mod-styled"
+            value={selectedMode}
+            onChange={event => setSelectedMode(event.target.value)}
+          >
+            {modeOptions.map(mode => (
+              <option key={mode} value={mode} selected={selectedMode === mode}>
+                {mode}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
     </div>
   );