Add z-index scale and overview redirect

Introduce a v2 z-1…z-6 stacking scale so portaled
menus sit above in-page media, and redirect the
legacy /overview trust-app URL to home.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/components/BackdropCard/BackdropCard.tsx

@@ -28,7 +28,7 @@ import { backdropCard } from "./variants";
 interface BackdropCardProps {
   // Centered content shown above the backdrop (an icon or a logo box). The node
   // owns its own sizing/color; position it above the backdrop with `relative
-  // z-10`.
+  // z-1`.
   media: ReactNode;
   // When set, a blurred, magnified copy of this image becomes the backdrop;
   // otherwise a dotted texture is shown.

apps/compliance-portal/src/components/CommitmentCard/variants.ts

@@ -25,6 +25,6 @@ import { tv } from "tailwind-variants/lite";
 // BackdropCard; this slot only styles the icon container.
 export const commitmentCard = tv({
   slots: {
-    icon: "relative z-10 flex size-8 items-center justify-center text-gold-9",
+    icon: "relative z-1 flex size-8 items-center justify-center text-gold-9",
   },
 });

apps/compliance-portal/src/components/MediaTile/variants.ts

@@ -32,7 +32,7 @@ export const mediaTile = tv({
     backdrop: "pointer-events-none absolute inset-0",
     blurBackdrop: "pointer-events-none absolute inset-0 size-full scale-150 object-cover opacity-10 blur-lg",
     backdropFade: "pointer-events-none absolute inset-0 bg-linear-to-b from-sand-1/0 to-sand-1",
-    mediaContent: "relative z-10 flex size-16 items-center justify-center [&_img]:size-full [&_img]:object-contain",
+    mediaContent: "relative z-1 flex size-16 items-center justify-center [&_img]:size-full [&_img]:object-contain",
     caption: "flex w-full items-center justify-center px-4 py-3",
   },
   variants: {

apps/compliance-portal/src/components/PoweredBy/variants.ts

@@ -27,7 +27,7 @@ export const poweredBy = tv({
     root: "relative flex w-full items-center justify-center overflow-hidden bg-sand-2 py-6 text-sand-11",
     backdrop: "pointer-events-none absolute inset-0",
     backdropFade: "pointer-events-none absolute inset-0 bg-linear-to-b from-sand-2 to-sand-2/0",
-    content: "relative z-10 flex items-center justify-center gap-2",
+    content: "relative z-1 flex items-center justify-center gap-2",
     logo: "h-6 w-auto text-sand-9",
   },
 });

apps/compliance-portal/src/pages/documents/_components/DocumentEntry.tsx

@@ -113,14 +113,14 @@ export function DocumentEntry({
           ? (
               <RouterLink
                 to={viewHref}
-                className="absolute inset-0 z-10 hidden max-sm:block"
+                className="absolute inset-0 z-1 hidden max-sm:block"
                 aria-label={mobileHitLabel}
               />
             )
           : (
               <button
                 type="button"
-                className="absolute inset-0 z-10 hidden max-sm:block"
+                className="absolute inset-0 z-1 hidden max-sm:block"
                 aria-label={mobileHitLabel}
                 disabled={isRequesting}
                 onClick={onGetAccess}

apps/compliance-portal/src/pages/subprocessors/_components/variants.ts

@@ -25,7 +25,7 @@ import { tv } from "tailwind-variants/lite";
 // the body. The card frame and backdrop live in BackdropCard.
 export const subprocessorListItem = tv({
   slots: {
-    logo: "relative z-10 flex size-10 items-center justify-center overflow-hidden rounded-2 bg-sand-1",
+    logo: "relative z-1 flex size-10 items-center justify-center overflow-hidden rounded-2 bg-sand-1",
     logoImage: "size-full object-cover",
     logoFallbackIcon: "text-sand-9",
     region: "flex items-start gap-1",

apps/compliance-portal/src/routes.tsx

@@ -20,7 +20,8 @@
 
 import { lazy } from "@probo/react-lazy";
 import { type AppRoute, routeFromAppRoute } from "@probo/routes";
-import { createBrowserRouter } from "react-router";
+import { Fragment } from "react";
+import { createBrowserRouter, redirect } from "react-router";
 
 import { PageErrorBoundary } from "#/components/errors/PageErrorBoundary";
 import { RootErrorBoundary } from "#/components/errors/RootErrorBoundary";
@@ -52,6 +53,15 @@ const routes = [
             Fallback: HomePageSkeleton,
             Component: lazy(() => import("#/pages/HomePageLoader")),
           },
+          // Legacy trust-app URL; home now lives at the index route.
+          {
+            path: "overview",
+            loader: () => {
+              // eslint-disable-next-line
+              throw redirect("/");
+            },
+            Component: Fragment,
+          },
           ...documentRoutes,
           ...subprocessorRoutes,
           ...updateRoutes,