use sticky

writer · Nov 25, 2024 · a80a890 · a80a890
1 parent 8c275d9
commit a80a890
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
@@ -43,7 +43,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import { useFloating } from "@floating-ui/vue";
+import { useFloating, autoPlacement } from "@floating-ui/vue";
 import type { WdsDropdownMenuOption } from "@/wds/WdsDropdownMenu.vue";
 import { useFocusWithin } from "@/composables/useFocusWithin";
 
@@ -77,6 +77,7 @@ const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	dropdown,
 	{
 		placement: "bottom",
+		middleware: [autoPlacement()],
 	},
 );
 

diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -98,6 +98,10 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	padding: 8px 10px;
 
 	box-shadow: 0px 1px 8px 0px #bfcbff40;
+	box-sizing: border-box;
+}
+.WdsDropdownMenu:has(.WdsDropdownMenu__search) {
+	padding-top: 0px;
 }
 
 .WdsDropdownMenu__item {
@@ -150,6 +154,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	gap: 4px;
 
 	padding: 8px;
+	padding-top: 16px;
 	border: 1px solid transparent;
 
 	color: currentcolor;