Bunch of radix related fixes.

src/components/dropdownMenu/DropdownMenu.scss

@@ -6,7 +6,8 @@
   }
 
   .dropdown-menu {
-    position: absolute;
+    // position: absolute;
+    max-width: 250px;
 
     .radix-menuitem {
       &:focus-visible {
@@ -15,15 +16,16 @@
     }
 
     &--mobile {
-      bottom: 55px;
-      top: auto;
-      left: 0;
-      // TODO barnabasmolnar/mainmenu-radix
-      // double check rendering/styling on mobile
-      // width: 100%;
-      display: flex;
-      flex-direction: column;
-      row-gap: 0.75rem;
+      max-width: none;
+      // bottom: 55px;
+      // top: auto;
+      // left: 0;
+      // // TODO barnabasmolnar/mainmenu-radix
+      // // double check rendering/styling on mobile
+      // // width: 100%;
+      // display: flex;
+      // flex-direction: column;
+      // row-gap: 0.75rem;
 
       .dropdown-menu-container {
         padding: 8px 8px;

src/components/dropdownMenu/DropdownMenu.tsx

@@ -26,7 +26,7 @@ const DropdownMenu = ({
   const MenuContentComp = getMenuContentComponent(children);
 
   return (
-    <DropdownMenuPrimitive.Root open={open}>
+    <DropdownMenuPrimitive.Root open={open} modal={false}>
       {MenuTriggerComp}
       {MenuContentComp}
     </DropdownMenuPrimitive.Root>

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -15,6 +15,7 @@ const MenuContent = ({
   className = "",
   onSelect,
   style,
+  sideOffset,
 }: {
   children?: React.ReactNode;
   onClickOutside?: () => void;
@@ -24,6 +25,7 @@ const MenuContent = ({
    */
   onSelect?: (event: Event) => void;
   style?: React.CSSProperties;
+  sideOffset?: number;
 }) => {
   const device = useDevice();
   const menuRef = useOutsideClickHook(() => {
@@ -42,7 +44,7 @@ const MenuContent = ({
         style={style}
         data-testid="dropdown-menu"
         side="bottom"
-        sideOffset={4}
+        sideOffset={sideOffset ?? 4}
         align="start"
       >
         {/* the zIndex ensures this menu has higher stacking order,