Layout improvements

Author: matt-aitken

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -102,7 +102,7 @@ export function ConfigureErrorAlerts({
 
   return (
     <div className="grid h-full grid-rows-[auto_1fr_auto] overflow-hidden">
-      <div className="flex items-center justify-between border-b border-grid-bright px-4 py-3">
+      <div className="flex items-center justify-between border-b border-grid-bright px-3 py-2">
         <Header2>Configure alerts</Header2>
         <LinkButton
           to={closeHref}

apps/webapp/app/components/layout/AppLayout.tsx

@@ -20,8 +20,18 @@ export function MainBody({ children }: { children: React.ReactNode }) {
 }
 
 /** This container should be placed around the content on a page */
-export function PageContainer({ children }: { children: React.ReactNode }) {
-  return <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">{children}</div>;
+export function PageContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("grid h-full grid-rows-[auto_1fr] overflow-hidden", className)}>
+      {children}
+    </div>
+  );
 }
 
 export function PageBody({

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx

@@ -196,7 +196,7 @@ export default function Page() {
   }, [location.search]);
 
   return (
-    <>
+    <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden">
       <NavBar>
         <PageTitle title="Errors" />
         <PageAccessories>
@@ -271,7 +271,7 @@ export default function Page() {
           </TypedAwait>
         </Suspense>
       </PageBody>
-    </>
+    </div>
   );
 }
 

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors/route.tsx

@@ -1,5 +1,5 @@
 import { parse } from "@conform-to/zod";
-import { Outlet, useSearchParams } from "@remix-run/react";
+import { Outlet } from "@remix-run/react";
 import { type ActionFunctionArgs, type LoaderFunctionArgs, json } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PageContainer } from "~/components/layout/AppLayout";
@@ -22,6 +22,7 @@ import {
   type CreateAlertChannelOptions,
   CreateAlertChannelService,
 } from "~/v3/services/alerts/createAlertChannel.server";
+import { useSearchParams } from "~/hooks/useSearchParam";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -152,12 +153,12 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 
 export default function Page() {
   const { alertData, connectToSlackHref } = useTypedLoaderData<typeof loader>();
-  const [searchParams] = useSearchParams();
-  const showAlerts = searchParams.has("alerts");
+  const { has } = useSearchParams();
+  const showAlerts = has("alerts") ?? false;
 
   return (
-    <PageContainer>
-      <ResizablePanelGroup orientation="horizontal" className="h-full overflow-hidden">
+    <PageContainer className="grid-rows-[1fr]">
+      <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full overflow-hidden">
         <ResizablePanel id="errors-main" min="300px">
           <Outlet />
         </ResizablePanel>