Style: Mobile breadcrumb updates (#952)

Author: daveearley

frontend/src/components/layouts/AppLayout/AppLayout.module.scss

@@ -33,6 +33,10 @@
     background-color: #f9fafc;
 
     @include mixins.scrollbar;
+
+    @media (max-width: 767px) {
+      padding: 16px 16px 56px;
+    }
   }
 
   .sidebarOpen {

frontend/src/components/layouts/AppLayout/Topbar/Topbar.module.scss

@@ -13,43 +13,47 @@
   .topBarMain {
     display: flex;
     align-items: center;
-    padding: var(--hi-spacing-md);
+    padding: 0 16px;
     height: 60px;
+
+    @include mixins.respond-below(md) {
+      padding: 0 12px;
+    }
   }
 
   .breadcrumbsRow {
-    padding: 6px var(--hi-spacing-md) 8px;
-    padding-top: 7px;
+    padding: 10px 20px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     background-color: #fff;
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: 12px;
     border-top-left-radius: var(--hi-radius-md);
     box-shadow: 3px 0px 8px rgb(0 0 0 / 8%);
     position: relative;
     z-index: 5;
-    min-height: 50px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: -1px;
-      left: 0;
-      width: 16px;
-      height: 16px;
-      background-color: #fff;
-      border-top-left-radius: 16px;
-      z-index: -1;
-    }
+    min-height: 44px;
 
     @include mixins.respond-below(md) {
       border-top-left-radius: 0;
+      padding: 10px 16px;
+    }
+  }
 
-      &::before {
+  .breadcrumbContentRight {
+    flex-shrink: 0;
+
+    @include mixins.respond-below(sm) {
+      // Hide text in buttons, show only icons on very small screens
+      :global(.mantine-Button-label) {
         display: none;
       }
+
+      :global(.mantine-Button-section) {
+        margin: 0;
+      }
     }
   }
 
@@ -59,7 +63,8 @@
     align-items: center;
     font-size: 0.85rem;
     color: var(--hi-text-light);
-    width: 100%;
+    flex: 1;
+    min-width: 0;
     overflow-x: auto;
     white-space: nowrap;
     scrollbar-width: none;
@@ -69,10 +74,36 @@
       display: none;
     }
 
+    // Mantine Breadcrumbs container
+    :global(.mantine-Breadcrumbs-root) {
+      flex-wrap: nowrap;
+      min-width: 0;
+    }
+
+    :global(.mantine-Breadcrumbs-breadcrumb) {
+      @include mixins.ellipsis();
+      max-width: 200px;
+
+      @include mixins.respond-below(md) {
+        max-width: 120px;
+      }
+
+      @include mixins.respond-below(sm) {
+        max-width: 80px;
+      }
+
+      // Don't truncate the last breadcrumb (often an action like "Create Event")
+      &:last-child {
+        max-width: none;
+        flex-shrink: 0;
+      }
+    }
+
     a {
       color: var(--hi-text-light);
       transition: color 0.2s ease;
       position: relative;
+      @include mixins.ellipsis();
 
       &:hover {
         color: var(--hi-text);

frontend/src/components/layouts/AppLayout/Topbar/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {NavLink} from "react-router";
 import {Breadcrumbs, Burger} from '@mantine/core';
-import {IconHome} from "@tabler/icons-react";
 import classes from './Topbar.module.scss';
 import {BreadcrumbItem} from "../types";
 import {GlobalMenu} from "../../../common/GlobalMenu";
@@ -55,8 +54,7 @@ export const Topbar: React.FC<TopbarProps> = ({
 
             <div className={classes.breadcrumbsRow}>
                 <div className={classes.breadcrumbs}>
-                    <IconHome size={16} style={{marginRight: '8px', opacity: 0.6, minWidth: '16px'}}/>
-                    <Breadcrumbs separator={<span style={{margin: '0 0px', color: '#aaa'}}>/</span>}>
+                    <Breadcrumbs separator={<span style={{margin: '0 4px', color: '#aaa'}}>/</span>}>
                         {breadcrumbItems.map((item, index) => (
                             <NavLink key={index} to={item.link ?? '#'}>
                                 {item.content}

frontend/src/components/layouts/Event/index.tsx

@@ -131,23 +131,17 @@ const EventLayout = () => {
     const screenWidth = useWindowWidth();
     const breadcrumbItemsWidth = screenWidth > 1100 ? 60 : 23;
 
-    const breadcrumbItems: BreadcrumbItem[] = [
+    const breadcrumbItems: BreadcrumbItem[] = isEventFetched ? [
         {
-            link: '/manage/events',
-            content: t`Home`
+            link: `/manage/organizer/${event?.organizer?.id}`,
+            content: <Truncate length={breadcrumbItemsWidth} text={event?.organizer?.name} showTooltip={false}/>
         },
-        ...(isEventFetched ? [
-            {
-                link: `/manage/organizer/${event?.organizer?.id}`,
-                content: <Truncate length={breadcrumbItemsWidth} text={event?.organizer?.name} showTooltip={false}/>
-            },
-            {
-                link: `/manage/event/${event?.id}`,
-                content: <Truncate length={breadcrumbItemsWidth} text={event?.title} showTooltip={false}/>
-            }
-        ] : [
-            {link: '#', content: '...'}
-        ])
+        {
+            link: `/manage/event/${event?.id}`,
+            content: <Truncate length={breadcrumbItemsWidth} text={event?.title} showTooltip={false}/>
+        }
+    ] : [
+        {link: '#', content: '...'}
     ];
 
     const handleStatusToggle = () => {

frontend/src/components/layouts/OrganizerLayout/index.tsx

@@ -136,17 +136,13 @@ const OrganizerLayout = () => {
     };
 
     const breadcrumbItems: BreadcrumbItem[] = [
-        {
-            link: '/manage/events',
-            content: t`Events`
-        },
         {
             link: `/manage/organizer/${organizerId}`,
             content: organizer?.name,
         },
         {
             content: (
-                <span 
+                <span
                     className={classes.createEventBreadcrumb}
                     onClick={() => setShowCreateEventModal(true)}
                 >