misc: add instance banner and consent support

frontend/src/layouts/AdminLayout/AdminLayout.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, Outlet } from "@tanstack/react-router";
 
 import { WishForm } from "@app/components/features/WishForm";
+import { Banner } from "@app/components/page-frames/Banner";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,6 +12,7 @@ import {
   DropdownMenuTrigger
 } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
+import { useServerConfig } from "@app/context";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
@@ -18,10 +20,14 @@ import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/Mini
 
 export const AdminLayout = () => {
   const { t } = useTranslation();
+  const { config } = useServerConfig();
+
+  const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";
 
   return (
     <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+      <Banner />
+      <div className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden md:flex`}>
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
@@ -69,7 +75,6 @@ export const AdminLayout = () => {
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>
-              )
             </nav>
           </aside>
           <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
@@ -83,6 +88,7 @@ export const AdminLayout = () => {
           {` ${t("common.no-mobile")} `}
         </p>
       </div>
+      <Banner />
     </>
   );
 };

frontend/src/layouts/OrganizationLayout/OrganizationLayout.tsx

@@ -6,6 +6,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import { CreateOrgModal } from "@app/components/organization/CreateOrgModal";
+import { Banner } from "@app/components/page-frames/Banner";
 import {
   BreadcrumbContainer,
   Menu,
@@ -13,6 +14,7 @@ import {
   MenuItem,
   TBreadcrumbFormat
 } from "@app/components/v2";
+import { useServerConfig } from "@app/context";
 import { usePopUp } from "@app/hooks";
 
 import { InsecureConnectionBanner } from "./components/InsecureConnectionBanner";
@@ -22,6 +24,7 @@ import { SidebarHeader } from "./components/SidebarHeader";
 export const OrganizationLayout = () => {
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const location = useLocation();
+  const { config } = useServerConfig();
   const isOrganizationSpecificPage = location.pathname.startsWith("/organization");
   const breadcrumbs =
     isOrganizationSpecificPage && matches && "breadcrumbs" in matches
@@ -45,9 +48,14 @@ export const OrganizationLayout = () => {
       ] as string[]
     ).includes(location.pathname);
 
+  const containerHeight = config.pageFrameContent ? "h-[94vh]" : "h-screen";
+
   return (
     <>
-      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex">
+      <Banner />
+      <div
+        className={`dark hidden ${containerHeight} w-full flex-col overflow-x-hidden bg-bunker-800 transition-all md:flex`}
+      >
         {!window.isSecureContext && <InsecureConnectionBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <MinimizedOrgSidebar />
@@ -137,6 +145,7 @@ export const OrganizationLayout = () => {
           {` ${t("common.no-mobile")} `}
         </p>
       </div>
+      <Banner />
     </>
   );
 };