fix: handle mobile header overflow

src/consts.ts

@@ -80,6 +80,7 @@ export const slotNavWidth =
   slotNavWithoutListWidth + slotsListWidth + slotsNavSpacing;
 
 export const narrowNavMedia = "(max-width: 768px)";
+export const identityIconOnlyWidth = "473px";
 
 export const maxZIndex = 110;
 

src/features/Header/IdentityKey.tsx

@@ -12,13 +12,13 @@ import { useMedia } from "react-use";
 import clsx from "clsx";
 import { useIdentityPeer } from "../../hooks/useIdentityPeer";
 import PopoverDropdown from "../../components/PopoverDropdown";
-import { maxZIndex } from "../../consts";
+import { identityIconOnlyWidth, maxZIndex } from "../../consts";
 import { useUptimeDuration } from "../../hooks/useUptime";
 
 export default function IdentityKey() {
   const { peer, identityKey } = useIdentityPeer();
 
-  const isXXNarrowScreen = useMedia("(min-width: 473px)");
+  const isXXNarrowScreen = useMedia(`(min-width: ${identityIconOnlyWidth})`);
   const isXNarrowScreen = useMedia("(min-width: 620px)");
   const isNarrowScreen = useMedia("(min-width: 1100px)");
 

src/features/Header/Nav.tsx

@@ -1,7 +1,7 @@
 import { DropdownMenu } from "radix-ui";
 import styles from "./nav.module.css";
 import type { ButtonProps } from "@radix-ui/themes";
-import { Button, Flex } from "@radix-ui/themes";
+import { Button, Flex, Text } from "@radix-ui/themes";
 import SsidChartIcon from "@material-design-icons/svg/filled/ssid_chart.svg?react";
 import AssessmentIcon from "@material-design-icons/svg/filled/assessment.svg?react";
 import CalendarMonthIcon from "@material-design-icons/svg/filled/calendar_month.svg?react";
@@ -57,7 +57,7 @@ const NavButton = forwardRef<HTMLButtonElement, NavLinkProps>(
       return (
         <>
           <Icon className={styles.icon} fill={iconFill} />
-          {label}
+          <Text truncate>{label}</Text>
           {showDropdownIcon && (
             <KeyboardArrowDownIcon
               className={styles.dropdownIcon}

src/features/Header/identityKey.module.css

@@ -3,7 +3,7 @@
   background: var(--popover-background-color);
   max-width: 100vw;
   border: 1px solid var(--container-border-color);
-  min-width: 0;
+  min-width: 28px;
 
   &.dropdown-menu {
     padding: 4px;

src/features/Header/index.tsx

@@ -6,6 +6,7 @@ import {
   epochThumbPadding,
   headerHeight,
   headerSpacing,
+  identityIconOnlyWidth,
   logoRightSpacing,
   maxZIndex,
   slotsNavSpacing,
@@ -33,6 +34,10 @@ export default function Header({ isStartup }: { isStartup?: boolean }) {
   const showDropdownNav = useMedia("(max-width: 900px)");
   const isXNarrow = useMedia("(max-width: 401px)");
 
+  const showIdentityIconOnly = useMedia(
+    `(max-width: ${identityIconOnlyWidth})`,
+  );
+
   const { isNarrowScreen, blurBackground, showNav, showOnlyEpochBar } =
     useSlotsNavigation();
 
@@ -88,22 +93,25 @@ export default function Header({ isStartup }: { isStartup?: boolean }) {
             minWidth="0"
           >
             {!isStartup && (
-              <Flex flexShrink="0">
+              <Flex
+                flexShrink={showIdentityIconOnly ? "1" : "0"}
+                minWidth="100px"
+              >
                 <NavHandler />
                 {showDropdownNav ? <DropdownNav /> : <NavLinks />}
               </Flex>
             )}
 
             <Flex
-              gap={isXNarrow ? "1" : "3"}
+              gap={isNarrowScreen ? "1" : "3"}
               justify="end"
               align="center"
-              minWidth="0"
+              minWidth="50px"
               flexGrow="1"
             >
               <IdentityKey />
 
-              <Flex gap="1" direction={isXNarrow ? "column" : "row"}>
+              <Flex gap="1" direction={isNarrowScreen ? "column" : "row"}>
                 <Attribution />
 
                 {isStartup ? (
@@ -145,9 +153,8 @@ function Attribution() {
     <PopoverDropdown
       content={
         <Flex maxWidth="100vw" p="2" className={styles.attributeContainer}>
-          <Text wrap="wrap">
-            Attribution: The IP address data in src/disco/gui/ipinfo.bin is
-            powered by IPinfo Inc.{" "}
+          <Text size="2" wrap="wrap">
+            Attribution: The IP address data is powered by IPinfo Inc.{" "}
             <a href="https://ipinfo.io/">https://ipinfo.io/</a>
           </Text>
         </Flex>

src/features/Header/nav.module.css

@@ -8,6 +8,9 @@
   gap: 5px;
   padding: 0 15px;
 
+  flex-shrink: 1;
+  min-width: 50px;
+
   .icon {
     height: 14px;
     width: 14px;