update debugger picker styling and options

Author: javiert-okta

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

@@ -40,7 +40,7 @@ interface DebuggerPickerComponentProps {
     GroupBase<DebuggerPickerOptionModel>
   >;
   isGrouped?: boolean;
-  selectedOptionCode: DebuggerPickerOptionModel | null;
+  selectedOptionCode?: DebuggerPickerOptionModel | null;
   handleSelection: (
     selection: string,
     parentLabel?: LibraryFilterLabel
@@ -54,6 +54,7 @@ export const DebuggerPickerComponent: React.FC<
 > = ({
   label,
   options,
+  selectedOptionCode,
   handleSelection,
   placeholder,
   minWidth,
@@ -93,6 +94,7 @@ export const DebuggerPickerComponent: React.FC<
         classNamePrefix={"react-select"}
         isSearchable={false}
         placeholder={placeholder}
+        value={selectedOptionCode}
         styles={{
           control: (base) => ({
             ...base,

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

@@ -33,20 +33,17 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 }
 
 .picker__label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  list-style-type: none;
-  margin: 0;
-  gap: 0.5rem;
-  font-size: 0.8125rem;
-  line-height: 1.3125rem;
-  letter-spacing: -0.05px;
-
-  width: 100%;
-
-  height: 100%;
+    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%;
 
   & svg {
     stroke: var(--color_fg_bold);
@@ -55,4 +52,5 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 
 .picker__fullName {
   display: flex;
+  font-weight: 600;
 }