refactor(console): select dropdown should always pop downwards (#4654)

packages/console/src/ds-components/Dropdown/index.tsx

@@ -10,7 +10,7 @@ import { useRef } from 'react';
 import ReactModal from 'react-modal';
 
 import usePosition from '@/hooks/use-position';
-import type { HorizontalAlignment, VerticalAlignment } from '@/types/positioning';
+import type { HorizontalAlignment } from '@/types/positioning';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import OverlayScrollbar from '../OverlayScrollbar';
@@ -29,7 +29,6 @@ type Props = {
   className?: string;
   titleClassName?: string;
   horizontalAlign?: HorizontalAlignment;
-  verticalAlign?: VerticalAlignment;
   hasOverflowContent?: boolean;
 };
 
@@ -50,15 +49,14 @@ function Dropdown({
   className,
   titleClassName,
   horizontalAlign = 'end',
-  verticalAlign = 'bottom',
   hasOverflowContent,
 }: Props) {
   const overlayRef = useRef<HTMLDivElement>(null);
 
   const { position, positionState, mutate } = usePosition({
-    verticalAlign,
+    verticalAlign: 'bottom',
     horizontalAlign,
-    offset: { vertical: verticalAlign === 'bottom' ? 4 : -4, horizontal: 0 },
+    offset: { vertical: 4, horizontal: 0 },
     anchorRef,
     overlayRef,
   });

packages/console/src/ds-components/Select/index.tsx

@@ -5,7 +5,6 @@ import { useRef, useState } from 'react';
 import Close from '@/assets/icons/close.svg';
 import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
 import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
-import { type VerticalAlignment } from '@/types/positioning';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import Dropdown, { DropdownItem } from '../Dropdown';
@@ -28,7 +27,6 @@ type Props<T> = {
   placeholder?: ReactNode;
   isClearable?: boolean;
   size?: 'small' | 'medium' | 'large';
-  dropdownPosition?: VerticalAlignment;
 };
 
 function Select<T extends string>({
@@ -41,7 +39,6 @@ function Select<T extends string>({
   placeholder,
   isClearable,
   size = 'large',
-  dropdownPosition = 'bottom',
 }: Props<T>) {
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<HTMLInputElement>(null);
@@ -100,7 +97,6 @@ function Select<T extends string>({
       </div>
       <Dropdown
         isFullWidth
-        verticalAlign={dropdownPosition}
         anchorRef={anchorRef}
         className={styles.dropdown}
         isOpen={isOpen}

packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx

@@ -185,7 +185,6 @@ function SigningKeys() {
                 title: value,
                 value,
               }))}
-              dropdownPosition="top"
               value={rotateKeyAlgorithm}
               onChange={(value) => {
                 if (!value) {