dbeaver/pro#10229 fixes references panel select popover position (#4549)

* dbeaver/pro#10229 fixes references panel select popover position

* dbeaver/pro#10229 fixes overflowPadding

webapp/common-react/@dbeaver/ui-kit/src/Select/SelectField.tsx

@@ -98,6 +98,8 @@ export interface ISelectFieldProps<T, ItemType = ISelectItem<T>> {
 
   portal?: boolean;
 
+  overflowPadding?: number;
+
   autoFocusItemsOnShow?: boolean;
 
   'aria-labelledby'?: string;
@@ -144,6 +146,7 @@ export function SelectField<T, ItemType extends {} = ISelectItem<T>>({
   required,
   className,
   portal = false,
+  overflowPadding,
   selectedRender,
   arrowIcon,
   store,
@@ -229,7 +232,7 @@ export function SelectField<T, ItemType extends {} = ISelectItem<T>>({
         </Select>
         {description && <span className="dbv-kit-select__description">{description}</span>}
 
-        <SelectPopover autoFocusOnShow={autoFocusItemsOnShow} portal={portal} gutter={4} unmountOnHide>
+        <SelectPopover autoFocusOnShow={autoFocusItemsOnShow} portal={portal} overflowPadding={overflowPadding} gutter={4} unmountOnHide>
           {headerItems && headerItems.length > 0 && (
             <SelectGroup className="dbv-kit-select__popover-header">{headerItems.map(renderSelectItem)}</SelectGroup>
           )}

webapp/packages/core-blocks/src/FormControls/Select.tsx

@@ -41,6 +41,7 @@ export type SelectBaseProps<TKey, TValue> = Omit<
     inline?: boolean;
     children?: string;
     portal?: boolean;
+    overflowPadding?: number;
     headerItems?: TValue[];
     footerItems?: TValue[];
   };
@@ -71,6 +72,7 @@ export const Select: ISelectType = observer(function Select({
   state,
   items,
   portal = false,
+  overflowPadding,
   loading,
   children,
   title,
@@ -158,7 +160,9 @@ export const Select: ISelectType = observer(function Select({
     return (
       <div className="select__item">
         {renderIcon(item)}
-        <span className="tw:truncate tw:min-w-0" title={titleSelector?.(item) ?? valueSelector(item)}>{valueSelector(item)}</span>
+        <span className="tw:truncate tw:min-w-0" title={titleSelector?.(item) ?? valueSelector(item)}>
+          {valueSelector(item)}
+        </span>
       </div>
     );
   }
@@ -189,6 +193,7 @@ export const Select: ISelectType = observer(function Select({
       <SelectField
         {...rest}
         portal={portal}
+        overflowPadding={overflowPadding}
         items={items}
         value={value}
         id={inputId}

webapp/packages/plugin-data-viewer-references/src/DataViewerReferencesPresentation.tsx

@@ -93,6 +93,7 @@ export const DataViewerReferencesPresentation: DataPresentationComponent = obser
             keySelector={association => association.id}
             titleSelector={getValueSelector}
             valueSelector={getValueSelector}
+            overflowPadding={0}
             iconSelector={association => (
               <IconOrImage
                 className={clsx(association.reference && 'tw:rotate-180')}