web/communities: keep community breadcrumb on one line on mobile

Address review feedback on the sub-community dropdown: on mobile the
breadcrumb chain now stays on a single line and scrolls horizontally
instead of wrapping (the "Select area" dropdown no longer drops to its
own line), the breadcrumb font is slightly smaller, and the join/leave
button sits on its own centered row below.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: kevinortiz43

app/web/features/communities/CommunityPage/CommunityPageSubHeader.tsx

@@ -26,11 +26,30 @@ const StyledBreadcrumbsContainer = styled("div")(({ theme }) => ({
   },
 }));
 
-const StyledBreadcrumbs = styled(Breadcrumbs)(() => ({
+const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
   minWidth: 0,
   "& ol": {
     justifyContent: "flex-start",
   },
+  [theme.breakpoints.down("sm")]: {
+    width: "100%",
+    fontSize: theme.typography.body2.fontSize,
+    "& .MuiTypography-root, & .MuiLink-root, & .MuiButton-root": {
+      fontSize: "inherit",
+    },
+    // Keep the whole chain on one line; scroll horizontally instead of wrapping
+    // when it's wider than the screen (fits without scrolling at typical widths).
+    "& ol": {
+      flexWrap: "nowrap",
+      overflowX: "auto",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": { display: "none" },
+    },
+    "& li": {
+      flexShrink: 0,
+      whiteSpace: "nowrap",
+    },
+  },
 }));
 
 export default function CommunityPageSubHeader({

app/web/features/communities/CommunityPage/JoinCommunityButton.tsx

@@ -72,7 +72,11 @@ export default function JoinCommunityButton({
         loading={isLoading}
         variant={community.member ? "outlined" : "contained"}
         onClick={() => (community.member ? leave.mutate() : join.mutate())}
-        sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
+        sx={{
+          whiteSpace: "nowrap",
+          flexShrink: 0,
+          alignSelf: { xs: "center", sm: "auto" },
+        }}
       >
         {community.member
           ? t("communities:leave_community")

app/web/features/communities/CommunityPage/SubCommunitiesDropdown.tsx

@@ -78,6 +78,10 @@ export default function SubCommunitiesDropdown({
         aria-controls={open ? menuId : undefined}
         aria-label={t("communities:sub_community_dropdown_a11y")}
         onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{
+          minWidth: { xs: 0, sm: 64 },
+          pl: { xs: 0, sm: 1 },
+        }}
       >
         {t(labelKey)}
       </Button>