chore: make mobile menu ui more native-like (#2594)

2023-10-18 21:31:28 +05:30
parent 6a40f611f6
commit 2e3ac3ce57
32 changed files with 615 additions and 584 deletions
--- a/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -6,13 +6,13 @@ import { useCallback, useMemo, useState, FunctionComponent } from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
-import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import WorkspaceSwitcherOption from './WorkspaceSwitcher/WorkspaceSwitcherOption'
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { formatLastSyncDate } from '@/Utils/DateUtils'
 import Spinner from '@/Components/Spinner/Spinner'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import { useApplication } from '../ApplicationProvider'
+import MenuSection from '../Menu/MenuSection'

 type Props = {
  mainApplicationGroup: WebApplicationGroup
@@ -92,7 +92,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,

  return (
    <>
-      <div className="mb-1 mt-1 hidden items-center justify-between px-3 md:flex">
+      <div className="mb-1 mt-1 hidden items-center justify-between px-4 md:flex md:px-3">
        <div className="text-lg font-bold lg:text-base">Account</div>
        <div className="flex cursor-pointer" onClick={closeMenu}>
          <Icon type="close" className="text-neutral" />
@@ -100,12 +100,12 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
      </div>
      {user ? (
        <>
-          <div className="mb-3 px-3 text-lg text-foreground lg:text-sm">
+          <div className="mb-3 px-4 text-lg text-foreground md:px-3 lg:text-sm">
            <div>You're signed in as:</div>
            <div className="wrap my-0.5 font-bold">{user.email}</div>
            <span className="text-neutral">{application.getHost.execute().getValue()}</span>
          </div>
-          <div className="mb-2 flex items-start justify-between px-3 text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item">
+          <div className="mb-2 flex items-start justify-between px-4 text-mobile-menu-item md:px-3 md:text-tablet-menu-item lg:text-menu-item">
            {isSyncingInProgress ? (
              <div className="flex items-center font-semibold text-info">
                <Spinner className="mr-2 h-5 w-5" />
@@ -127,7 +127,7 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
        </>
      ) : (
        <>
-          <div className="mb-1 px-3">
+          <div className="mb-1 px-4 md:px-3">
            <div className="mb-3 text-base text-foreground lg:text-sm">
              You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
              encryption.
@@ -145,56 +145,57 @@ const GeneralAccountMenu: FunctionComponent<Props> = ({ setMenuPane, closeMenu,
        closeMenu={closeMenu}
        initialFocus={!application.hasAccount() ? CREATE_ACCOUNT_INDEX : SWITCHER_INDEX}
      >
-        <MenuItemSeparator />
-        <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} />
-        <MenuItemSeparator />
-        {user ? (
-          <MenuItem onClick={openPreferences}>
-            <Icon type="user" className={iconClassName} />
-            Account settings
-          </MenuItem>
-        ) : (
-          <>
-            <MenuItem onClick={activateRegisterPane}>
+        <MenuSection className="md:border-t md:pt-2">
+          <WorkspaceSwitcherOption mainApplicationGroup={mainApplicationGroup} />
+        </MenuSection>
+        <MenuSection>
+          {user ? (
+            <MenuItem onClick={openPreferences}>
              <Icon type="user" className={iconClassName} />
-              Create free account
+              Account settings
            </MenuItem>
-            <MenuItem onClick={activateSignInPane}>
-              <Icon type="signIn" className={iconClassName} />
-              Sign in
-            </MenuItem>
-          </>
-        )}
-        <MenuItem
-          onClick={() => {
-            application.importModalController.setIsVisible(true)
-            application.accountMenuController.closeAccountMenu()
-          }}
-        >
-          <Icon type="archive" className={iconClassName} />
-          Import
-        </MenuItem>
-        {application.isNativeMobileWeb() && (
-          <MenuItem onClick={openEmail}>
-            <Icon type="email-filled" className={iconClassName} />
-            Email us
+          ) : (
+            <>
+              <MenuItem onClick={activateRegisterPane}>
+                <Icon type="user" className={iconClassName} />
+                Create free account
+              </MenuItem>
+              <MenuItem onClick={activateSignInPane}>
+                <Icon type="signIn" className={iconClassName} />
+                Sign in
+              </MenuItem>
+            </>
+          )}
+          <MenuItem
+            onClick={() => {
+              application.importModalController.setIsVisible(true)
+              application.accountMenuController.closeAccountMenu()
+            }}
+          >
+            <Icon type="archive" className={iconClassName} />
+            Import
          </MenuItem>
-        )}
-        <MenuItem className="justify-between" onClick={openHelp}>
-          <div className="flex items-center">
-            <Icon type="help" className={iconClassName} />
-            Help &amp; feedback
-          </div>
-          <span className="text-neutral">v{application.version}</span>
-        </MenuItem>
+          {application.isNativeMobileWeb() && (
+            <MenuItem onClick={openEmail}>
+              <Icon type="email-filled" className={iconClassName} />
+              Email us
+            </MenuItem>
+          )}
+          <MenuItem className="justify-between" onClick={openHelp}>
+            <div className="flex items-center">
+              <Icon type="help" className={iconClassName} />
+              Help &amp; feedback
+            </div>
+            <span className="text-neutral">v{application.version}</span>
+          </MenuItem>
+        </MenuSection>
        {user ? (
-          <>
-            <MenuItemSeparator />
+          <MenuSection>
            <MenuItem onClick={signOut}>
              <Icon type="signOut" className={iconClassName} />
              Sign out workspace
            </MenuItem>
-          </>
+          </MenuSection>
        ) : null}
      </Menu>
    </>
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -5,9 +5,9 @@ import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItem from '@/Components/Menu/MenuItem'
-import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import WorkspaceMenuItem from './WorkspaceMenuItem'
 import { useApplication } from '@/Components/ApplicationProvider'
+import MenuSection from '@/Components/Menu/MenuSection'

 type Props = {
  mainApplicationGroup: WebApplicationGroup
@@ -71,30 +71,32 @@ const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
  }, [mainApplicationGroup])

  return (
-    <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
-      {applicationDescriptors.map((descriptor) => (
-        <WorkspaceMenuItem
-          key={descriptor.identifier}
-          descriptor={descriptor}
-          hideOptions={hideWorkspaceOptions}
-          onDelete={destroyWorkspace}
-          onClick={() => activateWorkspace(descriptor)}
-          renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
-        />
-      ))}
-      <MenuItemSeparator />
+    <Menu a11yLabel="Workspace switcher menu" className="focus:shadow-none" isOpen={isOpen}>
+      <MenuSection>
+        {applicationDescriptors.map((descriptor) => (
+          <WorkspaceMenuItem
+            key={descriptor.identifier}
+            descriptor={descriptor}
+            hideOptions={hideWorkspaceOptions}
+            onDelete={destroyWorkspace}
+            onClick={() => activateWorkspace(descriptor)}
+            renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
+          />
+        ))}
+      </MenuSection>

-      <MenuItem onClick={addAnotherWorkspace}>
-        <Icon type="user-add" className="mr-2 text-neutral" />
-        Add another workspace
-      </MenuItem>
-
-      {!hideWorkspaceOptions && (
-        <MenuItem onClick={signoutAll}>
-          <Icon type="signOut" className="mr-2 text-neutral" />
-          Sign out all workspaces
+      <MenuSection>
+        <MenuItem onClick={addAnotherWorkspace}>
+          <Icon type="user-add" className="mr-2 text-neutral" />
+          Add another workspace
        </MenuItem>
-      )}
+        {!hideWorkspaceOptions && (
+          <MenuItem onClick={signoutAll}>
+            <Icon type="signOut" className="mr-2 text-neutral" />
+            Sign out all workspaces
+          </MenuItem>
+        )}
+      </MenuSection>
    </Menu>
  )
 }
--- a/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/packages/web/src/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -33,7 +33,7 @@ const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGrou
        title="Switch workspace"
        align="end"
        anchorElement={buttonRef}
-        className="py-2"
+        className="pb-2"
        open={isOpen}
        side="right"
        togglePopover={toggleMenu}
--- a/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx
@@ -28,7 +28,6 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
        title="Switch workspace"
        align="center"
        anchorElement={buttonRef}
-        className="py-2"
        open={isOpen}
        overrideZIndex="z-modal"
        side="right"
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx
@@ -79,7 +79,7 @@ const ChangeEditorButton: FunctionComponent<Props> = ({ noteViewController, onCl
        disableClickOutside={isClickOutsideDisabled}
        anchorElement={buttonRef}
        open={isOpen}
-        className="pt-2 md:pt-0"
+        className="md:pb-1"
      >
        <ChangeEditorMenu
          application={application}
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
@@ -13,7 +13,7 @@ import {
  PrefKey,
  SNNote,
 } from '@standardnotes/snjs'
-import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
+import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react'
 import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
 import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
 import { createEditorMenuGroups } from '../../Utils/createEditorMenuGroups'
@@ -24,6 +24,7 @@ import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
 import ModalOverlay from '../Modal/ModalOverlay'
 import SuperNoteConverter from '../SuperEditor/SuperNoteConverter'
+import MenuSection from '../Menu/MenuSection'

 type ChangeEditorMenuProps = {
  application: WebApplication
@@ -210,48 +211,42 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
      <Menu className="pb-1 pt-0.5" a11yLabel="Change note type menu" isOpen={isVisible}>
        {groups
          .filter((group) => group.items && group.items.length)
-          .map((group, index) => {
+          .map((group) => {
            const groupId = getGroupId(group)

            return (
-              <Fragment key={groupId}>
-                <div
-                  className={`border-0 border-t border-solid border-[--separator-color] py-1 ${
-                    index === 0 ? 'border-t-0' : ''
-                  }`}
-                >
-                  {group.items.map((menuItem) => {
-                    const onClickEditorItem = () => {
-                      handleMenuSelection(menuItem).catch(console.error)
-                    }
+              <MenuSection key={groupId}>
+                {group.items.map((menuItem) => {
+                  const onClickEditorItem = () => {
+                    handleMenuSelection(menuItem).catch(console.error)
+                  }

-                    return (
-                      <MenuRadioButtonItem
-                        key={menuItem.uiFeature.uniqueIdentifier.value}
-                        onClick={onClickEditorItem}
-                        className={'flex-row-reversed py-2'}
-                        checked={isSelected(menuItem)}
-                        info={menuItem.uiFeature.description}
-                      >
-                        <div className="flex flex-grow items-center justify-between">
-                          <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
-                            {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                            {menuItem.uiFeature.displayName}
-                            {menuItem.isLabs && (
-                              <Pill className="px-1.5 py-0.5" style="success">
-                                Labs
-                              </Pill>
-                            )}
-                          </div>
-                          {!menuItem.isEntitled && (
-                            <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
+                  return (
+                    <MenuRadioButtonItem
+                      key={menuItem.uiFeature.uniqueIdentifier.value}
+                      onClick={onClickEditorItem}
+                      className={'flex-row-reversed py-2'}
+                      checked={isSelected(menuItem)}
+                      info={menuItem.uiFeature.description}
+                    >
+                      <div className="flex flex-grow items-center justify-between">
+                        <div className={`flex items-center ${group.featured ? 'font-bold' : ''}`}>
+                          {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                          {menuItem.uiFeature.displayName}
+                          {menuItem.isLabs && (
+                            <Pill className="px-1.5 py-0.5" style="success">
+                              Labs
+                            </Pill>
                          )}
                        </div>
-                      </MenuRadioButtonItem>
-                    )
-                  })}
-                </div>
-              </Fragment>
+                        {!menuItem.isEntitled && (
+                          <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />
+                        )}
+                      </div>
+                    </MenuRadioButtonItem>
+                  )
+                })}
+              </MenuSection>
            )
          })}
      </Menu>
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMultipleMenu.tsx
@@ -10,7 +10,7 @@ import {
  NoteType,
  SNNote,
 } from '@standardnotes/snjs'
-import { Fragment, useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconName, PremiumFeatureIconClass } from '../Icon/PremiumFeatureIcon'
 import Menu from '../Menu/Menu'
@@ -20,6 +20,7 @@ import { EditorMenuItem } from '../NotesOptions/EditorMenuItem'
 import { SuperNoteImporter } from '../SuperEditor/SuperNoteImporter'
 import { Pill } from '../Preferences/PreferencesComponents/Content'
 import ModalOverlay from '../Modal/ModalOverlay'
+import MenuSection from '../Menu/MenuSection'

 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')

@@ -132,36 +133,34 @@ const ChangeEditorMultipleMenu = ({ application, notes, setDisableClickOutside }
  return (
    <>
      <Menu isOpen={true} a11yLabel="Change note type">
-        {groupsWithItems.map((group, index) => (
-          <Fragment key={getGroupId(group)}>
-            <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
-              {group.items.map((item) => {
-                const onClickEditorItem = () => {
-                  handleMenuSelection(item).catch(console.error)
-                }
-                return (
-                  <MenuItem
-                    key={item.uiFeature.uniqueIdentifier.value}
-                    onClick={onClickEditorItem}
-                    className={'flex-row-reversed py-2'}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      <div className={'flex items-center'}>
-                        {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
-                        {item.uiFeature.displayName}
-                        {item.isLabs && (
-                          <Pill className="px-1.5 py-0.5" style="success">
-                            Labs
-                          </Pill>
-                        )}
-                      </div>
-                      {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+        {groupsWithItems.map((group) => (
+          <MenuSection key={getGroupId(group)}>
+            {group.items.map((item) => {
+              const onClickEditorItem = () => {
+                handleMenuSelection(item).catch(console.error)
+              }
+              return (
+                <MenuItem
+                  key={item.uiFeature.uniqueIdentifier.value}
+                  onClick={onClickEditorItem}
+                  className={'flex-row-reversed py-2'}
+                >
+                  <div className="flex flex-grow items-center justify-between">
+                    <div className={'flex items-center'}>
+                      {group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
+                      {item.uiFeature.displayName}
+                      {item.isLabs && (
+                        <Pill className="px-1.5 py-0.5" style="success">
+                          Labs
+                        </Pill>
+                      )}
                    </div>
-                  </MenuItem>
-                )
-              })}
-            </div>
-          </Fragment>
+                    {!item.isEntitled && <Icon type={PremiumFeatureIconName} className={PremiumFeatureIconClass} />}
+                  </div>
+                </MenuItem>
+              )
+            })}
+          </MenuSection>
        ))}
      </Menu>
      <ModalOverlay isOpen={showSuperImporter} close={closeCurrentSuperNoteImporter}>
--- a/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleButton.tsx
+++ b/packages/web/src/javascripts/Components/ChangeEditor/ChangeMultipleButton.tsx
@@ -25,7 +25,7 @@ const ChangeMultipleButton = ({ application, notesController }: Props) => {
        disableClickOutside={disableClickOutside}
        anchorElement={changeButtonRef}
        open={isChangeMenuOpen}
-        className="pt-2 md:pt-0"
+        className="md:pb-1"
      >
        <ChangeEditorMultipleMenu
          application={application}
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -15,7 +15,6 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
-import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import { DisplayOptionsMenuProps } from './DisplayOptionsMenuProps'
 import NewNotePreferences from './NewNotePreferences'
 import { PreferenceMode } from './PreferenceMode'
@@ -26,6 +25,7 @@ import MenuSwitchButtonItem from '@/Components/Menu/MenuSwitchButtonItem'
 import { Pill } from '@/Components/Preferences/PreferencesComponents/Content'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
+import MenuSection from '@/Components/Menu/MenuSection'

 const DailyEntryModeEnabled = true

@@ -316,45 +316,43 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
        />
      )}

-      <MenuItemSeparator />
+      <MenuSection title="Sort by">
+        <MenuRadioButtonItem
+          disabled={controlsDisabled || isDailyEntry}
+          className="py-2"
+          onClick={toggleSortByDateModified}
+          checked={preferences.sortBy === CollectionSort.UpdatedAt}
+        >
+          <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
+            <span>Date modified</span>
+            <SortIcon enabled={preferences.sortBy === CollectionSort.UpdatedAt} reverse={preferences.sortReverse} />
+          </div>
+        </MenuRadioButtonItem>
+        <MenuRadioButtonItem
+          disabled={controlsDisabled || isDailyEntry}
+          className="py-2"
+          onClick={toggleSortByCreationDate}
+          checked={preferences.sortBy === CollectionSort.CreatedAt}
+        >
+          <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
+            <span>Creation date</span>
+            <SortIcon enabled={preferences.sortBy === CollectionSort.CreatedAt} reverse={preferences.sortReverse} />
+          </div>
+        </MenuRadioButtonItem>
+        <MenuRadioButtonItem
+          disabled={controlsDisabled || isDailyEntry}
+          className="py-2"
+          onClick={toggleSortByTitle}
+          checked={preferences.sortBy === CollectionSort.Title}
+        >
+          <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
+            <span>Title</span>
+            <SortIcon enabled={preferences.sortBy === CollectionSort.Title} reverse={preferences.sortReverse} />
+          </div>
+        </MenuRadioButtonItem>
+      </MenuSection>

-      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Sort by</div>
-      <MenuRadioButtonItem
-        disabled={controlsDisabled || isDailyEntry}
-        className="py-2"
-        onClick={toggleSortByDateModified}
-        checked={preferences.sortBy === CollectionSort.UpdatedAt}
-      >
-        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
-          <span>Date modified</span>
-          <SortIcon enabled={preferences.sortBy === CollectionSort.UpdatedAt} reverse={preferences.sortReverse} />
-        </div>
-      </MenuRadioButtonItem>
-      <MenuRadioButtonItem
-        disabled={controlsDisabled || isDailyEntry}
-        className="py-2"
-        onClick={toggleSortByCreationDate}
-        checked={preferences.sortBy === CollectionSort.CreatedAt}
-      >
-        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
-          <span>Creation date</span>
-          <SortIcon enabled={preferences.sortBy === CollectionSort.CreatedAt} reverse={preferences.sortReverse} />
-        </div>
-      </MenuRadioButtonItem>
-      <MenuRadioButtonItem
-        disabled={controlsDisabled || isDailyEntry}
-        className="py-2"
-        onClick={toggleSortByTitle}
-        checked={preferences.sortBy === CollectionSort.Title}
-      >
-        <div className="ml-1 flex flex-grow items-center justify-between md:ml-2">
-          <span>Title</span>
-          <SortIcon enabled={preferences.sortBy === CollectionSort.Title} reverse={preferences.sortReverse} />
-        </div>
-      </MenuRadioButtonItem>
-      <>
-        <MenuItemSeparator />
-        <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">View</div>
+      <MenuSection title="View">
        {!shouldHideNonApplicableOptions && !isFilesSmartView && (
          <MenuSwitchButtonItem
            disabled={controlsDisabled}
@@ -389,49 +387,47 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
        >
          Show icon
        </MenuSwitchButtonItem>
-        {!shouldHideNonApplicableOptions && (
-          <>
-            <MenuItemSeparator />
-            <div className="px-3 py-1 text-base font-semibold uppercase text-text lg:text-xs">Other</div>
-            <MenuSwitchButtonItem
-              disabled={controlsDisabled}
-              className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-              checked={!preferences.hidePinned}
-              onChange={toggleHidePinned}
-            >
-              Show pinned
-            </MenuSwitchButtonItem>
-            <MenuSwitchButtonItem
-              disabled={controlsDisabled}
-              className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-              checked={!preferences.hideProtected}
-              onChange={toggleHideProtected}
-            >
-              Show protected
-            </MenuSwitchButtonItem>
-            <MenuSwitchButtonItem
-              disabled={controlsDisabled}
-              className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-              checked={Boolean(preferences.showArchived)}
-              onChange={toggleShowArchived}
-            >
-              Show archived
-            </MenuSwitchButtonItem>
-            <MenuSwitchButtonItem
-              disabled={controlsDisabled}
-              className="py-1 hover:bg-contrast focus:bg-info-backdrop"
-              checked={Boolean(preferences.showTrashed)}
-              onChange={toggleShowTrashed}
-            >
-              Show trashed
-            </MenuSwitchButtonItem>
-          </>
-        )}
-      </>
+      </MenuSection>
+
+      {!shouldHideNonApplicableOptions && (
+        <MenuSection title="Other">
+          <MenuSwitchButtonItem
+            disabled={controlsDisabled}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={!preferences.hidePinned}
+            onChange={toggleHidePinned}
+          >
+            Show pinned
+          </MenuSwitchButtonItem>
+          <MenuSwitchButtonItem
+            disabled={controlsDisabled}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={!preferences.hideProtected}
+            onChange={toggleHideProtected}
+          >
+            Show protected
+          </MenuSwitchButtonItem>
+          <MenuSwitchButtonItem
+            disabled={controlsDisabled}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={Boolean(preferences.showArchived)}
+            onChange={toggleShowArchived}
+          >
+            Show archived
+          </MenuSwitchButtonItem>
+          <MenuSwitchButtonItem
+            disabled={controlsDisabled}
+            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
+            checked={Boolean(preferences.showTrashed)}
+            onChange={toggleShowTrashed}
+          >
+            Show trashed
+          </MenuSwitchButtonItem>
+        </MenuSection>
+      )}

      {currentMode === 'tag' && !isSystemTag && DailyEntryModeEnabled && !isTableViewEnabled && (
-        <>
-          <MenuItemSeparator />
+        <MenuSection>
          <MenuSwitchButtonItem
            disabled={controlsDisabled}
            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
@@ -441,19 +437,18 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
            <div className="flex flex-col pr-5">
              <div className="flex flex-row items-center">
                <div className="text-base font-semibold uppercase text-text lg:text-xs">Daily Notebook</div>
-                <Pill className="px-1.5 !py-0.5" style="success">
+                <Pill className="!py-0.5 px-1.5" style="success">
                  Labs
                </Pill>
              </div>
              <div className="mt-1">Capture new notes daily with a calendar-based layout</div>
            </div>
          </MenuSwitchButtonItem>
-        </>
+        </MenuSection>
      )}

      {currentMode === 'tag' && !isSystemTag && !isDailyEntry && (
-        <>
-          <MenuItemSeparator />
+        <MenuSection>
          <MenuSwitchButtonItem
            disabled={controlsDisabled}
            className="py-1 hover:bg-contrast focus:bg-info-backdrop"
@@ -463,19 +458,18 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
            <div className="flex flex-col pr-5">
              <div className="flex flex-row items-center">
                <div className="text-base font-semibold uppercase text-text lg:text-xs">Table view</div>
-                <Pill className="px-1.5 !py-0.5" style="success">
+                <Pill className="!py-0.5 px-1.5" style="success">
                  Labs
                </Pill>
              </div>
              <div className="mt-1">Display the notes and files in the current tag in a table layout</div>
            </div>
          </MenuSwitchButtonItem>
-        </>
+        </MenuSection>
      )}

      {!shouldHideNonApplicableOptions && (!isSystemTag || currentMode === 'global') && (
-        <>
-          <MenuItemSeparator />
+        <MenuSection title="New note defaults">
          <NewNotePreferences
            disabled={controlsDisabled}
            application={application}
@@ -483,7 +477,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
            mode={currentMode}
            changePreferencesCallback={changePreferences}
          />
-        </>
+        </MenuSection>
      )}
    </Menu>
  )
--- a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
@@ -173,10 +173,9 @@ const NewNotePreferences: FunctionComponent<Props> = ({
  }

  return (
-    <div className="my-1 px-3 pb-2 pt-1">
-      <div className="text-base font-semibold uppercase text-text lg:text-xs">New Note Defaults</div>
+    <div className="px-3 py-3">
      <div>
-        <div className="mt-3 text-mobile-menu-item md:text-menu-item">Note Type</div>
+        <div className="text-mobile-menu-item md:text-menu-item">Note Type</div>
        <div className="mt-2">
          <Dropdown
            disabled={disabled}
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenu.tsx
@@ -22,7 +22,7 @@ const FileContextMenu: FunctionComponent<Props> = observer(({ filesController, i
      anchorPoint={fileContextMenuLocation}
      togglePopover={() => setShowFileContextMenu(!showFileContextMenu)}
      align="start"
-      className="py-2"
+      className="md:pb-2"
    >
      <Menu a11yLabel="File context menu" isOpen={showFileContextMenu}>
        <FileMenuOptions
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenuBackupOption.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileContextMenuBackupOption.tsx
@@ -4,6 +4,7 @@ import { useApplication } from '../ApplicationProvider'
 import { FileBackupRecord, FileItem } from '@standardnotes/snjs'
 import { dateToStringStyle1 } from '@/Utils/DateUtils'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
+import MenuSection from '../Menu/MenuSection'

 export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }> = ({ file }) => {
  const application = useApplication()
@@ -33,8 +34,12 @@ export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }>
    application.openPreferences('backups')
  }, [application])

+  if (!application.fileBackups) {
+    return null
+  }
+
  return (
-    <>
+    <MenuSection>
      {backupInfo && (
        <MenuItem
          icon={'check-circle'}
@@ -62,6 +67,6 @@ export const FileContextMenuBackupOption: FunctionComponent<{ file: FileItem }>
          </div>
        </MenuItem>
      )}
-    </>
+    </MenuSection>
  )
 }
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, useCallback, useMemo } from 'react'
 import { FileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
 import Icon from '@/Components/Icon/Icon'
 import { observer } from 'mobx-react-lite'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { AppPaneId } from '../Panes/AppPaneMetadata'
@@ -15,6 +14,7 @@ import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import { iconClass } from '../NotesOptions/ClassNames'
 import { useApplication } from '../ApplicationProvider'
+import MenuSection from '../Menu/MenuSection'

 type Props = {
  closeMenu: () => void
@@ -87,8 +87,8 @@ const FileMenuOptions: FunctionComponent<Props> = ({

  return (
    <>
-      {selectedFiles.length === 1 && (
-        <>
+      {selectedFiles.length === 1 && (isFileAttachedToNote || shouldShowAttachOption) && (
+        <MenuSection>
          {isFileAttachedToNote ? (
            <MenuItem onClick={onDetach}>
              <Icon type="link-off" className="mr-2 text-neutral" />
@@ -100,67 +100,69 @@ const FileMenuOptions: FunctionComponent<Props> = ({
              Attach to note
            </MenuItem>
          ) : null}
-        </>
+        </MenuSection>
      )}
-      {application.featuresController.isVaultsEnabled() && (
-        <AddToVaultMenuOption
-          iconClassName={iconClass}
-          items={selectedFiles}
-          disabled={!hasAdminPermissionForAllSharedFiles}
+      <MenuSection>
+        {application.featuresController.isVaultsEnabled() && (
+          <AddToVaultMenuOption
+            iconClassName={iconClass}
+            items={selectedFiles}
+            disabled={!hasAdminPermissionForAllSharedFiles}
+          />
+        )}
+        <AddTagOption
+          navigationController={application.navigationController}
+          linkingController={application.linkingController}
+          selectedItems={selectedFiles}
+          iconClassName={`text-neutral mr-2 ${MenuItemIconSize}`}
+          disabled={areSomeFilesInReadonlySharedVault}
        />
-      )}
-      <AddTagOption
-        navigationController={application.navigationController}
-        linkingController={application.linkingController}
-        selectedItems={selectedFiles}
-        iconClassName={`text-neutral mr-2 ${MenuItemIconSize}`}
-        disabled={areSomeFilesInReadonlySharedVault}
-      />
-      <MenuSwitchButtonItem
-        checked={hasProtectedFiles}
-        onChange={(hasProtectedFiles) => {
-          void application.filesController.setProtectionForFiles(hasProtectedFiles, selectedFiles)
-        }}
-        disabled={areSomeFilesInReadonlySharedVault}
-      >
-        <Icon type="lock" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
-        Password protect
-      </MenuSwitchButtonItem>
-      <HorizontalSeparator classes="my-1" />
-      <MenuItem
-        onClick={() => {
-          void application.filesController.downloadFiles(selectedFiles)
-          closeMenu()
-        }}
-      >
-        <Icon type="download" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
-        Download
-      </MenuItem>
-      {shouldShowRenameOption && (
-        <MenuItem
-          onClick={() => {
-            renameToggleCallback?.(true)
+        <MenuSwitchButtonItem
+          checked={hasProtectedFiles}
+          onChange={(hasProtectedFiles) => {
+            void application.filesController.setProtectionForFiles(hasProtectedFiles, selectedFiles)
          }}
          disabled={areSomeFilesInReadonlySharedVault}
        >
-          <Icon type="pencil" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
-          Rename
+          <Icon type="lock" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
+          Password protect
+        </MenuSwitchButtonItem>
+      </MenuSection>
+      <MenuSection>
+        <MenuItem
+          onClick={() => {
+            void application.filesController.downloadFiles(selectedFiles)
+            closeMenu()
+          }}
+        >
+          <Icon type="download" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
+          Download
        </MenuItem>
-      )}
-      <MenuItem
-        onClick={() => {
-          closeMenuAndToggleFilesList()
-          void application.filesController.deleteFilesPermanently(selectedFiles)
-        }}
-        disabled={areSomeFilesInReadonlySharedVault}
-      >
-        <Icon type="trash" className={`mr-2 text-danger ${MenuItemIconSize}`} />
-        <span className="text-danger">Delete permanently</span>
-      </MenuItem>
+        {shouldShowRenameOption && (
+          <MenuItem
+            onClick={() => {
+              renameToggleCallback?.(true)
+            }}
+            disabled={areSomeFilesInReadonlySharedVault}
+          >
+            <Icon type="pencil" className={`mr-2 text-neutral ${MenuItemIconSize}`} />
+            Rename
+          </MenuItem>
+        )}
+        <MenuItem
+          onClick={() => {
+            closeMenuAndToggleFilesList()
+            void application.filesController.deleteFilesPermanently(selectedFiles)
+          }}
+          disabled={areSomeFilesInReadonlySharedVault}
+        >
+          <Icon type="trash" className={`mr-2 text-danger ${MenuItemIconSize}`} />
+          <span className="text-danger">Delete permanently</span>
+        </MenuItem>
+      </MenuSection>

      <FileContextMenuBackupOption file={selectedFiles[0]} />

-      <HorizontalSeparator classes="my-2" />
      <div className="px-3 pb-0.5 pt-1 text-xs font-medium text-neutral">
        {!hasSelectedMultipleFiles && (
          <div className="mb-1">
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileOptionsPanel.tsx
@@ -19,7 +19,13 @@ const FilesOptionsPanel = ({ itemListController }: Props) => {
  return (
    <>
      <RoundIconButton label="File options menu" onClick={toggleMenu} ref={buttonRef} icon="more" />
-      <Popover title="File options" togglePopover={toggleMenu} anchorElement={buttonRef} open={isOpen} className="py-2">
+      <Popover
+        title="File options"
+        togglePopover={toggleMenu}
+        anchorElement={buttonRef}
+        open={isOpen}
+        className="md:pb-2"
+      >
        <Menu a11yLabel="File options panel" isOpen={isOpen}>
          <FileMenuOptions
            selectedFiles={itemListController.selectedFiles}
--- a/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
+++ b/packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
@@ -221,7 +221,7 @@ const FilePreviewModal = observer(({ application }: Props) => {
              togglePopover={closeOptionsMenu}
              side="bottom"
              align="start"
-              className="py-2"
+              className="md:pb-2"
              overrideZIndex="z-modal"
            >
              <Menu a11yLabel="File context menu" isOpen={showOptionsMenu}>
--- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
@@ -55,7 +55,7 @@ const QuickSettingsButton = ({ application, isMobileNavigation = false }: Props)
        open={isOpen}
        side="top"
        align="start"
-        className="py-2"
+        className="md:py-2"
      >
        <QuickSettingsMenu closeMenu={toggleMenu} />
      </Popover>
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/packages/web/src/javascripts/Components/Menu/Menu.tsx
@@ -68,7 +68,7 @@ const Menu = forwardRef(

    return (
      <menu
-        className={`m-0 list-none pl-0 focus:shadow-none ${className}`}
+        className={`m-0 list-none px-4 focus:shadow-none md:px-0 ${className}`}
        onKeyDown={handleKeyDown}
        ref={mergeRefs([menuElementRef, forwardedRef])}
        style={style}
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -40,7 +40,7 @@ const MenuItem = forwardRef(
          role="menuitem"
          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
          className={classNames(
-            'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
+            'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
            'text-mobile-menu-item text-text enabled:hover:bg-contrast enabled:hover:text-foreground',
            'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
            'disabled:cursor-not-allowed disabled:opacity-60',
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -74,7 +74,7 @@ const MenuRadioButtonItem = forwardRef(
          role="menuitemradio"
          tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
          className={classNames(
-            'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2 text-left md:py-1.5',
+            'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
            'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
            'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
            className,
--- a/packages/web/src/javascripts/Components/Menu/MenuSection.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSection.tsx
@@ -0,0 +1,26 @@
+import { classNames } from '@standardnotes/snjs'
+import { ReactNode } from 'react'
+
+const MenuSection = ({
+  title,
+  className,
+  children,
+}: {
+  title?: ReactNode
+  className?: string
+  children: ReactNode
+}) => {
+  return (
+    <div
+      className={classNames(
+        'my-4 md:my-2 md:border-b md:border-border md:pb-2 md:last:mb-0 md:last:border-b-0 md:last:pb-0 md:translucent-ui:border-[--popover-border-color]',
+        className,
+      )}
+    >
+      {title && <div className="px-3 py-1 text-sm font-semibold uppercase text-text lg:text-xs">{title}</div>}
+      <div className="divide-y divide-passive-3 rounded bg-passive-4 md:divide-none md:bg-transparent">{children}</div>
+    </div>
+  )
+}
+
+export default MenuSection
--- a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
@@ -36,7 +36,7 @@ const MenuSwitchButtonItem = forwardRef(
          disabled={disabled}
          ref={ref}
          className={classNames(
-            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5',
+            'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 md:py-1.5',
            'text-left text-text focus:bg-info-backdrop focus:shadow-none enabled:hover:bg-contrast enabled:hover:text-foreground',
            'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
            'disabled:cursor-not-allowed disabled:opacity-60',
--- a/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesContextMenu/NotesContextMenu.tsx
@@ -26,7 +26,6 @@ const NotesContextMenu = () => {
        y: contextMenuClickLocation.y,
      }}
      disableClickOutside={disableClickOutside}
-      className="py-2"
      open={contextMenuOpen}
      togglePopover={closeMenu}
    >
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -77,7 +77,7 @@ const AddTagOption: FunctionComponent<Props> = ({
        className="py-2"
        overrideZIndex="z-modal"
      >
-        <Menu a11yLabel="Tag selection menu" isOpen={isOpen}>
+        <Menu a11yLabel="Tag selection menu" isOpen={isOpen} className="!px-0">
          {navigationController.tags.map((tag) => (
            <MenuItem
              key={tag.uuid}
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -60,7 +60,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
        title="Change note type"
        align="start"
        anchorElement={buttonRef}
-        className="pt-2 md:pt-0"
+        className="md:pb-1"
        open={isOpen}
        side="right"
        togglePopover={toggleMenu}
--- a/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsMenu.tsx
@@ -1,10 +1,11 @@
 import { WebApplication } from '@/Application/WebApplication'
 import { Action, SNNote } from '@standardnotes/snjs'
-import { Fragment, useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { ListedMenuGroup } from './ListedMenuGroup'
 import ListedMenuItem from './ListedMenuItem'
 import Spinner from '@/Components/Spinner/Spinner'
+import MenuSection from '@/Components/Menu/MenuSection'

 type ListedActionsMenuProps = {
  application: WebApplication
@@ -125,15 +126,15 @@ const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
      )}
      {!isFetchingAccounts && menuGroups.length ? (
        <>
-          {menuGroups.map((group, index) => (
-            <Fragment key={group.account.authorId}>
-              <div
-                className={`text-input flex w-full items-center border-y border-solid border-border px-2.5 py-2 font-semibold text-text ${
-                  index === 0 ? 'mb-1 border-t-0' : 'my-1'
-                }`}
-              >
-                <Icon type="notes" className="mr-2 text-info" /> {group.name}
-              </div>
+          {menuGroups.map((group) => (
+            <MenuSection
+              key={group.account.authorId}
+              title={
+                <div className="flex items-center">
+                  <Icon type="notes" className="mr-2 text-info" /> {group.name}
+                </div>
+              }
+            >
              {group.actions.length ? (
                group.actions.map((action) => (
                  <ListedMenuItem
@@ -148,7 +149,7 @@ const ListedActionsMenu = ({ application, note }: ListedActionsMenuProps) => {
              ) : (
                <div className="select-none px-3 py-2 text-sm text-passive-0">No actions available</div>
              )}
-            </Fragment>
+            </MenuSection>
          ))}
        </>
      ) : null}
--- a/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/Listed/ListedActionsOption.tsx
@@ -54,7 +54,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note, icon
        open={isOpen}
        side="right"
        align="end"
-        className="pt-2 md:pt-0"
+        className="px-4 md:px-0 md:pt-0"
      >
        <ListedActionsMenu application={application} note={note} />
      </Popover>
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -18,7 +18,6 @@ import ListedActionsOption from './Listed/ListedActionsOption'
 import AddTagOption from './AddTagOption'
 import { addToast, dismissToast, ToastType } from '@standardnotes/toast'
 import { NotesOptionsProps } from './NotesOptionsProps'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { AppPaneId } from '../Panes/AppPaneMetadata'
 import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils'
@@ -42,6 +41,7 @@ import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import Menu from '../Menu/Menu'
 import Popover from '../Popover/Popover'
+import MenuSection from '../Menu/MenuSection'

 const iconSize = MenuItemIconSize
 const iconClassDanger = `text-danger mr-2 ${iconSize}`
@@ -230,271 +230,282 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
    <>
      {notes.length === 1 && (
        <>
-          <MenuItem onClick={openRevisionHistoryModal}>
-            <Icon type="history" className={iconClass} />
-            Note history
-            {historyShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={historyShortcut} />}
-          </MenuItem>
-          <HorizontalSeparator classes="my-2" />
-          <MenuItem onClick={toggleLineWidthModal} disabled={areSomeNotesInReadonlySharedVault}>
-            <Icon type="line-width" className={iconClass} />
-            Editor width
-            {editorWidthShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={editorWidthShortcut} />}
-          </MenuItem>
+          <MenuSection>
+            <MenuItem onClick={openRevisionHistoryModal}>
+              <Icon type="history" className={iconClass} />
+              Note history
+              {historyShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={historyShortcut} />}
+            </MenuItem>
+          </MenuSection>
+          <MenuSection>
+            <MenuItem onClick={toggleLineWidthModal} disabled={areSomeNotesInReadonlySharedVault}>
+              <Icon type="line-width" className={iconClass} />
+              Editor width
+              {editorWidthShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={editorWidthShortcut} />}
+            </MenuItem>
+          </MenuSection>
        </>
      )}
-      <MenuSwitchButtonItem
-        checked={locked}
-        onChange={(locked) => {
-          application.notesController.setLockSelectedNotes(locked)
-        }}
-        disabled={areSomeNotesInReadonlySharedVault}
-      >
-        <Icon type="pencil-off" className={iconClass} />
-        Prevent editing
-      </MenuSwitchButtonItem>
-      <MenuSwitchButtonItem
-        checked={!hidePreviews}
-        onChange={(hidePreviews) => {
-          application.notesController.setHideSelectedNotePreviews(!hidePreviews)
-        }}
-        disabled={areSomeNotesInReadonlySharedVault}
-      >
-        <Icon type="rich-text" className={iconClass} />
-        Show preview
-      </MenuSwitchButtonItem>
-      <MenuSwitchButtonItem
-        checked={protect}
-        onChange={(protect) => {
-          application.notesController.setProtectSelectedNotes(protect).catch(console.error)
-        }}
-        disabled={areSomeNotesInReadonlySharedVault}
-      >
-        <Icon type="lock" className={iconClass} />
-        Password protect
-      </MenuSwitchButtonItem>
+      <MenuSection>
+        <MenuSwitchButtonItem
+          checked={locked}
+          onChange={(locked) => {
+            application.notesController.setLockSelectedNotes(locked)
+          }}
+          disabled={areSomeNotesInReadonlySharedVault}
+        >
+          <Icon type="pencil-off" className={iconClass} />
+          Prevent editing
+        </MenuSwitchButtonItem>
+        <MenuSwitchButtonItem
+          checked={!hidePreviews}
+          onChange={(hidePreviews) => {
+            application.notesController.setHideSelectedNotePreviews(!hidePreviews)
+          }}
+          disabled={areSomeNotesInReadonlySharedVault}
+        >
+          <Icon type="rich-text" className={iconClass} />
+          Show preview
+        </MenuSwitchButtonItem>
+        <MenuSwitchButtonItem
+          checked={protect}
+          onChange={(protect) => {
+            application.notesController.setProtectSelectedNotes(protect).catch(console.error)
+          }}
+          disabled={areSomeNotesInReadonlySharedVault}
+        >
+          <Icon type="lock" className={iconClass} />
+          Password protect
+        </MenuSwitchButtonItem>
+      </MenuSection>
      {notes.length === 1 && (
-        <>
-          <HorizontalSeparator classes="my-2" />
+        <MenuSection>
          <ChangeEditorOption
            iconClassName={iconClass}
            application={application}
            note={notes[0]}
            disabled={areSomeNotesInReadonlySharedVault}
          />
-        </>
-      )}
-      <HorizontalSeparator classes="my-2" />
-
-      {application.featuresController.isVaultsEnabled() && (
-        <AddToVaultMenuOption iconClassName={iconClass} items={notes} disabled={!hasAdminPermissionForAllSharedNotes} />
+        </MenuSection>
      )}

-      {application.navigationController.tagsCount > 0 && (
-        <AddTagOption
-          iconClassName={iconClass}
-          navigationController={application.navigationController}
-          selectedItems={notes}
-          linkingController={application.linkingController}
-          disabled={areSomeNotesInReadonlySharedVault}
-        />
-      )}
-      <MenuItem
-        onClick={() => {
-          application.notesController.setStarSelectedNotes(!starred)
-        }}
-        disabled={areSomeNotesInReadonlySharedVault}
-      >
-        <Icon type="star" className={iconClass} />
-        {starred ? 'Unstar' : 'Star'}
-        {starShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={starShortcut} />}
-      </MenuItem>
+      <MenuSection>
+        {application.featuresController.isVaultsEnabled() && (
+          <AddToVaultMenuOption
+            iconClassName={iconClass}
+            items={notes}
+            disabled={!hasAdminPermissionForAllSharedNotes}
+          />
+        )}

-      {unpinned && (
+        {application.navigationController.tagsCount > 0 && (
+          <AddTagOption
+            iconClassName={iconClass}
+            navigationController={application.navigationController}
+            selectedItems={notes}
+            linkingController={application.linkingController}
+            disabled={areSomeNotesInReadonlySharedVault}
+          />
+        )}
        <MenuItem
          onClick={() => {
-            application.notesController.setPinSelectedNotes(true)
+            application.notesController.setStarSelectedNotes(!starred)
          }}
          disabled={areSomeNotesInReadonlySharedVault}
        >
-          <Icon type="pin" className={iconClass} />
-          Pin to top
-          {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
+          <Icon type="star" className={iconClass} />
+          {starred ? 'Unstar' : 'Star'}
+          {starShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={starShortcut} />}
        </MenuItem>
-      )}
-      {pinned && (
-        <MenuItem
-          onClick={() => {
-            application.notesController.setPinSelectedNotes(false)
-          }}
-          disabled={areSomeNotesInReadonlySharedVault}
-        >
-          <Icon type="unpin" className={iconClass} />
-          Unpin
-          {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
-        </MenuItem>
-      )}
-      {isOnlySuperNoteSelected ? (
-        <>
-          <MenuItem
-            ref={superExportButtonRef}
-            onClick={() => {
-              setIsSuperExportMenuOpen((open) => !open)
-            }}
-          >
-            <div className="flex items-center">
-              <Icon type="download" className={iconClass} />
-              Export
-            </div>
-            <Icon type="chevron-right" className="ml-auto text-neutral" />
-          </MenuItem>
-          <Popover
-            title="Export note"
-            side="left"
-            align="start"
-            open={isSuperExportMenuOpen}
-            anchorElement={superExportButtonRef.current}
-            togglePopover={() => {
-              setIsSuperExportMenuOpen(!isSuperExportMenuOpen)
-            }}
-            className="py-1"
-          >
-            <Menu a11yLabel={'Super note export menu'} isOpen={isSuperExportMenuOpen}>
-              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}>
-                <Icon type="code" className={iconClass} />
-                Export as JSON
-              </MenuItem>
-              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, notes[0].title)}>
-                <Icon type="markdown" className={iconClass} />
-                Export as Markdown
-              </MenuItem>
-              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, notes[0].title)}>
-                <Icon type="rich-text" className={iconClass} />
-                Export as HTML
-              </MenuItem>
-            </Menu>
-          </Popover>
-        </>
-      ) : (
-        <>
+
+        {unpinned && (
          <MenuItem
            onClick={() => {
-              if (application.isNativeMobileWeb()) {
-                void shareSelectedNotes(application, notes)
-              } else {
-                const hasSuperNote = notes.some((note) => note.noteType === NoteType.Super)
-
-                if (hasSuperNote) {
-                  setShowExportSuperModal(true)
-                  return
-                }
-
-                void downloadSelectedItems()
-              }
-            }}
-          >
-            <Icon type={application.platform === Platform.Android ? 'share' : 'download'} className={iconClass} />
-            {application.platform === Platform.Android ? 'Share' : 'Export'}
-          </MenuItem>
-          {application.platform === Platform.Android && (
-            <MenuItem onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
-              <Icon type="download" className={iconClass} />
-              Export
-            </MenuItem>
-          )}
-        </>
-      )}
-      <MenuItem onClick={duplicateSelectedItems} disabled={areSomeNotesInReadonlySharedVault}>
-        <Icon type="copy" className={iconClass} />
-        Duplicate
-      </MenuItem>
-      {unarchived && (
-        <MenuItem
-          onClick={async () => {
-            await application.notesController.setArchiveSelectedNotes(true).catch(console.error)
-            closeMenuAndToggleNotesList()
-          }}
-          disabled={areSomeNotesInReadonlySharedVault}
-        >
-          <Icon type="archive" className={iconClassWarning} />
-          <span className="text-warning">Archive</span>
-        </MenuItem>
-      )}
-      {archived && (
-        <MenuItem
-          onClick={async () => {
-            await application.notesController.setArchiveSelectedNotes(false).catch(console.error)
-            closeMenuAndToggleNotesList()
-          }}
-          disabled={areSomeNotesInReadonlySharedVault}
-        >
-          <Icon type="unarchive" className={iconClassWarning} />
-          <span className="text-warning">Unarchive</span>
-        </MenuItem>
-      )}
-      {notTrashed &&
-        (altKeyDown ? (
-          <MenuItem
-            disabled={areSomeNotesInReadonlySharedVault}
-            onClick={async () => {
-              await application.notesController.deleteNotesPermanently()
-              closeMenuAndToggleNotesList()
-            }}
-          >
-            <Icon type="close" className="mr-2 text-danger" />
-            <span className="text-danger">Delete permanently</span>
-          </MenuItem>
-        ) : (
-          <MenuItem
-            onClick={async () => {
-              await application.notesController.setTrashSelectedNotes(true)
-              closeMenuAndToggleNotesList()
+              application.notesController.setPinSelectedNotes(true)
            }}
            disabled={areSomeNotesInReadonlySharedVault}
          >
-            <Icon type="trash" className={iconClassDanger} />
-            <span className="text-danger">Move to trash</span>
+            <Icon type="pin" className={iconClass} />
+            Pin to top
+            {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
          </MenuItem>
-        ))}
-      {trashed && (
-        <>
+        )}
+        {pinned && (
          <MenuItem
-            onClick={async () => {
-              await application.notesController.setTrashSelectedNotes(false)
-              closeMenuAndToggleNotesList()
+            onClick={() => {
+              application.notesController.setPinSelectedNotes(false)
            }}
            disabled={areSomeNotesInReadonlySharedVault}
          >
-            <Icon type="restore" className={iconClassSuccess} />
-            <span className="text-success">Restore</span>
+            <Icon type="unpin" className={iconClass} />
+            Unpin
+            {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
          </MenuItem>
-          <MenuItem
-            disabled={areSomeNotesInReadonlySharedVault}
-            onClick={async () => {
-              await application.notesController.deleteNotesPermanently()
-              closeMenuAndToggleNotesList()
-            }}
-          >
-            <Icon type="close" className="mr-2 text-danger" />
-            <span className="text-danger">Delete permanently</span>
-          </MenuItem>
-          <MenuItem
-            onClick={async () => {
-              await application.notesController.emptyTrash()
-              closeMenuAndToggleNotesList()
-            }}
-            disabled={areSomeNotesInReadonlySharedVault}
-          >
-            <div className="flex items-start">
-              <Icon type="trash-sweep" className="mr-2 text-danger" />
-              <div className="flex-row">
-                <div className="text-danger">Empty Trash</div>
-                <div className="text-xs">{application.notesController.trashedNotesCount} notes in Trash</div>
+        )}
+        {isOnlySuperNoteSelected ? (
+          <>
+            <MenuItem
+              ref={superExportButtonRef}
+              onClick={() => {
+                setIsSuperExportMenuOpen((open) => !open)
+              }}
+            >
+              <div className="flex items-center">
+                <Icon type="download" className={iconClass} />
+                Export
              </div>
-            </div>
+              <Icon type="chevron-right" className="ml-auto text-neutral" />
+            </MenuItem>
+            <Popover
+              title="Export note"
+              side="left"
+              align="start"
+              open={isSuperExportMenuOpen}
+              anchorElement={superExportButtonRef.current}
+              togglePopover={() => {
+                setIsSuperExportMenuOpen(!isSuperExportMenuOpen)
+              }}
+              className="md:py-1"
+            >
+              <Menu a11yLabel={'Super note export menu'} isOpen={isSuperExportMenuOpen}>
+                <MenuSection>
+                  <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}>
+                    <Icon type="code" className={iconClass} />
+                    Export as JSON
+                  </MenuItem>
+                  <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, notes[0].title)}>
+                    <Icon type="markdown" className={iconClass} />
+                    Export as Markdown
+                  </MenuItem>
+                  <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, notes[0].title)}>
+                    <Icon type="rich-text" className={iconClass} />
+                    Export as HTML
+                  </MenuItem>
+                </MenuSection>
+              </Menu>
+            </Popover>
+          </>
+        ) : (
+          <>
+            <MenuItem
+              onClick={() => {
+                if (application.isNativeMobileWeb()) {
+                  void shareSelectedNotes(application, notes)
+                } else {
+                  const hasSuperNote = notes.some((note) => note.noteType === NoteType.Super)
+
+                  if (hasSuperNote) {
+                    setShowExportSuperModal(true)
+                    return
+                  }
+
+                  void downloadSelectedItems()
+                }
+              }}
+            >
+              <Icon type={application.platform === Platform.Android ? 'share' : 'download'} className={iconClass} />
+              {application.platform === Platform.Android ? 'Share' : 'Export'}
+            </MenuItem>
+            {application.platform === Platform.Android && (
+              <MenuItem onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
+                <Icon type="download" className={iconClass} />
+                Export
+              </MenuItem>
+            )}
+          </>
+        )}
+        <MenuItem onClick={duplicateSelectedItems} disabled={areSomeNotesInReadonlySharedVault}>
+          <Icon type="copy" className={iconClass} />
+          Duplicate
+        </MenuItem>
+        {unarchived && (
+          <MenuItem
+            onClick={async () => {
+              await application.notesController.setArchiveSelectedNotes(true).catch(console.error)
+              closeMenuAndToggleNotesList()
+            }}
+            disabled={areSomeNotesInReadonlySharedVault}
+          >
+            <Icon type="archive" className={iconClassWarning} />
+            <span className="text-warning">Archive</span>
          </MenuItem>
-        </>
-      )}
+        )}
+        {archived && (
+          <MenuItem
+            onClick={async () => {
+              await application.notesController.setArchiveSelectedNotes(false).catch(console.error)
+              closeMenuAndToggleNotesList()
+            }}
+            disabled={areSomeNotesInReadonlySharedVault}
+          >
+            <Icon type="unarchive" className={iconClassWarning} />
+            <span className="text-warning">Unarchive</span>
+          </MenuItem>
+        )}
+        {notTrashed &&
+          (altKeyDown ? (
+            <MenuItem
+              disabled={areSomeNotesInReadonlySharedVault}
+              onClick={async () => {
+                await application.notesController.deleteNotesPermanently()
+                closeMenuAndToggleNotesList()
+              }}
+            >
+              <Icon type="close" className="mr-2 text-danger" />
+              <span className="text-danger">Delete permanently</span>
+            </MenuItem>
+          ) : (
+            <MenuItem
+              onClick={async () => {
+                await application.notesController.setTrashSelectedNotes(true)
+                closeMenuAndToggleNotesList()
+              }}
+              disabled={areSomeNotesInReadonlySharedVault}
+            >
+              <Icon type="trash" className={iconClassDanger} />
+              <span className="text-danger">Move to trash</span>
+            </MenuItem>
+          ))}
+        {trashed && (
+          <>
+            <MenuItem
+              onClick={async () => {
+                await application.notesController.setTrashSelectedNotes(false)
+                closeMenuAndToggleNotesList()
+              }}
+              disabled={areSomeNotesInReadonlySharedVault}
+            >
+              <Icon type="restore" className={iconClassSuccess} />
+              <span className="text-success">Restore</span>
+            </MenuItem>
+            <MenuItem
+              disabled={areSomeNotesInReadonlySharedVault}
+              onClick={async () => {
+                await application.notesController.deleteNotesPermanently()
+                closeMenuAndToggleNotesList()
+              }}
+            >
+              <Icon type="close" className="mr-2 text-danger" />
+              <span className="text-danger">Delete permanently</span>
+            </MenuItem>
+            <MenuItem
+              onClick={async () => {
+                await application.notesController.emptyTrash()
+                closeMenuAndToggleNotesList()
+              }}
+              disabled={areSomeNotesInReadonlySharedVault}
+            >
+              <div className="flex items-start">
+                <Icon type="trash-sweep" className="mr-2 text-danger" />
+                <div className="flex-row">
+                  <div className="text-danger">Empty Trash</div>
+                  <div className="text-xs">{application.notesController.trashedNotesCount} notes in Trash</div>
+                </div>
+              </div>
+            </MenuItem>
+          </>
+        )}
+      </MenuSection>

      {notes.length === 1 ? (
        <>
@@ -507,25 +518,22 @@ const NotesOptions = ({ notes, closeMenu }: NotesOptionsProps) => {
          )}

          {!areSomeNotesInSharedVault && (
-            <>
-              <HorizontalSeparator classes="my-2" />
+            <MenuSection>
              <ListedActionsOption iconClassName={iconClass} application={application} note={notes[0]} />
-            </>
+            </MenuSection>
          )}

-          <HorizontalSeparator classes="my-2" />
-
          {editorForNote && (
-            <SpellcheckOptions
-              editorForNote={editorForNote}
-              notesController={application.notesController}
-              note={notes[0]}
-              disabled={areSomeNotesInReadonlySharedVault}
-            />
+            <MenuSection>
+              <SpellcheckOptions
+                editorForNote={editorForNote}
+                notesController={application.notesController}
+                note={notes[0]}
+                disabled={areSomeNotesInReadonlySharedVault}
+              />
+            </MenuSection>
          )}

-          <HorizontalSeparator classes="my-2" />
-
          <NoteAttributes className="mb-2" application={application} note={notes[0]} />

          <NoteSizeWarning note={notes[0]} />
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptionsPanel.tsx
@@ -37,7 +37,7 @@ const NotesOptionsPanel = ({ notesController, onClickPreprocessing }: Props) =>
        togglePopover={toggleMenu}
        anchorElement={buttonRef}
        open={isOpen}
-        className="select-none pt-2"
+        className="select-none"
      >
        <Menu a11yLabel="Note options menu" isOpen={isOpen}>
          <NotesOptions
--- a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
@@ -3,8 +3,8 @@ import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import Icon from '../Icon/Icon'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import MenuItem from '../Menu/MenuItem'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { iconClass } from './ClassNames'
+import MenuSection from '../Menu/MenuSection'

 type Props = {
  note: SNNote
@@ -14,17 +14,13 @@ type Props = {

 const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => {
  return (
-    <>
-      <HorizontalSeparator classes="my-2" />
-
-      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Super</div>
-
+    <MenuSection>
      <MenuItem onClick={enableSuperMarkdownPreview}>
        <Icon type="markdown" className={iconClass} />
        Show Markdown
        {markdownShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={markdownShortcut} />}
      </MenuItem>
-    </>
+    </MenuSection>
  )
 }

--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -19,7 +19,7 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { useApplication } from '../ApplicationProvider'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
-import MenuItemSeparator from '../Menu/MenuItemSeparator'
+import MenuSection from '../Menu/MenuSection'

 type MenuProps = {
  closeMenu: () => void
@@ -117,8 +117,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
  return (
    <Menu a11yLabel="Quick settings menu" isOpen>
      {editorStackComponents.length > 0 && (
-        <>
-          <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
+        <MenuSection title="Tools">
          {editorStackComponents.map((component) => (
            <MenuSwitchButtonItem
              onChange={() => {
@@ -131,17 +130,17 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
              {component.displayName}
            </MenuSwitchButtonItem>
          ))}
-          <MenuItemSeparator />
-        </>
+        </MenuSection>
      )}
-      <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
-      <MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
-        Default
-      </MenuRadioButtonItem>
-      {themes.map((theme) => (
-        <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
-      ))}
-      <MenuItemSeparator />
+      <MenuSection title="Appearance">
+        <MenuRadioButtonItem checked={defaultThemeOn} onClick={toggleDefaultTheme} ref={defaultThemeButtonRef}>
+          Default
+        </MenuRadioButtonItem>
+        {themes.map((theme) => (
+          <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
+        ))}
+      </MenuSection>
+
      <FocusModeSwitch
        application={application}
        onToggle={setFocusModeEnabled}
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/TableCellActionMenuPlugin/index.tsx
@@ -390,7 +390,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, cellMerge }:
    (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN

  return (
-    <Menu className="dropdown" ref={dropDownRef} a11yLabel="Table actions menu" isOpen>
+    <Menu className="dropdown !px-0" ref={dropDownRef} a11yLabel="Table actions menu" isOpen>
      {mergeCellButton}
      {!!mergeCellButton && <MenuItemSeparator />}
      <MenuItem onClick={() => insertTableRowAtSelection(false)}>
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -685,7 +685,7 @@ const ToolbarPlugin = () => {
            }

            return (
-              <Menu a11yLabel="Table of contents" isOpen>
+              <Menu a11yLabel="Table of contents" isOpen className="!px-0">
                {tableOfContents.map(([key, text, tag]) => (
                  <MenuItem
                    key={key}