🛠️ fix: enhance UI/UX and address a11y issues in SetKeyDialog (#5672)

* ✨ refactor: Improve UI consistency and accessibility in SetKeyDialog components

* 🎨 style: Add cursor pointer to Slider component for better UX

* 🐛 chore: Remove unnecessary console log from SetKeyDialog component

client/src/components/ui/Dropdown.tsx

@@ -15,6 +15,7 @@ interface DropdownProps {
   iconOnly?: boolean;
   renderValue?: (option: Option) => React.ReactNode;
   ariaLabel?: string;
+  portal?: boolean;
 }
 
 const isDivider = (item: string | Option | { divider: true }): item is { divider: true } =>
@@ -35,6 +36,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   iconOnly = false,
   renderValue,
   ariaLabel,
+  portal = true,
 }) => {
   const handleChange = (value: string) => {
     onChange(value);
@@ -93,7 +95,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         {!iconOnly && <Select.SelectArrow />}
       </Select.Select>
       <Select.SelectPopover
-        portal
+        portal={portal}
         store={selectProps}
         className={cn('popover-ui', sizeClasses, className, 'max-h-[80vh] overflow-y-auto')}
       >

client/src/components/ui/OGDialogTemplate.tsx

@@ -76,7 +76,13 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
       </OGDialogHeader>
       <div className={cn('px-0 py-2', mainClassName)}>{main != null ? main : null}</div>
       <OGDialogFooter className={footerClassName}>
-        <div>{leftButtons != null ? <div className="mt-3 sm:mt-0">{leftButtons}</div> : null}</div>
+        <div>
+          {leftButtons != null ? (
+            <div className="mt-3 flex h-auto gap-3 max-sm:w-full max-sm:flex-col sm:mt-0 sm:flex-row">
+              {leftButtons}
+            </div>
+          ) : null}
+        </div>
         <div className="flex h-auto gap-3 max-sm:w-full max-sm:flex-col sm:flex-row">
           {buttons != null ? buttons : null}
           {showCancelButton && (

client/src/components/ui/Slider.tsx

@@ -8,7 +8,10 @@ const Slider = React.forwardRef<
     >(({ className, onDoubleClick, ...props }, ref) => (
       <SliderPrimitive.Root
         ref={ref}
-        className={cn('relative flex w-full touch-none select-none items-center', className)}
+        className={cn(
+          'relative flex w-full cursor-pointer touch-none select-none items-center',
+          className,
+        )}
         onDoubleClick={onDoubleClick}
         {...props}
       >