refactor: make "full layout" truly full (#408)

Closes RVT-4086

|![image](https://github.com/user-attachments/assets/204abc8e-9187-4f28-bb0e-8d1f79fde3c0)|![image](https://github.com/user-attachments/assets/cc37348a-2db0-4f5a-ac57-bbdd78781690)|
|--|--|
|before|after (same screen size)

Author: jog1t

apps/hub/src/domains/project/components/servers/servers-list-panel.tsx

@@ -61,10 +61,10 @@ export function ServersListPanel({
               </Button>
             </div>
           ) : (
-            <SmallText className="text-muted-foreground text-center col-span-full">
+            <SmallText className="text-muted-foreground text-center col-span-full my-4">
               {data.length === 0
-                ? "No servers found"
-                : "No more servers to load"}
+                ? "No servers found."
+                : "No more servers to load."}
             </SmallText>
           )}
         </>

apps/hub/src/domains/project/layouts/project-layout.tsx

@@ -1,3 +1,4 @@
+import { computePageLayout } from "@/lib/compute-page-layout";
 import { Page, Skeleton } from "@rivet-gg/components";
 import { useMatches } from "@tanstack/react-router";
 import type { PropsWithChildren, ReactNode } from "react";
@@ -8,11 +9,7 @@ interface ProjectPageProps {
 
 function ProjectPage({ children }: ProjectPageProps) {
   const matches = useMatches();
-  return (
-    <Page layout={matches[matches.length - 1].staticData.layout}>
-      {children}
-    </Page>
-  );
+  return <Page layout={computePageLayout(matches)}>{children}</Page>;
 }
 
 ProjectPage.Skeleton = Page.Skeleton;
@@ -37,11 +34,7 @@ Content.Skeleton = function ContentSkeleton() {
 
 function EmptyProjectPage({ children }: PropsWithChildren) {
   const matches = useMatches();
-  return (
-    <Page layout={matches[matches.length - 1].staticData.layout}>
-      {children}
-    </Page>
-  );
+  return <Page layout={computePageLayout(matches)}>{children}</Page>;
 }
 
 export { ProjectPage as Root, EmptyProjectPage as EmptyRoot, Content };

apps/hub/src/layouts/root.tsx

@@ -1,27 +1,19 @@
 import { CommandPanel } from "@/components/command-panel";
 import { NavItem } from "@/components/header/nav-item";
+import { computePageLayout } from "@/lib/compute-page-layout";
 import { publicUrl } from "@/lib/utils";
 import { cn } from "@rivet-gg/components";
 import { Icon, faDiscord, faGithub, faXTwitter } from "@rivet-gg/icons";
 import { useMatches } from "@tanstack/react-router";
-import type { ReactNode } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 import { Header as UiHeader } from "../components/header/header";
 
 interface RootProps {
   children: ReactNode;
 }
 
 const Root = ({ children }: RootProps) => {
-  const matches = useMatches();
-  return (
-    <div
-      className={cn("flex min-h-screen flex-col", {
-        "h-screen": matches[matches.length - 1].staticData.layout === "full",
-      })}
-    >
-      {children}
-    </div>
-  );
+  return <div className={cn("flex min-h-screen flex-col")}>{children}</div>;
 };
 
 const Main = ({ children }: RootProps) => {
@@ -32,6 +24,21 @@ const Main = ({ children }: RootProps) => {
   );
 };
 
+const VisibleInFull = ({ children }: PropsWithChildren) => {
+  const matches = useMatches();
+  const layout = computePageLayout(matches);
+  return (
+    <div
+      className={cn({
+        "min-h-screen grid grid-rows-[auto,1fr]": layout === "full",
+        contents: layout !== "full",
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
 const Header = () => {
   return <UiHeader />;
 };
@@ -127,4 +134,4 @@ const Footer = () => {
   );
 };
 
-export { Root, Main, Header, Footer };
+export { Root, Main, Header, Footer, VisibleInFull };

apps/hub/src/lib/compute-page-layout.tsx

@@ -0,0 +1,18 @@
+import type {
+  MakeRouteMatchUnion,
+  StaticDataRouteOption,
+} from "@tanstack/react-router";
+
+export function computePageLayout(
+  matches: MakeRouteMatchUnion[],
+): StaticDataRouteOption["layout"] {
+  let layout: StaticDataRouteOption["layout"] = "compact";
+
+  for (const match of matches) {
+    if (match.staticData.layout) {
+      layout = match.staticData.layout;
+    }
+  }
+
+  return layout;
+}

apps/hub/src/routes/__root.tsx

@@ -85,11 +85,13 @@ function RootErrorComponent(props: ErrorComponentProps) {
 function Root() {
   return (
     <Layout.Root>
-      <Layout.Header />
-      <Layout.Main>
-        <Modals />
-        <Outlet />
-      </Layout.Main>
+      <Layout.VisibleInFull>
+        <Layout.Header />
+        <Layout.Main>
+          <Modals />
+          <Outlet />
+        </Layout.Main>
+      </Layout.VisibleInFull>
       <Layout.Footer />
     </Layout.Root>
   );

apps/hub/src/routes/_authenticated/_layout.tsx

@@ -1,11 +1,12 @@
+import { computePageLayout } from "@/lib/compute-page-layout";
 import { PageLayout } from "@rivet-gg/components/layout";
 import { Outlet, createFileRoute, useMatches } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_authenticated/_layout")({
   component: () => {
     const matches = useMatches();
     return (
-      <PageLayout.Root layout={matches[matches.length - 1].staticData.layout}>
+      <PageLayout.Root layout={computePageLayout(matches)}>
         <Outlet />
       </PageLayout.Root>
     );

apps/hub/src/routes/_authenticated/_layout/projects/$projectId/environments/$environmentId/servers.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
   Flex,
@@ -65,17 +64,14 @@ function ProjectServersRoute() {
             />
           </Flex>
         </CardTitle>
-        <CardDescription>
-          Servers are created & destroyed automatically as players connect &
-          disconnect.
-        </CardDescription>
       </CardHeader>
       <CardContent className="flex-1 min-h-0 w-full p-0">
         {data.length === 0 ? (
           <div className="flex items-center mx-auto flex-col gap-2 my-10">
             <span>No servers created.</span>
             <span className="text-xs">
-              Run your project client & connect to start a server.
+              Servers are created & destroyed automatically as players connect &
+              disconnect.
             </span>
           </div>
         ) : (

packages/components/src/layout/page.tsx

@@ -8,13 +8,10 @@ interface PageLayoutProps {
 
 const PageLayout = ({ children, layout = "compact" }: PageLayoutProps) => (
   <div
-    className={cn(
-      {
-        container: layout === "compact",
-        "px-8 w-full flex-1 h-full flex min-h-0": layout === "full",
-      },
-      "pt-8",
-    )}
+    className={cn({
+      "p-8 container": layout === "compact",
+      "px-4 w-full h-full py-4": layout === "full",
+    })}
   >
     {children}
   </div>

packages/components/src/page.tsx

@@ -23,7 +23,7 @@ export const Page = ({
     <Flex
       direction="col"
       gap="4"
-      className={cn(className, layout === "full" && "flex-1 w-full")}
+      className={cn(className, { "h-full": layout === "full" })}
     >
       {title ? <H1 className={cn(header ? "mt-8" : "my-8")}>{title}</H1> : null}
       {header}