fix: dropdown offset calculation

hyperweb-io · Nov 27, 2023 · 623dcac · 623dcac
1 parent e0b7a5f
commit 623dcac
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx b/packages/react/scaffolds/chain-swap-combobox/chain-swap-combobox.tsx
@@ -109,21 +109,23 @@ export default function ChainSwapCombobox(props: ChainSwapComboboxProps) {
   const { refs, floatingStyles, context } = useFloating<HTMLInputElement>({
     whileElementsMounted: autoUpdate,
     open,
-    placement: "bottom",
+    placement: "bottom-start",
     onOpenChange: setOpen,
     middleware: [
-      offset({
-        // Minus offset from containerRef padding because ref element is a direct child
-        crossAxis: -5,
+      offset(({ rects }) => {
+        const containerX = containerRef.current.getBoundingClientRect().left;
+        const referenceX = rects.reference.x;
+
+        return {
+          crossAxis: containerX - referenceX,
+        };
       }),
       size({
         apply({ rects, availableHeight, elements }) {
           const containerWidth =
             containerRef.current.getBoundingClientRect().width;
-
           Object.assign(elements.floating.style, {
-            // ref width + parent padding, but not exceeding the real container width
-            width: `${Math.min(rects.reference.width + 30, containerWidth)}px`,
+            width: `${containerWidth}px`,
             maxHeight: `${props.maxHeight ?? availableHeight}px`,
           });
         },
@@ -252,7 +254,7 @@ export default function ChainSwapCombobox(props: ChainSwapComboboxProps) {
         />
       </div>
 
-      {open && (
+      {(open || true) && (
         <FloatingFocusManager
           context={context}
           initialFocus={-1}

diff --git a/src/ui/chain-swap-input/chain-swap-input.css.ts b/src/ui/chain-swap-input/chain-swap-input.css.ts
@@ -1,7 +1,6 @@
 import { style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../styles/themes.css";
 import { breakpoints } from "../../styles/tokens";
-import { chainLogoBase } from "../chain-list-item/chain-list-item.css";
 import { transferItemRootContainer } from "../transfer-item/transfer-item.css";
 
 export const container = style({
@@ -72,6 +71,8 @@ export const chainSwapInput = styleVariants({
 });
 
 export const logoMd = style({
+  maxWidth: "50px",
+  maxHeight: "50px",
   "@container": {
     [`${transferItemRootContainer} (min-width: 0px)`]: {
       width: "28px",
@@ -109,7 +110,13 @@ export const logoSm = style({
   },
 });
 
+const logoBase = style({
+  display: "block",
+  borderRadius: "50%",
+  background: themeVars.colors.skeletonBg,
+});
+
 export const chainSwapLogo = styleVariants({
-  md: [chainLogoBase, logoMd],
-  sm: [chainLogoBase, logoSm],
+  md: [logoBase, logoMd],
+  sm: [logoBase, logoSm],
 });