From fbdd7e47c6287b36ea78a68532b88c2497a14fa2 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 19 Jul 2024 09:13:53 +0200
Subject: [PATCH] fix: identical page sizes and no flashing (#5205)

---
 .../src/components/layouts/organization.tsx   |   2 +-
 .../app/src/components/layouts/project.tsx    |   2 +-
 .../web/app/src/components/layouts/target.tsx |   4 +-
 .../src/components/ui/dotted-background.tsx   |  10 +-
 packages/web/app/src/index.css                |   5 -
 packages/web/app/src/pages/auth.tsx           |   5 +-
 .../web/app/src/pages/organization-join.tsx   |   2 +-
 .../web/app/src/pages/organization-new.tsx    |   2 +-
 .../app/src/pages/target-checks-single.tsx    |   2 +-
 packages/web/app/src/pages/target-checks.tsx  | 170 +++++++++---------
 .../app/src/pages/target-history-version.tsx  |   6 +-
 packages/web/app/src/pages/target-history.tsx |  14 +-
 .../web/app/src/pages/target-laboratory.tsx   |   2 +-
 packages/web/app/src/pages/target.tsx         |   1 -
 14 files changed, 109 insertions(+), 118 deletions(-)

diff --git a/packages/web/app/src/components/layouts/organization.tsx b/packages/web/app/src/components/layouts/organization.tsx
index 8628729d8..00a0714cb 100644
--- a/packages/web/app/src/components/layouts/organization.tsx
+++ b/packages/web/app/src/components/layouts/organization.tsx
@@ -207,7 +207,7 @@ export function OrganizationLayout({
           ) : null}
         </div>
       </div>
-      <div className="container pb-7">
+      <div className="container min-h-[var(--content-height)] pb-7">
         {currentOrganization ? (
           <>
             <ProPlanBilling organization={currentOrganization} />
diff --git a/packages/web/app/src/components/layouts/project.tsx b/packages/web/app/src/components/layouts/project.tsx
index 507ae5e7d..0e5525bb9 100644
--- a/packages/web/app/src/components/layouts/project.tsx
+++ b/packages/web/app/src/components/layouts/project.tsx
@@ -191,7 +191,7 @@ export function ProjectLayout({
           />
         </div>
       </div>
-      <div className="container h-full pb-7">
+      <div className="container min-h-[var(--content-height)] pb-7">
         <div className={className}>{children}</div>
       </div>
     </>
diff --git a/packages/web/app/src/components/layouts/target.tsx b/packages/web/app/src/components/layouts/target.tsx
index 420c55028..45303fcbb 100644
--- a/packages/web/app/src/components/layouts/target.tsx
+++ b/packages/web/app/src/components/layouts/target.tsx
@@ -269,7 +269,9 @@ export const TargetLayout = ({
           ) : null}
         </div>
       </div>
-      <div className={cn('container pb-7', className)}>{children}</div>
+      <div className={cn('container min-h-[var(--content-height)] pb-7', className)}>
+        {children}
+      </div>
     </>
   );
 };
diff --git a/packages/web/app/src/components/ui/dotted-background.tsx b/packages/web/app/src/components/ui/dotted-background.tsx
index aca152171..e40aad072 100644
--- a/packages/web/app/src/components/ui/dotted-background.tsx
+++ b/packages/web/app/src/components/ui/dotted-background.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
-export function DottedBackground(props: { children: React.ReactNode }) {
+export function DottedBackground(props: { children: React.ReactNode; className?: string }) {
   return (
-    <div className="bg-dot-white/[0.2] relative flex size-full items-center justify-center bg-black">
+    <div
+      className={clsx(
+        'bg-dot-white/[0.2] relative flex size-full items-center justify-center bg-black',
+        props.className,
+      )}
+    >
       <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]" />
       {props.children}
     </div>
diff --git a/packages/web/app/src/index.css b/packages/web/app/src/index.css
index ca5434d8e..18106cb05 100644
--- a/packages/web/app/src/index.css
+++ b/packages/web/app/src/index.css
@@ -84,11 +84,6 @@
     @apply border-border;
   }
 
-  html,
-  body {
-    height: 100%;
-  }
-
   body {
     @apply text-foreground bg-[#030711];
     font-feature-settings:
diff --git a/packages/web/app/src/pages/auth.tsx b/packages/web/app/src/pages/auth.tsx
index c86d3c7f5..22f98546c 100644
--- a/packages/web/app/src/pages/auth.tsx
+++ b/packages/web/app/src/pages/auth.tsx
@@ -23,15 +23,14 @@ export function AuthPage() {
   return (
     <>
       <Meta title="Welcome" />
-
       <div className="size-full">
         <>
           {session.loading ? (
-            <div className="flex size-full items-center justify-center">
+            <div className="flex min-h-[100vh] items-center justify-center">
               <HiveLogo animated={false} className="size-8 animate-pulse" />
             </div>
           ) : (
-            <div className="grid h-full items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
+            <div className="grid h-full min-h-[100vh] items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
               <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
                 <div className="absolute inset-0 bg-[#101014]" />
                 <div className="relative z-20 flex items-center text-lg font-medium">
diff --git a/packages/web/app/src/pages/organization-join.tsx b/packages/web/app/src/pages/organization-join.tsx
index c0da78d67..6206ef2b5 100644
--- a/packages/web/app/src/pages/organization-join.tsx
+++ b/packages/web/app/src/pages/organization-join.tsx
@@ -92,7 +92,7 @@ export function JoinOrganizationPage(props: { inviteCode: string }) {
   return (
     <>
       <Meta title={orgName ? `Invitation to ${orgName}` : 'Invitation'} />
-      <DottedBackground>
+      <DottedBackground className="min-h-[100vh]">
         <Button
           variant="outline"
           onClick={() => router.navigate({ to: '/logout' })}
diff --git a/packages/web/app/src/pages/organization-new.tsx b/packages/web/app/src/pages/organization-new.tsx
index dd592770a..435eb4d4b 100644
--- a/packages/web/app/src/pages/organization-new.tsx
+++ b/packages/web/app/src/pages/organization-new.tsx
@@ -28,7 +28,7 @@ export function NewOrgPage(): ReactElement {
   return (
     <>
       <Meta title="Create Organization" />
-      <DottedBackground>
+      <DottedBackground className="min-h-[100vh]">
         <div className="flex h-full grow items-center">
           <Button
             variant="outline"
diff --git a/packages/web/app/src/pages/target-checks-single.tsx b/packages/web/app/src/pages/target-checks-single.tsx
index 7ab45828e..d1b81126d 100644
--- a/packages/web/app/src/pages/target-checks-single.tsx
+++ b/packages/web/app/src/pages/target-checks-single.tsx
@@ -1046,7 +1046,7 @@ const ActiveSchemaCheck = (props: {
     return null;
   }
 
-  if (query.fetching) {
+  if (query.fetching || query.stale) {
     return (
       <div className="flex h-fit flex-1 items-center justify-center self-center">
         <div className="flex flex-col items-center">
diff --git a/packages/web/app/src/pages/target-checks.tsx b/packages/web/app/src/pages/target-checks.tsx
index d1d0e46b3..ac2d1af59 100644
--- a/packages/web/app/src/pages/target-checks.tsx
+++ b/packages/web/app/src/pages/target-checks.tsx
@@ -282,98 +282,90 @@ function ChecksPageContent(props: { organizationId: string; projectId: string; t
         projectId={props.projectId}
         targetId={props.targetId}
         page={Page.Checks}
-        className="h-full"
+        className={cn('flex', hasSchemaChecks || hasActiveSchemaCheck ? 'flex-row gap-x-6' : '')}
       >
-        <div
-          className={cn(
-            'flex h-full w-full',
-            hasSchemaChecks || hasActiveSchemaCheck ? 'flex-row gap-x-6' : '',
-          )}
-        >
-          <div>
-            <div className="py-6">
-              <Title>Schema Checks</Title>
-              <Subtitle>Recently checked schemas.</Subtitle>
-            </div>
-            {query.fetching || query.stale ? null : hasSchemaChecks ? (
-              <div className="flex flex-col gap-5">
-                <div>
-                  <div className="flex h-9 flex-row items-center justify-between">
-                    <Label
-                      htmlFor="filter-toggle-has-changes"
-                      className="text-sm font-normal text-gray-100"
-                    >
-                      Show only changed schemas
-                    </Label>
-                    <Switch
-                      checked={filters.showOnlyChanged ?? false}
-                      onCheckedChange={handleShowOnlyFilterChange}
-                      id="filter-toggle-has-changes"
-                    />
-                  </div>
-                  <div className="flex h-9 flex-row items-center justify-between">
-                    <Label
-                      htmlFor="filter-toggle-status-failed"
-                      className="text-sm font-normal text-gray-100"
-                    >
-                      Show only failed checks
-                    </Label>
-                    <Switch
-                      checked={filters.showOnlyFailed ?? false}
-                      onCheckedChange={handleShowOnlyFilterFailed}
-                      id="filter-toggle-status-failed"
-                    />
-                  </div>
-                </div>
-                {hasFilteredSchemaChecks ? (
-                  <div className="flex w-[300px] grow flex-col gap-2.5 overflow-y-auto rounded-md border border-gray-800/50 p-2.5">
-                    {paginationVariables.map((cursor, index) => (
-                      <Navigation
-                        organizationId={props.organizationId}
-                        projectId={props.projectId}
-                        targetId={props.targetId}
-                        schemaCheckId={schemaCheckId}
-                        after={cursor}
-                        isLastPage={index + 1 === paginationVariables.length}
-                        onLoadMore={cursor =>
-                          setPaginationVariables(cursors => [...cursors, cursor])
-                        }
-                        key={cursor ?? 'first'}
-                        filters={filters}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <div className="cursor-default text-sm">
-                    No schema checks found with the current filters
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div>
-                <div className="cursor-default text-sm">
-                  {hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
-                </div>
-                <DocsLink href="/features/schema-registry#check-a-schema">
-                  {hasActiveSchemaCheck
-                    ? 'Check you first schema'
-                    : 'Learn how to check your first schema with Hive CLI'}
-                </DocsLink>
-              </div>
-            )}
+        <div>
+          <div className="w-[300px] py-6">
+            <Title>Schema Checks</Title>
+            <Subtitle>Recently checked schemas.</Subtitle>
           </div>
-          {hasActiveSchemaCheck ? (
-            schemaCheckId ? (
-              <Outlet />
-            ) : null
-          ) : hasSchemaChecks ? (
-            <EmptyList
-              className="border-0 pt-6"
-              title="Select a schema check"
-              description="A list of your schema checks is available on the left."
-            />
-          ) : null}
+          {query.fetching || query.stale ? null : hasSchemaChecks ? (
+            <div className="flex flex-col gap-5">
+              <div>
+                <div className="flex h-9 flex-row items-center justify-between">
+                  <Label
+                    htmlFor="filter-toggle-has-changes"
+                    className="text-sm font-normal text-gray-100"
+                  >
+                    Show only changed schemas
+                  </Label>
+                  <Switch
+                    checked={filters.showOnlyChanged ?? false}
+                    onCheckedChange={handleShowOnlyFilterChange}
+                    id="filter-toggle-has-changes"
+                  />
+                </div>
+                <div className="flex h-9 flex-row items-center justify-between">
+                  <Label
+                    htmlFor="filter-toggle-status-failed"
+                    className="text-sm font-normal text-gray-100"
+                  >
+                    Show only failed checks
+                  </Label>
+                  <Switch
+                    checked={filters.showOnlyFailed ?? false}
+                    onCheckedChange={handleShowOnlyFilterFailed}
+                    id="filter-toggle-status-failed"
+                  />
+                </div>
+              </div>
+              {hasFilteredSchemaChecks ? (
+                <div className="flex w-[300px] grow flex-col gap-2.5 overflow-y-auto rounded-md border border-gray-800/50 p-2.5">
+                  {paginationVariables.map((cursor, index) => (
+                    <Navigation
+                      organizationId={props.organizationId}
+                      projectId={props.projectId}
+                      targetId={props.targetId}
+                      schemaCheckId={schemaCheckId}
+                      after={cursor}
+                      isLastPage={index + 1 === paginationVariables.length}
+                      onLoadMore={cursor => setPaginationVariables(cursors => [...cursors, cursor])}
+                      key={cursor ?? 'first'}
+                      filters={filters}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="cursor-default text-sm">
+                  No schema checks found with the current filters
+                </div>
+              )}
+            </div>
+          ) : (
+            <div>
+              <div className="cursor-default text-sm">
+                {hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
+              </div>
+              <DocsLink href="/features/schema-registry#check-a-schema">
+                {hasActiveSchemaCheck
+                  ? 'Check you first schema'
+                  : 'Learn how to check your first schema with Hive CLI'}
+              </DocsLink>
+            </div>
+          )}
         </div>
+
+        {hasActiveSchemaCheck ? (
+          schemaCheckId ? (
+            <Outlet />
+          ) : null
+        ) : hasSchemaChecks ? (
+          <EmptyList
+            className="my-4 mt-6 justify-center border-0 py-8"
+            title="Select a schema check"
+            description="A list of your schema checks is available on the left."
+          />
+        ) : null}
       </TargetLayout>
     </>
   );
diff --git a/packages/web/app/src/pages/target-history-version.tsx b/packages/web/app/src/pages/target-history-version.tsx
index 0589d9b1a..7b87af575 100644
--- a/packages/web/app/src/pages/target-history-version.tsx
+++ b/packages/web/app/src/pages/target-history-version.tsx
@@ -75,7 +75,7 @@ function SchemaVersionView(props: {
   );
 
   return (
-    <div className="flex h-full grow flex-col">
+    <div className="flex w-full flex-col">
       <div className="py-6">
         <Title>Schema Version {schemaVersion.id}</Title>
         <Subtitle>Detailed view of the schema version</Subtitle>
@@ -310,7 +310,7 @@ function DefaultSchemaVersionView(props: {
           </TabsList>
         </Tabs>
       </TooltipProvider>
-      <div className="border-muted min-h-[850px] rounded-md rounded-t-none border border-t-0">
+      <div className="border-muted grow rounded-md rounded-t-none border border-t-0">
         {selectedView === 'details' && (
           <div className="my-4 px-4">
             {schemaVersion.isFirstComposableVersion ? (
@@ -482,7 +482,7 @@ function ContractVersionView(props: {
           </TabsList>
         </Tabs>
       </TooltipProvider>
-      <div className="border-muted min-h-[850px] rounded-md rounded-t-none border border-t-0">
+      <div className="border-muted grow rounded-md rounded-t-none border border-t-0">
         {selectedView === 'details' && (
           <div className="my-4 px-4">
             {contractVersion.isFirstComposableVersion ? (
diff --git a/packages/web/app/src/pages/target-history.tsx b/packages/web/app/src/pages/target-history.tsx
index 9d393a1a5..6b73917f6 100644
--- a/packages/web/app/src/pages/target-history.tsx
+++ b/packages/web/app/src/pages/target-history.tsx
@@ -214,10 +214,10 @@ function HistoryPageContent(props: {
       projectId={props.projectId}
       targetId={props.targetId}
       page={Page.History}
-      className="h-[--content-height] overflow-scroll"
+      className="flex flex-row gap-x-6"
     >
       {hasVersions ? (
-        <div className="flex size-full flex-row gap-x-6">
+        <>
           <div>
             <div className="py-6">
               <Title>Versions</Title>
@@ -242,18 +242,16 @@ function HistoryPageContent(props: {
               </div>
             </div>
           </div>
-          <div className="grow">
-            <Outlet />
-          </div>
-        </div>
+          <Outlet />
+        </>
       ) : (
-        <>
+        <div className="w-full">
           <div className="py-6">
             <Title>Versions</Title>
             <Subtitle>Recently published schemas.</Subtitle>
           </div>
           {query.fetching ? null : noSchemaVersion}
-        </>
+        </div>
       )}
     </TargetLayout>
   );
diff --git a/packages/web/app/src/pages/target-laboratory.tsx b/packages/web/app/src/pages/target-laboratory.tsx
index ad8e1763f..3f31f25d9 100644
--- a/packages/web/app/src/pages/target-laboratory.tsx
+++ b/packages/web/app/src/pages/target-laboratory.tsx
@@ -968,7 +968,7 @@ function LaboratoryPageContent(props: {
       projectId={props.projectId}
       targetId={props.targetId}
       page={Page.Laboratory}
-      className="flex h-[--content-height] flex-col"
+      className="flex h-[--content-height] flex-col pb-0"
     >
       <div className="flex py-6">
         <div className="flex-1">
diff --git a/packages/web/app/src/pages/target.tsx b/packages/web/app/src/pages/target.tsx
index c474029e4..5fb25423e 100644
--- a/packages/web/app/src/pages/target.tsx
+++ b/packages/web/app/src/pages/target.tsx
@@ -68,7 +68,6 @@ function Schemas(props: { schemas?: readonly CompositeSchema[]; schema?: SingleS
   if (props.schema) {
     return (
       <GraphQLBlock
-        className="mb-6"
         sdl={props.schema.source}
         url={'url' in props.schema && typeof props.schema.url === 'string' ? props.schema.url : ''}
       />