);
}
diff --git a/apps/compliance-portal/src/components/ComplianceArticleItem/ComplianceArticleItemSkeleton.tsx b/apps/compliance-portal/src/components/ComplianceArticleItem/ComplianceArticleItemSkeleton.tsx
index 973da1a47..ae08b0e7c 100644
--- a/apps/compliance-portal/src/components/ComplianceArticleItem/ComplianceArticleItemSkeleton.tsx
+++ b/apps/compliance-portal/src/components/ComplianceArticleItem/ComplianceArticleItemSkeleton.tsx
@@ -23,7 +23,7 @@ import { TextSkeleton } from "@probo/ui/src/v2/typography/TextSkeleton";
import { complianceArticleItem } from "./variants";
// Loading placeholder paired with ComplianceArticleItem: same row layout with
-// a pulse icon and skeleton text.
+// a pulse icon and skeleton text (meta stacks under the title on max-sm).
export function ComplianceArticleItemSkeleton() {
const slots = complianceArticleItem();
@@ -31,9 +31,11 @@ export function ComplianceArticleItemSkeleton() {
-
+
+
+
+
-
);
}
diff --git a/apps/compliance-portal/src/components/ComplianceArticleItem/variants.ts b/apps/compliance-portal/src/components/ComplianceArticleItem/variants.ts
index d1c9ede43..e4d188859 100644
--- a/apps/compliance-portal/src/components/ComplianceArticleItem/variants.ts
+++ b/apps/compliance-portal/src/components/ComplianceArticleItem/variants.ts
@@ -21,15 +21,16 @@
import { tv } from "tailwind-variants/lite";
// Compliance article list row (Figma "Compliance Article Item"): a leading
-// icon, a title (+ optional eyebrow), and right-aligned meta. Designed to sit
-// inside a list container that draws the dividers (e.g. `divide-y`), so rows
-// stay divider-agnostic whether or not each is wrapped in a link. Slots are
+// icon, a title (+ optional eyebrow), and meta. Desktop keeps meta on the
+// trailing edge; mobile stacks it under the title with a tight gap. Slots are
// shared by the row and its skeleton.
export const complianceArticleItem = tv({
slots: {
- root: "flex w-full items-center gap-4 px-8 py-4",
+ root: "flex w-full items-center gap-4 px-8 py-4 max-md:px-4",
icon: "flex size-6 shrink-0 items-center justify-center text-gold-9 [&_svg]:size-full",
- content: "flex min-w-0 flex-1 flex-col gap-1",
+ content: "flex min-w-0 flex-1 items-center gap-4 max-sm:flex-col max-sm:items-start max-sm:gap-0.5",
+ text: "flex min-w-0 flex-1 flex-col gap-0.5",
+ title: "truncate",
meta: "shrink-0",
iconPlaceholder: "size-6 shrink-0 animate-pulse rounded-2 bg-sand-3",
},
diff --git a/apps/compliance-portal/src/components/ComplianceFrameworks/ComplianceFrameworksSection.tsx b/apps/compliance-portal/src/components/ComplianceFrameworks/ComplianceFrameworksSection.tsx
index 0e1310a47..c15d08f5d 100644
--- a/apps/compliance-portal/src/components/ComplianceFrameworks/ComplianceFrameworksSection.tsx
+++ b/apps/compliance-portal/src/components/ComplianceFrameworks/ComplianceFrameworksSection.tsx
@@ -80,7 +80,7 @@ function ComplianceFrameworksSectionContent({ trustCenterKey }: ComplianceFramew
return (
-
);
diff --git a/apps/compliance-portal/src/components/TopBar/TopBarMobileNav.tsx b/apps/compliance-portal/src/components/TopBar/TopBarMobileNav.tsx
new file mode 100644
index 000000000..8c74783ea
--- /dev/null
+++ b/apps/compliance-portal/src/components/TopBar/TopBarMobileNav.tsx
@@ -0,0 +1,212 @@
+// Copyright (c) 2026 Probo Inc .
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { Drawer } from "@base-ui/react/drawer";
+import {
+ BellIcon,
+ BellRingingIcon,
+ ListIcon,
+ LockSimpleIcon,
+ SignOutIcon,
+ XIcon,
+} from "@phosphor-icons/react";
+import { Button } from "@probo/ui/src/v2/Button/Button";
+import { Link } from "@probo/ui/src/v2/Button/Link";
+import { IconButton } from "@probo/ui/src/v2/IconButton/IconButton";
+import { Text } from "@probo/ui/src/v2/typography/Text";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { graphql, useFragment } from "react-relay";
+import { useLocation } from "react-router";
+
+import { buildRequestAllContinueUrl } from "#/lib/auth/continueUrl";
+import { useSignInDialog } from "#/lib/auth/signInDialogContext";
+import { useSignOut } from "#/lib/auth/useSignOut";
+import { useSubscribeDialog } from "#/lib/mailingList/subscribeDialogContext";
+
+import type { TopBarMobileNav_identity$key } from "./__generated__/TopBarMobileNav_identity.graphql";
+import { TOP_BAR_NAV_ITEMS } from "./navItems";
+import { topBar, topBarMobileNav } from "./variants";
+
+const topBarMobileNavFragment = graphql`
+ fragment TopBarMobileNav_identity on Identity {
+ fullName
+ email
+ }
+`;
+
+interface TopBarMobileNavProps {
+ identityKey: TopBarMobileNav_identity$key | null;
+}
+
+function isActive(pathname: string, to: string): boolean {
+ return pathname === to || pathname.startsWith(`${to}/`);
+}
+
+// Burger trigger + right-edge drawer listing the same nav and account actions as
+// the desktop TopBar.
+export function TopBarMobileNav({ identityKey }: TopBarMobileNavProps) {
+ const { t } = useTranslation();
+ const { pathname } = useLocation();
+ const { openSignIn } = useSignInDialog();
+ const { openSubscribe, isSubscribed, unsubscribe, isUnsubscribing } = useSubscribeDialog();
+ const [signOut, isSigningOut] = useSignOut();
+ const [open, setOpen] = useState(false);
+ const identity = useFragment(topBarMobileNavFragment, identityKey);
+
+ const barSlots = topBar();
+ const slots = topBarMobileNav();
+
+ const displayName = identity
+ ? (identity.fullName.trim() || identity.email)
+ : null;
+
+ const close = () => setOpen(false);
+
+ return (
+
+
);
diff --git a/apps/compliance-portal/src/components/TopBar/TopBarUserMenu.tsx b/apps/compliance-portal/src/components/TopBar/TopBarUserMenu.tsx
index 4defd9528..b53ee59d6 100644
--- a/apps/compliance-portal/src/components/TopBar/TopBarUserMenu.tsx
+++ b/apps/compliance-portal/src/components/TopBar/TopBarUserMenu.tsx
@@ -76,10 +76,10 @@ export function TopBarUserMenu({ identityKey }: TopBarUserMenuProps) {
radius="small"
fallback={}
/>
-
+
{displayName}
-
+
)}
/>
diff --git a/apps/compliance-portal/src/components/TopBar/navItems.ts b/apps/compliance-portal/src/components/TopBar/navItems.ts
new file mode 100644
index 000000000..171a4691d
--- /dev/null
+++ b/apps/compliance-portal/src/components/TopBar/navItems.ts
@@ -0,0 +1,26 @@
+// Copyright (c) 2026 Probo Inc .
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+export const TOP_BAR_NAV_ITEMS = [
+ { to: "/documents", labelKey: "topBar.nav.documents" },
+ { to: "/subprocessors", labelKey: "topBar.nav.subprocessors" },
+ { to: "/updates", labelKey: "topBar.nav.updates" },
+ { to: "/requests", labelKey: "topBar.nav.requests" },
+] as const;
diff --git a/apps/compliance-portal/src/components/TopBar/variants.ts b/apps/compliance-portal/src/components/TopBar/variants.ts
index 829853439..45c796216 100644
--- a/apps/compliance-portal/src/components/TopBar/variants.ts
+++ b/apps/compliance-portal/src/components/TopBar/variants.ts
@@ -21,15 +21,20 @@
import { tv } from "tailwind-variants/lite";
// Trust Center top navigation bar. Slots are shared by the live TopBar and its
-// skeleton so the loading placeholder is structurally identical.
+// skeleton so the loading placeholder is structurally identical. Desktop-first:
+// unprefixed classes are the desktop layout; max-md: collapses into the burger.
export const topBar = tv({
slots: {
- bar: "flex h-14 items-center bg-sand-1 px-8",
- inner: "mx-auto flex w-full max-w-5xl items-center gap-10",
- brand: "flex items-center gap-2",
+ bar: "flex h-14 items-center bg-sand-1 px-8 max-md:px-4",
+ inner: "mx-auto flex w-full max-w-5xl items-center gap-10 max-md:gap-3",
+ brand: "flex min-w-0 items-center gap-2",
+ brandName: "truncate",
+ tagline: "max-md:hidden",
logo: "shrink-0",
spacer: "h-px flex-1",
- nav: "flex items-center gap-1",
+ nav: "flex items-center gap-1 max-md:hidden",
+ // Wrapper (not the IconButton) so kit `inline-flex` cannot override `hidden`.
+ menuTrigger: "hidden max-md:block",
},
});
@@ -42,3 +47,26 @@ export const topBarUserMenuTrigger = tv({
"focus-visible:ring-2 focus-visible:ring-sand-8 focus-visible:ring-offset-1 focus-visible:ring-offset-sand-1",
],
});
+
+// Right-edge mobile navigation drawer (Base UI Drawer).
+export const topBarMobileNav = tv({
+ slots: {
+ backdrop: [
+ "fixed inset-0 z-50 bg-sand-12/40",
+ "transition-opacity duration-200",
+ "data-starting-style:opacity-0 data-ending-style:opacity-0",
+ ],
+ viewport: "fixed inset-0 z-50 flex justify-end",
+ popup: [
+ "relative flex h-full w-[min(20rem,100%)] flex-col bg-sand-1 shadow-6 outline-none",
+ "[transform:translateX(var(--drawer-swipe-movement-x,0px))]",
+ "transition-transform duration-200",
+ "data-starting-style:translate-x-full data-ending-style:translate-x-full",
+ ],
+ content: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
+ header: "flex items-center justify-between gap-3",
+ title: "text-4 font-medium text-sand-12",
+ nav: "flex flex-col gap-1",
+ actions: "mt-auto flex flex-col gap-2 border-t border-sand-a3 pt-4",
+ },
+});
diff --git a/apps/compliance-portal/src/components/TrustedBy/TrustedBySection.tsx b/apps/compliance-portal/src/components/TrustedBy/TrustedBySection.tsx
index 6d718d4c4..ac96d3284 100644
--- a/apps/compliance-portal/src/components/TrustedBy/TrustedBySection.tsx
+++ b/apps/compliance-portal/src/components/TrustedBy/TrustedBySection.tsx
@@ -78,7 +78,7 @@ function TrustedBySectionContent({ trustCenterKey }: TrustedBySectionProps) {
return (
-
diff --git a/apps/compliance-portal/src/pages/MainLayout.tsx b/apps/compliance-portal/src/pages/MainLayout.tsx
index 9ba2cf066..a2cc1aa16 100644
--- a/apps/compliance-portal/src/pages/MainLayout.tsx
+++ b/apps/compliance-portal/src/pages/MainLayout.tsx
@@ -21,7 +21,7 @@
import { useTranslation } from "react-i18next";
import type { PreloadedQuery } from "react-relay";
import { graphql, usePreloadedQuery } from "react-relay";
-import { Outlet } from "react-router";
+import { Outlet, useMatch } from "react-router";
import { PoweredBy } from "#/components/PoweredBy/PoweredBy";
import { TopBar } from "#/components/TopBar/TopBar";
@@ -48,22 +48,35 @@ interface MainLayoutProps {
export function MainLayout({ queryRef }: MainLayoutProps) {
const { t } = useTranslation();
const data = usePreloadedQuery(mainLayoutQuery, queryRef);
+ const isDocumentViewer = useMatch("documents/:alias") != null;
// Resume a deferred "request access" once the user lands back authenticated.
useResumeAccessRequest(data.viewer != null);
+ // Document viewer fills the viewport under the TopBar and scrolls its own
+ // stage; every other page uses normal document flow so the footer sits after
+ // content (and at the bottom of short pages via flex-1 main).
return (
- // Bound the shell to the viewport so the TopBar and footer stay fixed and the
- // page area scrolls on its own. Pages that fill the height (the document
- // viewer) then scroll their own body while their toolbar stays put.
-
+
-
+
-
+ {isDocumentViewer ? null : }
diff --git a/apps/compliance-portal/src/pages/MainLayoutSkeleton.tsx b/apps/compliance-portal/src/pages/MainLayoutSkeleton.tsx
index 18ff9ad99..1e83437f6 100644
--- a/apps/compliance-portal/src/pages/MainLayoutSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/MainLayoutSkeleton.tsx
@@ -22,8 +22,9 @@ import { TopBarSkeleton } from "#/components/TopBar/TopBarSkeleton";
export function MainLayoutSkeleton() {
return (
-
+
+
);
}
diff --git a/apps/compliance-portal/src/pages/documents/_components/DocumentAccessAction.tsx b/apps/compliance-portal/src/pages/documents/_components/DocumentAccessAction.tsx
index d81be9448..7f01a6285 100644
--- a/apps/compliance-portal/src/pages/documents/_components/DocumentAccessAction.tsx
+++ b/apps/compliance-portal/src/pages/documents/_components/DocumentAccessAction.tsx
@@ -18,7 +18,7 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
-import { ArrowRightIcon, ClockIcon, LockSimpleIcon } from "@phosphor-icons/react";
+import { ArrowRightIcon, ClockIcon, LockSimpleIcon, SpinnerGapIcon } from "@phosphor-icons/react";
import { Button } from "@probo/ui/src/v2/Button/Button";
import { Link } from "@probo/ui/src/v2/Button/Link";
import { useTranslation } from "react-i18next";
@@ -34,6 +34,30 @@ interface DocumentAccessActionProps {
onGetAccess: () => void;
// Whether the access request is in flight.
isRequesting: boolean;
+ // When false, render a non-interactive status icon (used as the mobile
+ // affordance while the row itself handles the hit target).
+ interactive?: boolean;
+}
+
+function StatusIcon({
+ isAuthorized,
+ requested,
+ isRequesting,
+}: {
+ isAuthorized: boolean;
+ requested: boolean;
+ isRequesting: boolean;
+}) {
+ if (isAuthorized) {
+ return ;
+ }
+ if (requested) {
+ return ;
+ }
+ if (isRequesting) {
+ return ;
+ }
+ return ;
}
// Trailing access control for a document entry: a "View" link to the viewer when
@@ -45,12 +69,31 @@ export function DocumentAccessAction({
viewHref,
onGetAccess,
isRequesting,
+ interactive = true,
}: DocumentAccessActionProps) {
const { t } = useTranslation("documents");
+ if (!interactive) {
+ return (
+
+
+
+ );
+ }
+
if (isAuthorized) {
return (
- }>
+ }
+ >
{t("actions.view")}
);
diff --git a/apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx b/apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx
index 6bccef884..c392e455e 100644
--- a/apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx
+++ b/apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx
@@ -22,6 +22,8 @@ import { ListItem } from "@probo/ui/src/v2/List/ListItem";
import { ListItemContent } from "@probo/ui/src/v2/List/ListItemContent";
import { Text } from "@probo/ui/src/v2/typography/Text";
import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Link as RouterLink } from "react-router";
import { DocumentAccessAction } from "./DocumentAccessAction";
@@ -43,8 +45,8 @@ interface DocumentEntryProps {
}
// Presentational row shared by the document / file / report list items: a title
-// with accent metadata and the trailing access action. The connection-item
-// wrappers own their fragments and supply these values.
+// with accent metadata and the trailing access action. On small screens the
+// whole row is the hit target (the trailing icon is a status affordance only).
export function DocumentEntry({
title,
meta,
@@ -54,8 +56,21 @@ export function DocumentEntry({
onGetAccess,
isRequesting,
}: DocumentEntryProps) {
+ const { t } = useTranslation("documents");
+
+ const mobileHitLabel = requested
+ ? null
+ : isAuthorized
+ ? t("actions.view")
+ : t("actions.getAccess");
+
return (
-
+
{title}
@@ -64,13 +79,50 @@ export function DocumentEntry({
{meta}
-
+
+ {/* Desktop: labeled interactive control. */}
+
+
+
+
+ {/* Mobile: status icon only; the row overlay handles activation. */}
+
+
+
+
+ {/* Sit above the row content so title / icon areas are part of the hit target. */}
+ {mobileHitLabel != null && (
+ isAuthorized
+ ? (
+
+ )
+ : (
+
+ )
+ )}
);
}
diff --git a/apps/compliance-portal/src/pages/documents/_components/DocumentViewer.tsx b/apps/compliance-portal/src/pages/documents/_components/DocumentViewer.tsx
index 67028fa6a..c3dbbdddc 100644
--- a/apps/compliance-portal/src/pages/documents/_components/DocumentViewer.tsx
+++ b/apps/compliance-portal/src/pages/documents/_components/DocumentViewer.tsx
@@ -163,8 +163,14 @@ export function DocumentViewer({ title, dataUri, downloadName }: DocumentViewerP
)}
+ // flushBottomSpace drops the band's bottom padding so the desktop toolbar
+ // sits on the header edge; restore that padding on small screens where the
+ // controls stack into a column.
+
+
-
+
-
+
} />
-
+
{isEmpty
?
diff --git a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
index 144c1930a..5e83e482c 100644
--- a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
@@ -18,26 +18,32 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
+import { ButtonSkeleton } from "@probo/ui/src/v2/Button/ButtonSkeleton";
import { PaginationSkeleton } from "@probo/ui/src/v2/Pagination/PaginationSkeleton";
import { HeadingSkeleton } from "@probo/ui/src/v2/typography/HeadingSkeleton";
import { ComplianceArticleItemSkeleton } from "#/components/ComplianceArticleItem/ComplianceArticleItemSkeleton";
import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
+import { pageHeader } from "#/components/PageHeader/variants";
import { updatesList } from "./_components/variants";
import { UPDATES_PAGE_SIZE } from "./_lib/constants";
export function UpdatesPageSkeleton() {
const { card, rows } = updatesList();
+ const header = pageHeader();
return (
<>
-