Add preferred width to Popup

- Use preferred with for the navbar popups
- Use condensed spacing on risk event list

Author: frozenhelium

src/components/DropdownMenu/index.tsx

@@ -21,6 +21,7 @@ import styles from './styles.module.css';
 export interface Props {
     className?: string;
     popupClassName?: string;
+    preferredPopupWidth?: number;
     children?: React.ReactNode;
     label?: React.ReactNode;
     activeClassName?: string;
@@ -50,6 +51,7 @@ function DropdownMenu(props: Props) {
         componentRef,
         elementRef: buttonRef = newButtonRef,
         persistent,
+        preferredPopupWidth,
     } = props;
 
     const dropdownRef = useRef<HTMLDivElement>(null);
@@ -135,6 +137,7 @@ function DropdownMenu(props: Props) {
                     elementRef={dropdownRef}
                     className={_cs(styles.dropdownContent, popupClassName)}
                     parentRef={buttonRef}
+                    preferredWidth={preferredPopupWidth}
                 >
                     {children}
                 </Popup>

src/components/Navbar/CountryDropdown/index.tsx

@@ -102,6 +102,7 @@ function CountryDropdown() {
             variant="tertiary"
             popupClassName={styles.dropdown}
             persistent
+            preferredPopupWidth={56}
         >
             {isEmpty && (
                 <Message
@@ -176,6 +177,7 @@ function CountryDropdown() {
                                                 urlParams={{ countryId: id }}
                                                 variant="tertiary"
                                                 withLinkIcon
+                                                className={styles.countryLink}
                                             >
                                                 {name}
                                             </DropdownMenuItem>

src/components/Navbar/CountryDropdown/styles.module.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     padding: var(--go-ui-spacing-md);
-    width: calc(100% - var(--go-ui-spacing-md) * 2)!important;
     max-width: 64rem;
     min-height: 16rem;
     gap: var(--go-ui-spacing-md);
@@ -37,6 +36,10 @@
                 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
                 grid-gap: var(--go-ui-spacing-sm);
                 overflow: auto;
+
+                .country-link {
+                    font-size: var(--go-ui-font-size-sm);
+                }
             }
         }
     }

src/components/Navbar/index.tsx

@@ -19,9 +19,9 @@ import TabPanel from '#components/Tabs/TabPanel';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import LangaugeDropdown from './LanguageDropdown';
+import CountryDropdown from './CountryDropdown';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
-import CountryDropdown from './CountryDropdown';
 
 interface Props {
     className?: string;
@@ -135,6 +135,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuPrepare}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activePrepareOption}
@@ -252,6 +253,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuRespondLabel}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activeRespondOption}
@@ -398,6 +400,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuLearnLabel}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activeLearnOption}

src/components/Navbar/styles.module.css

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     padding: var(--go-ui-spacing-md);
-    width: calc(100% - var(--go-ui-spacing-md) * 2)!important;
     max-width: 32rem;
     min-height: 16rem;
     gap: var(--go-ui-spacing-md);

src/components/Popup/index.tsx

@@ -11,6 +11,7 @@ interface Props {
     elementRef?: React.RefObject<HTMLDivElement>;
     parentRef: React.RefObject<HTMLElement | undefined>;
     children?: React.ReactNode;
+    preferredWidth?: number;
 }
 
 function Popup(props: Props) {
@@ -20,14 +21,15 @@ function Popup(props: Props) {
         children,
         className,
         pointerClassName,
+        preferredWidth,
     } = props;
 
     const {
         content,
         pointer,
         width,
         orientation,
-    } = useFloatPlacement(parentRef);
+    } = useFloatPlacement(parentRef, preferredWidth);
 
     return (
         <Portal>

src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx

@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazard_name}
+            heading={hazard_name ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,7 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.gdacsEventStartedOn}

src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx

@@ -36,7 +36,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazardName}
+            heading={hazardName ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -48,7 +48,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.meteoSwissEventListStartedOn}

src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx

@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazard_name}
+            heading={hazard_name ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,6 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.eventListStartedOn}

src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx

@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={title}
+            heading={title ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,7 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.wfpEventListPublishedOn}