Improve styling of breadcrumbs

Author: frozenhelium

src/components/Breadcrumbs/index.tsx

@@ -49,7 +49,10 @@ function Breadcrumbs(props: BreadcrumbsProps) {
     );
 
     return (
-        <nav className={_cs(className, styles.breadcrumbs)} aria-label="breadcrumb">
+        <nav
+            className={_cs(styles.breadcrumbs, className)}
+            aria-label="breadcrumb"
+        >
             {items}
         </nav>
     );

src/components/Breadcrumbs/styles.module.css

@@ -1,6 +1,7 @@
 .breadcrumbs {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 
     .item {
         display: flex;

src/components/Container/index.tsx

@@ -45,6 +45,7 @@ export interface Props {
     headingLevel?: HeadingProps['level'],
     headingSectionClassName?: string;
     icons?: React.ReactNode;
+    iconsContainerClassName?: string;
     numPreferredGridContentColumns?: NumColumn;
     spacing?: SpacingType;
     withGridViewInFilter?: boolean;
@@ -83,6 +84,7 @@ function Container(props: Props) {
         headingLevel,
         headingSectionClassName,
         icons,
+        iconsContainerClassName,
         numPreferredGridContentColumns = 2,
         spacing = 'default',
         withGridViewInFilter = false,
@@ -143,6 +145,7 @@ function Container(props: Props) {
                     heading={heading}
                     headingLevel={headingLevel}
                     icons={icons}
+                    iconsContainerClassName={iconsContainerClassName}
                     childrenContainerClassName={headerDescriptionContainerClassName}
                     headingSectionClassName={headingSectionClassName}
                     headingClassName={headingClassName}

src/components/DropdownMenu/index.tsx

@@ -121,8 +121,8 @@ function DropdownMenu(props: Props) {
                     <>
                         {actions}
                         {!withoutDropdownIcon && (showDropdown
-                            ? <ArrowUpSmallFillIcon />
-                            : <ArrowDownSmallFillIcon />
+                            ? <ArrowUpSmallFillIcon className={styles.dropdownIcon} />
+                            : <ArrowDownSmallFillIcon className={styles.dropdownIcon} />
                         )}
                     </>
                 ) : undefined}

src/components/DropdownMenu/styles.module.css

@@ -4,6 +4,11 @@
     .actions {
         pointer-events: none;
     }
+
+    .dropdown-icon {
+        margin-inline-start: -0.3em;
+        font-size: var(--go-ui-height-icon-multiplier);
+    }
 }
 
 .dropdown-content {

src/components/GlobalFooter/styles.module.css

@@ -9,7 +9,7 @@
 
         .section {
             display: flex;
-            flex-basis: 10rem;
+            flex-basis: 12rem;
             flex-direction: column;
             flex-grow: 1;
             gap: var(--go-ui-spacing-lg);

src/components/Link/styles.module.css

@@ -51,5 +51,6 @@
 
     .forward-icon {
         font-size: var(--go-ui-height-icon-multiplier);
+        margin-inline-start: -0.3em;
     }
 }

src/components/PageHeader/index.tsx

@@ -49,6 +49,7 @@ function PageHeader(props: Props) {
             <Container
                 className={styles.container}
                 icons={breadCrumbs}
+                iconsContainerClassName={styles.breadcrumbsContainer}
                 actions={(actions || wikiLink) && (
                     <>
                         {actions}

src/components/PageHeader/styles.module.css

@@ -6,6 +6,10 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-xl);
 
+        .breadcrumbs-container {
+            flex-shrink: unset;
+        }
+
         .header {
             display: flex;
             align-items: center;

src/views/Emergency/index.tsx

@@ -203,14 +203,10 @@ export function Component() {
             title={strings.emergencyPageTitle}
             breadCrumbs={(
                 <Breadcrumbs>
-                    <Link
-                        to="home"
-                    >
+                    <Link to="home">
                         {strings.home}
                     </Link>
-                    <Link
-                        to="emergencies"
-                    >
+                    <Link to="emergencies">
                         {strings.emergencies}
                     </Link>
                     <Link