some styles

packages/website/src/components/DropdownMenu/index.module.css

@@ -1,2 +1,38 @@
-.Trigger {
+.Content {
+  display: flex;
+  flex-direction: column;
+
+  padding: var(--space-4);
+
+  background-color: var(--gray-3);
+
+  box-shadow: var(--shadow-aggressive);
+  outline: var(--outline-interactive);
+  border-radius: var(--space-3);
+}
+
+.Separator {
+  background-color: var(--gray-6);
+
+  margin: var(--space-4) var(--space-3);
+
+  height: var(--space-0);
+}
+
+.Item,
+.CheckboxItem {
+  border-radius: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
+  &:focus {
+    outline: none;
+
+    background-color: var(--accent-9);
+  }
 }

packages/website/src/components/TankSearchFilters/index.tsx

@@ -192,7 +192,7 @@ function TiersFilter() {
   const tiers = tiersRaw.length === 0 ? TIERS : tiersRaw;
 
   return (
-    <DropdownMenu.Root modal={false}>
+    <DropdownMenu.Root open modal={false}>
       <DropdownMenu.Trigger asChild>
         <Button size="minor" color="gray" variant="surface">
           <Flex gap="1">

packages/website/src/ui/compose.tsx

@@ -27,7 +27,7 @@ export function composeRadixComponents<
 
     mapped[key] = composeRadixComponent(
       components[key] as FC,
-      `radix__${styles[key]}`,
+      styles[key],
     ) as Components[Extract<keyof Components, string>];
   }