fix(admin/nav): Ensure that the "Exit admin" button can be clicked regardless...

fix(admin/nav): Ensure that the "Exit admin" button can be clicked regardless of locale or viewport size (#45882)

Closes #45876

frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx

 import styled from "@emotion/styled";
 
+import { doNotForwardProps } from "metabase/common/utils/doNotForwardProps";
 import Link from "metabase/core/components/Link";
-import { alpha, color } from "metabase/lib/colors";
+import { breakpointMaxLarge } from "metabase/styled-components/theme";
 
 interface AdminNavLinkProps {
   to: string;
   isSelected?: boolean;
+  isInMobileNav?: boolean;
 }
 
 export const AdminNavLink = styled(Link)<AdminNavLinkProps>`
+  white-space: nowrap;
+  ${props => (props.isInMobileNav ? "" : "overflow: hidden;")}
+  text-overflow: ellipsis;
   padding: 0.5rem 1rem;
-  text-decoration: none;
+  ${breakpointMaxLarge} {
+    padding-inline: 0.85rem;
+  }
+
   color: ${props =>
-    props.isSelected ? color("text-white") : alpha("text-white", 0.63)};
+    props.isSelected
+      ? "var(--mb-color-text-white)"
+      : "color-mix(in srgb, var(--mb-color-text-white), transparent 37%)"};
+`;
+
+export const AdminNavListItem = styled(
+  "li",
+  doNotForwardProps("path", "currentPath"),
+)<{ path: string; currentPath: string }>`
+  display: inline-flex;
+  flex-shrink: 1;
+  white-space: nowrap;
+  justify-content: center;
+  min-width: ${props =>
+    props.currentPath.startsWith(props.path) ? "fit-content" : "0px"};
 `;

frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx

-import { AdminNavLink } from "./AdminNavItem.styled";
+import { AdminNavLink, AdminNavListItem } from "./AdminNavItem.styled";
 
 interface AdminNavItemProps {
   name: string;
@@ -11,9 +11,9 @@ export const AdminNavItem = ({
   path,
   currentPath,
 }: AdminNavItemProps) => (
-  <li>
+  <AdminNavListItem path={path} currentPath={currentPath}>
     <AdminNavLink to={path} isSelected={currentPath.startsWith(path)}>
       {name}
     </AdminNavLink>
-  </li>
+  </AdminNavListItem>
 );

frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.styled.tsx

@@ -24,15 +24,16 @@ export const AdminNavbarRoot = styled.nav`
 
 export const AdminNavbarItems = styled.ul`
   display: flex;
-  flex: 1 0 auto;
-  margin-right: auto;
-  margin-left: 2rem;
+  flex-grow: 0;
+  min-width: 0;
 `;
 
 export const MobileHide = styled.div`
   display: flex;
-  flex: 1 0 auto;
   align-items: center;
+  min-width: 0;
+  flex-grow: 1;
+  padding-inline-start: 2rem;
   ${breakpointMaxMedium} {
     display: none;
   }
@@ -47,8 +48,8 @@ export const AdminMobileNavbar = styled.div`
 `;
 
 export const AdminMobileNavBarItems = styled.ul`
-  position: fixed;
   display: flex;
+  position: fixed;
   flex-direction: column;
   text-align: right;
   padding: 1rem;
@@ -57,6 +58,8 @@ export const AdminMobileNavBarItems = styled.ul`
   top: ${ADMIN_NAVBAR_HEIGHT};
   right: 0;
   background: ${() => color("admin-navbar")};
+  max-height: calc(100vh - ${ADMIN_NAVBAR_HEIGHT});
+  overflow-y: auto;
 `;
 
 export const AdminExitLink = styled(Link)`
@@ -69,6 +72,7 @@ export const AdminExitLink = styled(Link)`
   color: var(--mb-color-text-white);
   white-space: nowrap;
   text-align: center;
+  margin-inline-start: auto;
 
   &:hover {
     color: var(--mb-color-text-white);

frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx

@@ -14,6 +14,7 @@ import type { AdminPath } from "metabase-types/store";
 import StoreLink from "../StoreLink";
 
 import { AdminNavItem } from "./AdminNavItem";
+import { AdminNavLink } from "./AdminNavItem.styled";
 import AdminNavCS from "./AdminNavbar.module.css";
 import {
   AdminExitLink,
@@ -37,7 +38,7 @@ export const AdminNavbar = ({
   path: currentPath,
   adminPaths,
 }: AdminNavbarProps) => {
-  const isPaidPlain = useSelector(getIsPaidPlan);
+  const isPaidPlan = useSelector(getIsPaidPlan);
 
   return (
     <AdminNavbarRoot
@@ -66,7 +67,7 @@ export const AdminNavbar = ({
           ))}
         </AdminNavbarItems>
 
-        {!isPaidPlain && <StoreLink />}
+        {!isPaidPlan && <StoreLink />}
         <AdminExitLink
           to="/"
           data-testid="exit-admin"
@@ -102,12 +103,14 @@ const MobileNavbar = ({ adminPaths, currentPath }: AdminMobileNavbarProps) => {
       {mobileNavOpen && (
         <AdminMobileNavBarItems aria-label={t`Navigation links`}>
           {adminPaths.map(({ name, key, path }) => (
-            <AdminNavItem
-              name={name}
-              path={path}
+            <AdminNavLink
+              to={path}
               key={key}
-              currentPath={currentPath}
-            />
+              isSelected={currentPath.startsWith(path)}
+              isInMobileNav
+            >
+              {name}
+            </AdminNavLink>
           ))}
           <AdminExitLink to="/">{t`Exit admin`}</AdminExitLink>
         </AdminMobileNavBarItems>