Naming, removing unused code.

src/components/ColorPicker.tsx

@@ -369,16 +369,16 @@ export const ColorPicker = ({
 }) => {
   const pickerButton = React.useRef<HTMLButtonElement>(null);
   const coords = pickerButton.current?.getBoundingClientRect();
-  const mainmenuContentCoords = document
-    .querySelector(".mainmenu-content")
+  const mainMenuContentCoords = document
+    .querySelector(".main-menu-content")
     ?.getBoundingClientRect();
 
   const top =
-    coords && mainmenuContentCoords && coords.top - mainmenuContentCoords.top;
+    coords && mainMenuContentCoords && coords.top - mainMenuContentCoords.top;
   const left =
     coords &&
-    mainmenuContentCoords &&
-    coords.right - mainmenuContentCoords.left;
+    mainMenuContentCoords &&
+    coords.right - mainMenuContentCoords.left;
 
   return (
     <div>

src/components/dropdownMenu/DropdownMenu.scss

@@ -6,8 +6,7 @@
   }
 
   .dropdown-menu {
-    // position: absolute;
-    max-width: 250px;
+    max-width: 16rem;
 
     &__submenu-trigger {
       &[aria-expanded="true"] {
@@ -22,24 +21,13 @@
       opacity: 0.5;
     }
 
-    .radix-menuitem {
+    .radix-menu-item {
       &:focus-visible {
         outline: none;
       }
     }
 
     &--mobile {
-      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;
         box-sizing: border-box;

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -23,7 +23,7 @@ const DropdownMenuItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
-    <DropdownMenuPrimitive.Item className="radix-menuitem">
+    <DropdownMenuPrimitive.Item className="radix-menu-item">
       <button
         {...rest}
         onClick={handleClick}

src/components/dropdownMenu/DropdownMenuSubItem.tsx

@@ -23,7 +23,7 @@ const DropdownMenuSubItem = ({
   const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
-    <DropdownMenuPrimitive.Item className="radix-menuitem">
+    <DropdownMenuPrimitive.Item className="radix-menu-item">
       <button
         {...rest}
         onClick={handleClick}

src/components/dropdownMenu/DropdownMenuSubTrigger.tsx

@@ -15,7 +15,7 @@ const DropdownMenuSubTrigger = ({
   className?: string;
 } & React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <DropdownMenuPrimitive.SubTrigger className="radix-menuitem dropdown-menu__submenu-trigger">
+    <DropdownMenuPrimitive.SubTrigger className="radix-menu-item dropdown-menu__submenu-trigger">
       <div
         {...rest}
         className={getDropdownMenuItemClassName(className)}

src/components/main-menu/MainMenu.tsx

@@ -65,7 +65,7 @@ const MainMenu = Object.assign(
             <DropdownMenu.Content
               // style={{ zIndex: 11 }}
               sideOffset={device.isMobile ? 20 : undefined}
-              className="mainmenu-content"
+              className="main-menu-content"
               onClickOutside={onClickOutside}
               onSelect={composeEventHandlers(onSelect, () => {
                 setAppState({ openMenu: null });