Merge pull request #22089 from overleaf/td-bs5-menu-item-reduce-height

Reduce the height of menu items in BS5 to 36px

GitOrigin-RevId: 0d6294f1713618bc97562c92ea877aaeac8b9698

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
 import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
 import AddLabelModal from '../../add-label-modal'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type DownloadProps = {
   projectId: string
@@ -25,7 +26,7 @@ function AddLabel({
   }
 
   return (
-    <>
+    <DropdownListItem>
       <OLDropdownMenuItem
         onClick={handleClick}
         leadingIcon={<OLTagIcon />}
@@ -40,7 +41,7 @@ function AddLabel({
         setShow={setShowModal}
         version={version}
       />
-    </>
+    </DropdownListItem>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx

@@ -2,6 +2,7 @@ import { useHistoryContext } from '../../../../context/history-context'
 import { UpdateRange } from '../../../../services/types/update'
 import { ReactNode } from 'react'
 import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type CompareProps = {
   comparisonRange: UpdateRange
@@ -32,15 +33,17 @@ function CompareDropDownItem({
   }
 
   return (
-    <OLDropdownMenuItem
-      {...props}
-      leadingIcon={icon}
-      as="button"
-      onClick={handleCompareVersion}
-      className="dropdown-item-material-icon-small"
-    >
-      {text}
-    </OLDropdownMenuItem>
+    <DropdownListItem>
+      <OLDropdownMenuItem
+        {...props}
+        leadingIcon={icon}
+        as="button"
+        onClick={handleCompareVersion}
+        className="dropdown-item-material-icon-small"
+      >
+        {text}
+      </OLDropdownMenuItem>
+    </DropdownListItem>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx

@@ -3,6 +3,7 @@ import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-ite
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
 import Icon from '../../../../../../shared/components/icon'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type DownloadProps = {
   projectId: string
@@ -19,21 +20,23 @@ function Download({
   const { t } = useTranslation()
 
   return (
-    <OLDropdownMenuItem
-      href={`/project/${projectId}/version/${version}/zip`}
-      download={`${projectId}_v${version}.zip`}
-      rel="noreferrer"
-      onClick={closeDropdown}
-      leadingIcon={
-        <BootstrapVersionSwitcher
-          bs3={<Icon type="cloud-download" fw />}
-          bs5={<MaterialIcon type="download" />}
-        />
-      }
-      {...props}
-    >
-      {t('history_download_this_version')}
-    </OLDropdownMenuItem>
+    <DropdownListItem>
+      <OLDropdownMenuItem
+        href={`/project/${projectId}/version/${version}/zip`}
+        download={`${projectId}_v${version}.zip`}
+        rel="noreferrer"
+        onClick={closeDropdown}
+        leadingIcon={
+          <BootstrapVersionSwitcher
+            bs3={<Icon type="cloud-download" fw />}
+            bs5={<MaterialIcon type="download" />}
+          />
+        }
+        {...props}
+      >
+        {t('history_download_this_version')}
+      </OLDropdownMenuItem>
+    </DropdownListItem>
   )
 }
 

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx

@@ -9,6 +9,7 @@ import withErrorBoundary from '@/infrastructure/error-boundary'
 import { RestoreProjectErrorModal } from '../../../diff-view/modals/restore-project-error-modal'
 import MaterialIcon from '@/shared/components/material-icon'
 import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 type RestoreProjectProps = {
   projectId: string
@@ -45,7 +46,7 @@ const RestoreProject = ({
   }
 
   return (
-    <>
+    <DropdownListItem>
       <OLDropdownMenuItem
         as="button"
         leadingIcon={
@@ -65,7 +66,7 @@ const RestoreProject = ({
         isRestoring={isRestoring}
         onRestore={onRestore}
       />
-    </>
+    </DropdownListItem>
   )
 }
 

services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export default function DropdownListItem({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <li role="none">{children}</li>
+}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx

@@ -1,7 +1,7 @@
 import { sendMB } from '@/infrastructure/event-tracking'
 import { useTranslation } from 'react-i18next'
 import { DropdownItem } from 'react-bootstrap-5'
-import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 
 export default function ContactUsItem({
   showModal,
@@ -11,7 +11,7 @@ export default function ContactUsItem({
   const { t } = useTranslation()
 
   return (
-    <NavDropdownItem>
+    <DropdownListItem>
       <DropdownItem
         as="button"
         role="menuitem"
@@ -22,6 +22,6 @@ export default function ContactUsItem({
       >
         {t('contact_us')}
       </DropdownItem>
-    </NavDropdownItem>
+    </DropdownListItem>
   )
 }

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx

@@ -4,7 +4,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-
 import getMeta from '@/utils/meta'
 import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
 import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
-import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
 import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
 
@@ -35,7 +35,7 @@ export default function LoggedInItems({
           </NavDropdownLinkItem>
         ) : null}
         <NavDropdownDivider />
-        <NavDropdownItem>
+        <DropdownListItem>
           {
             // The button is outside the form but still belongs to it via the
             // form attribute. The reason to do this is that if the button is
@@ -53,7 +53,7 @@ export default function LoggedInItems({
           <form id={logOutFormId} method="POST" action="/logout">
             <input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
           </form>
-        </NavDropdownItem>
+        </DropdownListItem>
       </NavDropdownMenu>
     </>
   )

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx

@@ -3,7 +3,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-
 import { sendMB } from '@/infrastructure/event-tracking'
 import { isDropdownLinkItem } from '@/features/ui/components/bootstrap-5/navbar/util'
 import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
-import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
 import ContactUsItem from '@/features/ui/components/bootstrap-5/navbar/contact-us-item'
 
@@ -35,9 +35,9 @@ export default function NavDropdownFromData({
           )
         } else {
           return (
-            <NavDropdownItem key={index}>
+            <DropdownListItem key={index}>
               {child.translatedText}
-            </NavDropdownItem>
+            </DropdownListItem>
           )
         }
       })}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react'
-
-export default function NavDropdownItem({ children }: { children: ReactNode }) {
-  return <li role="none">{children}</li>
-}

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
+import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
 import { DropdownItem } from 'react-bootstrap-5'
 import { DropdownItemProps } from 'react-bootstrap-5/DropdownItem'
 
@@ -13,10 +13,10 @@ export default function NavDropdownLinkItem({
   children: ReactNode
 }) {
   return (
-    <NavDropdownItem>
+    <DropdownListItem>
       <DropdownItem href={href} role="menuitem" onClick={onClick}>
         {children}
       </DropdownItem>
-    </NavDropdownItem>
+    </DropdownListItem>
   )
 }

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -257,7 +257,7 @@ $dropdown-border-radius: var(--border-radius-base);
 $dropdown-padding-x: var(--spacing-02);
 $dropdown-padding-y: var(--spacing-02);
 $dropdown-item-padding-x: var(--spacing-04);
-$dropdown-item-padding-y: var(--spacing-05);
+$dropdown-item-padding-y: var(--spacing-04);
 $dropdown-header-color: var(--content-secondary);
 
 // Offcanvas

services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss

@@ -55,7 +55,7 @@
   display: grid;
   grid-auto-flow: column;
   place-content: center start;
-  min-height: 44px; // a minimum height of 44px to be accessible for touch screens
+  min-height: 36px; // a minimum height of 36px to be accessible for touch screens
   position: relative;
 
   &:active {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss

@@ -380,19 +380,6 @@ history-root {
   }
 }
 
-.history-version-dropdown-menu {
-  [role='menuitem'] {
-    padding: var(--spacing-05);
-    color: var(--content-primary);
-
-    &:hover,
-    &:focus {
-      color: var(--content-primary);
-      background-color: var(--bg-light-secondary);
-    }
-  }
-}
-
 .document-diff-container {
   height: 100%;
   display: flex;