fix styles for encoder picker

Author: javiert-okta

src/features/encoder/components/token-encoder-key-format-picker.component.tsx

@@ -15,14 +15,14 @@ export const TokenEncoderKeyFormatPickerComponent: React.FC<
   const dictionary = getPickersUiDictionary(languageCode);
 
   const handlePrivateKeyFormatChange = useEncoderStore(
-    (state) => state.handleAsymmetricPrivateKeyFormatChange,
+    (state) => state.handleAsymmetricPrivateKeyFormatChange
   );
   const controlledAsymmetricPrivateKey$ = useEncoderStore(
-    (state) => state.controlledAsymmetricPrivateKey,
+    (state) => state.controlledAsymmetricPrivateKey
   );
 
   const [keyFormat, setKeyFormat] = useState<AsymmetricKeyFormatValues>(
-    AsymmetricKeyFormatValues.PEM,
+    AsymmetricKeyFormatValues.PEM
   );
 
   useEffect(() => {
@@ -38,28 +38,32 @@ export const TokenEncoderKeyFormatPickerComponent: React.FC<
   };
 
   return (
-    <div className={styles.container}>
-      <DebuggerPickerComponent
-        languageCode={languageCode}
-        label={dictionary.privateKeyFormatPicker.label}
-        handleSelection={onPrivateKeyFormatChange}
-        selectedOptionCode={{
-          value: keyFormat,
-          label: keyFormat,
-        }}
-        options={[
-          {
-            value: AsymmetricKeyFormatValues.PEM,
-            label: AsymmetricKeyFormatValues.PEM,
-          },
-          {
-            value: AsymmetricKeyFormatValues.JWK,
-            label: AsymmetricKeyFormatValues.JWK,
-          },
-        ]}
-        placeholder={null}
-        minWidth="6.125rem"
-      />
+    <div className={styles.encoder__switch}>
+      <div className={styles.container}>
+        <div className={styles.picker}>
+          <DebuggerPickerComponent
+            languageCode={languageCode}
+            label={dictionary.privateKeyFormatPicker.label}
+            handleSelection={onPrivateKeyFormatChange}
+            selectedOptionCode={{
+              value: keyFormat,
+              label: keyFormat,
+            }}
+            options={[
+              {
+                value: AsymmetricKeyFormatValues.PEM,
+                label: AsymmetricKeyFormatValues.PEM,
+              },
+              {
+                value: AsymmetricKeyFormatValues.JWK,
+                label: AsymmetricKeyFormatValues.JWK,
+              },
+            ]}
+            placeholder={null}
+            minWidth="6.125rem"
+          />
+        </div>
+      </div>
     </div>
   );
 };

src/features/encoder/components/token-encoder-key-format-picker.module.scss

@@ -1,22 +1,47 @@
 @use "@/libs/theme/styles/variables" as *;
 
+
+.encoder__switch {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+}
+
 .container {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: .5rem;
 
   @media #{$breakpoint-dimension-sm} {
     align-self: unset;
   }
 }
 
+.picker {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--color_fg_bold);
+  gap: .75rem;
+  width: 100%;
+}
+
 .label {
-  color: var(--color_fg_default);
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-  font-weight: 500;
-  letter-spacing: 0.1px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+    gap: .5rem;
+    font-size: .875rem;
+    line-height: 1.35;
+    width: 100%;
+    height: 100%;
 }
 
 .select {