@multiplatform.one/backoffice 6.7.0 → 7.1.0

package/src/shared/useFrappeApp.ts

@@ -18,22 +18,31 @@ export function useFrappeApp(): FrappeApp | undefined {
   // (:8000 in dev) instead of frappe's socketio server (:9000), producing a
   // CORS-failed handshake on every mount.
   const socketPort = config?.socketPort;
+  // socketBaseURL/siteName ride along too: the same-origin dev-proxy socket
+  // (and the namespace it must join) apply to FrappeApp's realtime exactly
+  // like the collection engine's.
+  const socketBaseURL = config?.socketBaseURL;
+  const siteName = config?.siteName;
   const useToken = config?.auth?.useToken;
   const token = config?.auth?.token;
   const type = config?.auth?.type;
   return useMemo(() => {
     if (!baseURL) return undefined;
-    const key = `${baseURL}|${socketPort ?? ""}|${useToken ? "t" : ""}|${token ?? ""}|${type ?? ""}`;
+    const key = `${baseURL}|${socketPort ?? ""}|${socketBaseURL ?? ""}|${siteName ?? ""}|${useToken ? "t" : ""}|${token ?? ""}|${type ?? ""}`;
     let app = appCache.get(key);
     if (!app) {
+      const realtimeOptions =
+        socketPort || socketBaseURL || siteName
+          ? { socketPort, socketBaseURL, siteName }
+          : undefined;
       app = new FrappeApp(baseURL, {
         useToken,
         token,
         type: (type === "Bearer" ? "Bearer" : type ? "token" : undefined) as AuthConfig["type"],
-        realtimeOptions: socketPort ? { socketPort } : undefined,
+        realtimeOptions,
       });
       appCache.set(key, app);
     }
     return app;
-  }, [baseURL, socketPort, useToken, token, type]);
+  }, [baseURL, socketPort, socketBaseURL, siteName, useToken, token, type]);
 }

package/src/shell/BackofficeShell.spec.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { BackofficeShell } from "./BackofficeShell";
+
+const MOCK_HOST = "https://backoffice-shell-chrome.mock.test";
+
+afterEach(cleanup);
+
+function renderShell() {
+  return renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: MOCK_HOST,
+        fixtures: new InMemoryFixtureProvider({ Workspace: [], DocType: [] }),
+      }}
+      navigation={createMemoryNavigator("/backoffice")}
+      slots={{
+        renderSidebarFooter: () => <div data-testid="host-sidebar-footer">footer</div>,
+      }}
+    >
+      <BackofficeShell>
+        <div>page body</div>
+      </BackofficeShell>
+    </BackofficeProvider>,
+  );
+}
+
+describe("BackofficeShell pane hairlines", () => {
+  it("paints full-width banner and full-height column rules plus a footer rule", () => {
+    renderShell();
+
+    expect(screen.getByTestId("backoffice-shell-banner-rule")).toBeTruthy();
+    expect(screen.getByTestId("backoffice-shell-column-rule")).toBeTruthy();
+    expect(screen.getByTestId("backoffice-shell-footer-rule")).toBeTruthy();
+    expect(screen.getByTestId("host-sidebar-footer")).toBeTruthy();
+    expect(screen.getByRole("main").id).toBe("backoffice-main");
+  });
+});

package/src/shell/BackofficeShell.tsx

@@ -10,9 +10,23 @@
  * replace/extend the built-ins. Narrow viewports collapse the sidebar into
  * an overlay drawer (same breakpoint as frappe-ui's DeskShell:
  * DESK_NARROW_BREAKPOINT === theme NARROW_BREAKPOINT).
+ *
+ * Shell geometry follows Frappe Desk's inverted-L (full-width banner + left
+ * rail) with Linear's pane rules: hairlines are standalone filled rules that
+ * span the full banner width and the full rail height (footer included),
+ * never a child's box-border that stops at content. Selected workspace is
+ * fill (WorkspaceSidebar / LC-71); the rail does not paint selection chrome.
  */
-import { Button, SizableText, XStack, YStack, isWeb } from "@multiplatform.one/components";
-import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  Button,
+  SizableText,
+  SkipLink,
+  XStack,
+  YStack,
+  isWeb,
+} from "@multiplatform.one/components";
+import * as componentsBarrel from "@multiplatform.one/components";
+import { hairline, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 import { ListIcon, XIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -33,7 +47,13 @@ import {
   useBackofficeSlots,
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
-import { WorkspaceSidebar } from "./WorkspaceSidebar";
+import { WORKSPACE_SIDEBAR_WIDTH, WorkspaceSidebar } from "./WorkspaceSidebar";
+
+// Capability-check the barrel instead of a named import: GNOME's curated
+// components shim deliberately omits ToastViewport (the @tamagui/toast portal
+// machinery stays out of the GJS graph), so on that target the shell simply
+// mounts no toast host (ListToastHost precedent in features/pokemon).
+const ToastViewport = (componentsBarrel as Partial<typeof componentsBarrel>).ToastViewport;
 
 export interface BackofficeShellProps {
   children: React.ReactNode;
@@ -52,6 +72,19 @@ function useIsNarrow(): boolean {
   return useLayoutSizeClass() === "compact";
 }
 
+/** Standalone pane rule — full width (banner) or full height (rail). */
+function ShellHairline({ axis, testId }: { axis: "horizontal" | "vertical"; testId: string }) {
+  return (
+    <YStack
+      {...(axis === "horizontal" ? hairline.line : hairline.vline)}
+      alignSelf="stretch"
+      {...(axis === "horizontal" ? { width: "100%" } : { height: "100%" })}
+      flexShrink={0}
+      data-testid={testId}
+    />
+  );
+}
+
 export function BackofficeShell({ children, activePath, onNavigate }: BackofficeShellProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -97,13 +130,21 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
     navigate(path);
   };
 
-  const surfaceBorderWidth = knobProps.surface.borderWidth;
+  const bannerHeight =
+    knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6";
 
   const sidebarContent = (
-    <>
-      <WorkspaceSidebar activePath={resolvedActivePath} onNavigate={handleNavigate} />
-      {slots.renderSidebarFooter?.()}
-    </>
+    <YStack flex={1} height="100%" minHeight={0} width={WORKSPACE_SIDEBAR_WIDTH}>
+      <YStack flex={1} minHeight={0}>
+        <WorkspaceSidebar activePath={resolvedActivePath} onNavigate={handleNavigate} />
+      </YStack>
+      {slots.renderSidebarFooter ? (
+        <YStack flexShrink={0} width="100%">
+          <ShellHairline axis="horizontal" testId="backoffice-shell-footer-rule" />
+          {slots.renderSidebarFooter()}
+        </YStack>
+      ) : null}
+    </YStack>
   );
 
   const headerContent = (
@@ -152,20 +193,37 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
     </>
   );
 
+  const rail = (
+    <XStack
+      role="navigation"
+      flexShrink={0}
+      height="100%"
+      minHeight={0}
+      backgroundColor="$color2"
+      data-testid="backoffice-sidebar-rail"
+    >
+      {sidebarContent}
+      <ShellHairline axis="vertical" testId="backoffice-shell-column-rule" />
+    </XStack>
+  );
+
   return (
     <YStack flex={1} height="100%" width="100%" overflow="hidden" data-testid="backoffice-shell">
-      {/* Top navbar */}
+      {isWeb ? (
+        <SkipLink targetId="backoffice-main">
+          {t("shell.skipToContent", "Skip to content")}
+        </SkipLink>
+      ) : null}
+
+      {/* Top navbar — Frappe inverted-L: full width above the rail. */}
       <XStack
         role="banner"
         {...knobProps.surface}
-        // Surface knobs paint a full box border; keep only the bottom edge
-        // (DeskShell precedent, SB-M-1708).
         borderWidth={0}
-        borderBottomWidth={surfaceBorderWidth}
-        borderBottomColor={knobProps.surface.borderColor}
+        borderRadius={0}
+        height={bannerHeight}
         alignItems="center"
         paddingHorizontal="$3"
-        paddingVertical="$2"
         gap="$2"
         flexShrink={0}
       >
@@ -173,14 +231,10 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
           ? slots.renderShellHeader({ defaultContent: headerContent })
           : headerContent}
       </XStack>
+      <ShellHairline axis="horizontal" testId="backoffice-shell-banner-rule" />
 
       <XStack flex={1} minWidth={0} position="relative" overflow="hidden">
-        {/* Desktop rail — in flow */}
-        {sidebarEnabled && !isNarrow && (
-          <YStack role="navigation" flexShrink={0} data-testid="backoffice-sidebar-rail">
-            {sidebarContent}
-          </YStack>
-        )}
+        {sidebarEnabled && !isNarrow && rail}
 
         {/* Narrow drawer + scrim */}
         {sidebarEnabled && isNarrow && drawerOpen && (
@@ -197,26 +251,41 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
               onPress={() => setDrawerOpen(false)}
               data-testid="backoffice-sidebar-scrim"
             />
-            <YStack
+            <XStack
               role="navigation"
               position="absolute"
               top={0}
               left={0}
               bottom={0}
               zIndex={11}
-              backgroundColor="$background"
+              backgroundColor="$color2"
               data-testid="backoffice-sidebar-drawer"
             >
               {sidebarContent}
-            </YStack>
+              <ShellHairline axis="vertical" testId="backoffice-shell-drawer-rule" />
+            </XStack>
           </>
         )}
 
         {/* Routed content — pages own their own headers/breadcrumbs */}
-        <YStack role="main" flex={1} minWidth={0}>
+        <YStack
+          role="main"
+          id="backoffice-main"
+          tabIndex={-1}
+          flex={1}
+          minWidth={0}
+          minHeight={0}
+          overflow="hidden"
+        >
           {children}
         </YStack>
       </XStack>
+
+      {/* THE backoffice toast host: one shell-level viewport so every desk
+          surface (list, form, report, kanban, …) renders notify()/showToast
+          feedback without mounting its own. Double-mount safe — a second
+          viewport lower in the tree no-ops (components Toast contract). */}
+      {ToastViewport ? <ToastViewport /> : null}
     </YStack>
   );
 }

package/src/shell/WorkspaceSidebar.spec.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import { createMemoryNavigator } from "../navigation/navigator";
+import { WorkspaceSidebar } from "./WorkspaceSidebar";
+
+const MOCK_HOST = "https://backoffice-shell-nav.mock.test";
+
+const makeFixtures = () =>
+  new InMemoryFixtureProvider({
+    Workspace: [
+      {
+        name: "Alpha",
+        doctype: "Workspace",
+        title: "Alpha",
+        icon: "tool",
+        parent_page: "",
+        public: 1,
+        for_user: "",
+        sequence_id: 1,
+        module: "Core",
+        is_hidden: 0,
+      },
+      {
+        name: "Beta",
+        doctype: "Workspace",
+        title: "Beta",
+        icon: "users",
+        parent_page: "",
+        public: 1,
+        for_user: "",
+        sequence_id: 2,
+        module: "Core",
+        is_hidden: 0,
+      },
+      {
+        name: "Gamma",
+        doctype: "Workspace",
+        title: "Gamma",
+        icon: "website",
+        parent_page: "",
+        public: 1,
+        for_user: "",
+        sequence_id: 3,
+        module: "Core",
+        is_hidden: 0,
+      },
+    ],
+  });
+
+afterEach(cleanup);
+
+describe("WorkspaceSidebar LC-72 stacked nav", () => {
+  it("marks first / middle / last and paints selected as fill", async () => {
+    renderWithProviders(
+      <BackofficeProvider
+        frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
+        navigation={createMemoryNavigator("/backoffice/beta")}
+      >
+        <WorkspaceSidebar activePath="/backoffice/beta" />
+      </BackofficeProvider>,
+    );
+
+    const rows = await waitFor(() => {
+      const found = screen.getAllByTestId("backoffice-workspace-row");
+      expect(found).toHaveLength(3);
+      return found;
+    });
+
+    expect(rows[0].getAttribute("data-group-position")).toBe("first");
+    expect(rows[1].getAttribute("data-group-position")).toBe("middle");
+    expect(rows[2].getAttribute("data-group-position")).toBe("last");
+
+    expect(rows[1].getAttribute("data-active")).toBe("true");
+    expect(rows[1].getAttribute("aria-current")).toBe("page");
+    expect(rows[0].getAttribute("data-active")).toBe("false");
+    expect(rows[2].getAttribute("aria-current")).toBeNull();
+  });
+});

package/src/shell/WorkspaceSidebar.tsx

@@ -5,15 +5,32 @@
  * below ordered by sequence_id, children nested via parent_page (rendered
  * indented under their parent). Data is live via useWorkspaces; paths come
  * from the BackofficeProvider (basePath-aware).
+ *
+ * LC-72 STACK-OUTER: rows are one stacked group (first/last outer corners,
+ * interiors square); hover/press/selection inherit that geometry.
+ * LC-71: selected = accent fill; keyboard focus paints an inset ring on the
+ * row, never a selection border on every sibling. The column-edge hairline
+ * is owned by BackofficeShell so it spans the full rail height (footer
+ * included) — this nav paints none.
  */
 import {
-  Sidebar,
+  ScrollView,
+  Separator,
+  SizableText,
   Spinner,
   XStack,
   YStack,
   type SidebarItem,
   type SidebarSection,
 } from "@multiplatform.one/components";
+import {
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  hairline,
+  stackRadiusProps,
+  useReadableTextOn,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficePaths } from "../config/BackofficeProvider";
@@ -39,7 +56,7 @@ function workspaceItem(
   onNavigate: ((path: string) => void) | undefined,
 ): SidebarItem {
   const path = paths.workspace(workspace.name);
-  const IconComponent = workspaceIcon(workspace.icon);
+  const IconComponent = workspaceIcon(workspace.icon, workspace.name);
   const icon = (
     // Depth-based inset carried by the icon slot — the Sidebar row API has
     // no nesting support, so children indent icon+label via this wrapper.
@@ -78,6 +95,114 @@ function flattenTree(
   return items;
 }
 
+function NavRow({
+  item,
+  position,
+}: {
+  item: SidebarItem;
+  position: ReturnType<typeof getGroupPosition>;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const onAccent = useReadableTextOn("$accentBackground");
+  const rowPad = knobProps.panelPadding.padding;
+  const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+  const ink = item.active && onAccent ? onAccent : undefined;
+  return (
+    <XStack
+      role="button"
+      aria-current={item.active ? "page" : undefined}
+      data-testid="backoffice-workspace-row"
+      data-group-position={position}
+      data-active={item.active ? "true" : "false"}
+      alignItems="center"
+      gap="$2"
+      minHeight={knobProps.sizeToken}
+      paddingHorizontal={rowPad}
+      paddingVertical="$2"
+      overflow="hidden"
+      userSelect="none"
+      {...corners}
+      backgroundColor={item.active ? "$accentBackground" : "transparent"}
+      hoverStyle={{
+        backgroundColor: item.active ? "$accentBackground" : "$color3",
+        ...corners,
+      }}
+      pressStyle={{
+        backgroundColor: item.active ? "$accentBackground" : "$color4",
+        ...corners,
+      }}
+      cursor={item.onPress ? "pointer" : "default"}
+      onPress={item.onPress}
+      tabIndex={item.onPress ? 0 : undefined}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({
+        outlineOffset: -2,
+        outlineColor: ink ?? "$outlineColor",
+      })}
+      onKeyDown={
+        ((e: { key?: string; preventDefault?: () => void }) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault?.();
+            item.onPress?.();
+          }
+        }) as unknown as () => void
+      }
+    >
+      {item.icon}
+      <SizableText
+        size="$3"
+        numberOfLines={1}
+        flex={1}
+        flexShrink={1}
+        fontWeight={item.active ? "600" : "400"}
+        color={ink}
+      >
+        {item.label}
+      </SizableText>
+    </XStack>
+  );
+}
+
+function WorkspaceNav({ sections }: { sections: SidebarSection[] }) {
+  const { knobProps } = useResolvedKnobs();
+  const rowPad = knobProps.panelPadding.padding;
+  return (
+    <YStack width={WORKSPACE_SIDEBAR_WIDTH} flex={1} height="100%" minHeight={0}>
+      <ScrollView flex={1}>
+        <YStack {...knobProps.panelPadding} paddingHorizontal={0} {...knobProps.gapLg}>
+          {sections.map((section, sectionIdx) => (
+            <YStack key={section.title ?? sectionIdx} {...knobProps.gap}>
+              {section.title ? (
+                <SizableText
+                  size="$2"
+                  fontWeight="600"
+                  textTransform="uppercase"
+                  color="$color11"
+                  marginHorizontal={rowPad}
+                >
+                  {section.title}
+                </SizableText>
+              ) : null}
+              <YStack>
+                {section.items.map((item, itemIdx) => {
+                  const position = getGroupPosition(itemIdx, section.items.length);
+                  return (
+                    <YStack key={String(item.value ?? item.label)}>
+                      {itemIdx > 0 ? <Separator {...hairline.line} /> : null}
+                      <NavRow item={item} position={position} />
+                    </YStack>
+                  );
+                })}
+              </YStack>
+            </YStack>
+          ))}
+        </YStack>
+      </ScrollView>
+    </YStack>
+  );
+}
+
 export function WorkspaceSidebar({ activePath, onNavigate }: WorkspaceSidebarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const paths = useBackofficePaths();
@@ -109,6 +234,8 @@ export function WorkspaceSidebar({ activePath, onNavigate }: WorkspaceSidebarPro
     return (
       <YStack
         width={WORKSPACE_SIDEBAR_WIDTH}
+        flex={1}
+        height="100%"
         alignItems="center"
         paddingTop="$6"
         aria-label={t("sidebar.loading", "Loading workspaces")}
@@ -118,5 +245,5 @@ export function WorkspaceSidebar({ activePath, onNavigate }: WorkspaceSidebarPro
     );
   }
 
-  return <Sidebar sections={sections} width={WORKSPACE_SIDEBAR_WIDTH} />;
+  return <WorkspaceNav sections={sections} />;
 }

package/src/shell/useWorkspaces.ts

@@ -137,6 +137,8 @@ export function useWorkspaces(): WorkspacesResult {
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
             socketOptions: config.socketOptions,

package/src/shell/workspaceIcons.ts

@@ -17,6 +17,7 @@ import {
   GearIcon,
   GlobeIcon,
   GraduationCapIcon,
+  HammerIcon,
   HandshakeIcon,
   HeartIcon,
   IdentificationCardIcon,
@@ -53,6 +54,9 @@ const FRAPPE_ICON_MAP: Record<string, Icon> = {
   hr: IdentificationCardIcon,
   "image-view": ImageIcon,
   integration: PlugsConnectedIcon,
+  build: HammerIcon,
+  developer: HammerIcon,
+  customize: GearIcon,
   manufacturing: FactoryIcon,
   "money-coins-1": CoinsIcon,
   "non-profit": HeartIcon,
@@ -71,6 +75,17 @@ const FRAPPE_ICON_MAP: Record<string, Icon> = {
 };
 
 /** Resolve a frappe workspace icon name to a phosphor icon component. */
-export function workspaceIcon(name?: string): Icon {
-  return (name && FRAPPE_ICON_MAP[name]) || SquaresFourIcon;
+export function workspaceIcon(icon?: string, workspaceName?: string): Icon {
+  // Tools and Build both often ship the desk sprite name `tool`. Disambiguate
+  // by workspace name so they don't share a wrench.
+  if (workspaceName && /build/i.test(workspaceName) && (!icon || icon === "tool")) {
+    return HammerIcon;
+  }
+  const keys = [icon, workspaceName]
+    .filter((value): value is string => Boolean(value))
+    .map((value) => value.toLowerCase().replace(/\s+/g, "-"));
+  for (const key of keys) {
+    if (FRAPPE_ICON_MAP[key]) return FRAPPE_ICON_MAP[key];
+  }
+  return SquaresFourIcon;
 }

package/src/views/CalendarView.tsx

@@ -10,7 +10,7 @@
 // prefilled with the clicked date (`?d=` param on the /new route).
 import { XStack, YStack } from "@multiplatform.one/components";
 import { FrappeCalendar, type FrappeCalendarProps } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { formatCalendarDate, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -34,10 +34,7 @@ const CalendarOfDoc = FrappeCalendar as (props: FrappeCalendarProps<AnyDoc>) =>
  * same convention FrappeCalendar uses when persisting drag-moves.
  */
 function toFrappeDateValue(date: Date, fieldtype: string | undefined): string {
-  const pad = (n: number) => String(n).padStart(2, "0");
-  const datePart = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-  if (fieldtype !== "Datetime") return datePart;
-  return `${datePart} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  return formatCalendarDate(date, fieldtype === "Datetime" ? "datetime" : "date");
 }
 
 export interface CalendarViewProps {

package/src/views/DoctypeViewScreen.tsx

@@ -78,7 +78,9 @@ export function DoctypeViewScreen({ doctype, view }: DoctypeViewScreenProps) {
   return (
     <YStack flex={1}>
       <ViewHeader doctype={doctype} view={view} />
-      <ViewBody doctype={doctype} view={view} />
+      <YStack flex={1} minHeight={0}>
+        <ViewBody doctype={doctype} view={view} />
+      </YStack>
     </YStack>
   );
 }

package/src/views/KanbanView.tsx

@@ -320,7 +320,13 @@ export function KanbanView({
         </Alert>
       )}
       {(boards.names.length > 0 || axisOptions.length > 1) && (
-        <XStack {...knobProps.gap} alignItems="center" flexWrap="wrap">
+        <XStack
+          {...knobProps.gap}
+          {...knobProps.panelPadding}
+          paddingTop={0}
+          alignItems="center"
+          flexWrap="wrap"
+        >
           {boards.names.length > 0 && (
             <KanbanBoardPicker
               names={boards.names}