Configure tool groups for MCP servers to organize and govern tools.
-
-
+ {/* The name and description live in the topbar, like every other page —
+ an inline
here would just repeat the title shown above it. */}
+ Configure tool groups for MCP servers to organize and govern tools.
- }
- title="Unlock SCIM based access management for user provisioning"
- description="This feature is a part of the Bifrost enterprise license. We would love to know more about your use case and how we can help you."
- readmeLink="https://docs.getbifrost.ai/enterprise/advanced-governance"
- />
+
+
+ }
+ title="Unlock SCIM based access management for user provisioning"
+ description="This feature is a part of the Bifrost enterprise license. We would love to know more about your use case and how we can help you."
+ readmeLink="https://docs.getbifrost.ai/enterprise/advanced-governance"
+ />
+
);
}
\ No newline at end of file
diff --git a/ui/app/clientLayout.tsx b/ui/app/clientLayout.tsx
index 44951cb1943..962005e0548 100644
--- a/ui/app/clientLayout.tsx
+++ b/ui/app/clientLayout.tsx
@@ -4,10 +4,12 @@ import OnboardingWidget from "@/components/onboardingWidget";
import ProgressProvider from "@/components/progressBar";
import Sidebar from "@/components/sidebar";
import { ThemeProvider } from "@/components/themeProvider";
+import Topbar from "@/components/topbar";
import TrialExpiryBanner from "@/components/trialExpiryBanner";
import { Button } from "@/components/ui/button";
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
import { useStoreSync } from "@/hooks/useStoreSync";
+import { TopbarProvider } from "@/lib/contexts/topbarContext";
import { WebSocketProvider } from "@/hooks/useWebSocket";
import { getErrorMessage, ReduxProvider, useGetCoreConfigQuery, useIsAuthEnabledQuery } from "@/lib/store";
import { BifrostConfig } from "@/lib/types/config";
@@ -51,12 +53,6 @@ function AppContent({ children }: { children: React.ReactNode }) {
// neither a fragment nor a cookie to drive the tempTokenScoped per-visitor
// logic.
const publicShell = matches.some((m) => (m.staticData as { publicShell?: boolean } | undefined)?.publicShell === true);
- const pathname = useLocation({ select: (location) => location.pathname });
- const mobilePageTitle = (pathname.split("/").filter(Boolean).at(-1) ?? "Dashboard")
- .split("-")
- .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
- .join(" ");
-
// Probe dashboard auth state on opted-in routes. is-auth-enabled is whitelisted
// (no 401 risk) and returns whether the current cookie is a valid session.
const { data: authState, isLoading: authLoading } = useIsAuthEnabledQuery(undefined, { skip: !tempTokenScoped });
@@ -118,28 +114,38 @@ function AppContent({ children }: { children: React.ReactNode }) {
-
-
-
-
-
-
- {mobilePageTitle}
+
+
+
+ {/* Content column: a fixed-height flex stack so the topbar takes its
+ 48px and the content card absorbs the remainder. The topbar has no
+ background of its own, so it reads as the same surface as the
+ sidebar (both show the page body background). */}
+
+
+ {/* No w-full: in a column flex container the cross axis is width, and
+ an explicit 100% would sit *outside* the right margin, pushing it
+ off-screen. Default align-items:stretch already fills the column
+ minus margins. No top margin either: the card butts against the
+ 60px topbar so its top edge lands on the same line as the sidebar's
+ search input, and --app-content-viewport compensates so full-height
+ pages still measure to the card's inner height. */}
+
-
+
+
);
diff --git a/ui/app/globals.css b/ui/app/globals.css
index 366a9df013a..ec8de98d94f 100644
--- a/ui/app/globals.css
+++ b/ui/app/globals.css
@@ -96,7 +96,20 @@
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
- --height-base: calc(100vh - 130px);
+ /* Height of the app topbar, and the viewport height left underneath it for
+ page content. Anything rendered inside the content card must size against
+ --app-content-viewport rather than 100dvh, or it overflows the card by
+ exactly the topbar's height and gives the whole shell a second scrollbar.
+ Full-viewport surfaces that sit outside the card — dialogs, portalled
+ popovers, the sidebar, the auth-only MinimalShell — keep using 100dvh. */
+ --app-topbar-height: 3.25rem;
+ /* Pages size themselves as `calc(var(--app-content-viewport) - 1rem)` — a
+ leftover from when the card carried my-2. It now has only mb-2, so add
+ that 0.5rem back here to keep their subtraction landing exactly on the
+ card's inner height. */
+ --app-content-viewport: calc(100dvh - var(--app-topbar-height) + 0.5rem);
+
+ --height-base: calc(var(--app-content-viewport) - 130px);
/* Font size overrides - format: [size, { line-height: value }] */
--text-xs: 0.75rem;
diff --git a/ui/app/workspace/audit-logs/page.tsx b/ui/app/workspace/audit-logs/page.tsx
index 7d64035c497..1724b9ba202 100644
--- a/ui/app/workspace/audit-logs/page.tsx
+++ b/ui/app/workspace/audit-logs/page.tsx
@@ -2,7 +2,7 @@ import AuditLogsView from "@enterprise/components/audit-logs/auditLogsView";
export default function AuditLogsPage() {
return (
-
+
);
diff --git a/ui/app/workspace/cluster/page.tsx b/ui/app/workspace/cluster/page.tsx
index 328266aaa5c..1fe380abb77 100644
--- a/ui/app/workspace/cluster/page.tsx
+++ b/ui/app/workspace/cluster/page.tsx
@@ -2,7 +2,7 @@ import ClusterView from "@enterprise/components/cluster/clusterView";
export default function ClusterPage() {
return (
-