update alg picker container

Author: javiert-okta

src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx

@@ -15,7 +15,7 @@ import {
   algDictionary,
   jwsExampleAlgHeaderParameterValuesDictionary,
 } from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
-import { useButton } from "@react-aria/button"
+import { useButton } from "@react-aria/button";
 import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
 
 enum PickerStates {
@@ -92,7 +92,6 @@ export const WidgetAlgPickerComponent: React.FC<
     setPickerState(PickerStates.IDLE);
   };
 
-
   useEffect(() => {
     (async function runEs512Check() {
       setCanUseEs512(await isP521Supported());
@@ -107,18 +106,6 @@ export const WidgetAlgPickerComponent: React.FC<
     })();
   }, []);
 
-  /* const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
-    return Object.entries(
-      jwsExampleAlgHeaderParameterValuesDictionary.unsecured
-    ).map((entry) => {
-      const [key, value] = entry;
-
-      return {
-        value: key,
-        label: value.name,
-      };
-    });
-  }, []); */
 
   const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map(
@@ -197,16 +184,17 @@ export const WidgetAlgPickerComponent: React.FC<
               {dictionary.exampleAlgPicker.label}
             </label>
           </div>
-          <DebuggerPickerComponent
-            label={null}
-            data-has-label={label !== null}
-            languageCode={languageCode}
-            handleSelection={selectExample}
-            selectedOptionCode={null}
-            options={algOptions}
-            placeholder={dictionary.exampleAlgPicker.defaultValue}
-            minWidth={null}
-          />
+          <div className={styles.picker__container}>
+            <DebuggerPickerComponent
+              label={null}
+              data-has-label={label !== null}
+              languageCode={languageCode}
+              handleSelection={selectExample}
+              options={algOptions}
+              placeholder={dictionary.exampleAlgPicker.defaultValue}
+              minWidth={null}
+            />
+          </div>
         </div>
       </div>
     </div>

src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.module.scss

@@ -62,6 +62,10 @@
   font-weight: 600;
 }
 
+.picker__container {
+  height: 2rem;
+}
+
 .button {
   color: var(--color_fg_on_button);
   background-color: var(--color_bg_button);