From 3f8af7b20758d2d56609c9b6acf369b2490fbf32 Mon Sep 17 00:00:00 2001
From: Paolo Guerra <pg.guerrap@proton.me>
Date: Mon, 23 Oct 2023 21:59:23 +0200
Subject: [PATCH] Fix template component scroll issues (#452)

* fix(react): adjust template component style and fallback container

* fix(frontend): fix height styles when loading

* fix(frontend): fix height styles when loading on page component

* docs: add changeset

* fix(frontend): add missing h-screen styles
---
 .changeset/lazy-mangos-promise.md                  |  5 +++++
 .changeset/moody-days-brake.md                     |  5 +++++
 .../src/pages/create-with-template-id/index.tsx    | 14 +++++++-------
 packages/frontend/src/pages/page/index.tsx         |  6 +++---
 .../react/src/components/template-component.tsx    |  5 +++--
 5 files changed, 23 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/lazy-mangos-promise.md
 create mode 100644 .changeset/moody-days-brake.md

diff --git a/.changeset/lazy-mangos-promise.md b/.changeset/lazy-mangos-promise.md
new file mode 100644
index 000000000..f98642a4e
--- /dev/null
+++ b/.changeset/lazy-mangos-promise.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/react": patch
+---
+
+Adjust template component style and fallback container styles
diff --git a/.changeset/moody-days-brake.md b/.changeset/moody-days-brake.md
new file mode 100644
index 000000000..38450f3bd
--- /dev/null
+++ b/.changeset/moody-days-brake.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": patch
+---
+
+Fix height styles when loading on page and create component
diff --git a/packages/frontend/src/pages/create-with-template-id/index.tsx b/packages/frontend/src/pages/create-with-template-id/index.tsx
index ebdee8cff..2d8a36c5a 100644
--- a/packages/frontend/src/pages/create-with-template-id/index.tsx
+++ b/packages/frontend/src/pages/create-with-template-id/index.tsx
@@ -30,7 +30,7 @@ export const CreateWithTemplateId = () => {
     const ipfsGatewayURL = useIPFSGatewayURL();
     const invalidateLatestKPITokens = useInvalidateLatestKPITokens();
 
-    const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(true);
     const [template, setTemplate] = useState<ResolvedTemplate | null>(
         state && "specification" in state.template ? state.template : null,
     );
@@ -126,17 +126,17 @@ export const CreateWithTemplateId = () => {
 
     return (
         <Layout navbarBgColor="green" noMarquee>
-            <div className="h-screen flex-grow bg-grid-light bg-left-top bg-green">
+            <div className="h-fit flex-grow bg-grid-light bg-left-top bg-green">
                 {loading || loadingPermission ? (
-                    <div className="py-20 text-black flex justify-center">
+                    <div className="h-screen py-20 text-black flex justify-center">
                         <Loader />
                     </div>
                 ) : !creatorAllowed ? (
-                    <div className="py-20">
+                    <div className="h-screen py-20">
                         <Permissioned onBack={handleDismiss} />
                     </div>
                 ) : !pinningProxyAuthenticated ? (
-                    <div className="py-20">
+                    <div className="h-screen py-20">
                         <Authenticate onCancel={handleDismiss} />
                     </div>
                 ) : template ? (
@@ -144,12 +144,12 @@ export const CreateWithTemplateId = () => {
                         key={formKey}
                         template={template || undefined}
                         fallback={
-                            <div className="py-20 text-black flex justify-center">
+                            <div className="h-screen py-20 text-black flex justify-center">
                                 <Loader />
                             </div>
                         }
                         error={
-                            <div className="py-20 flex justify-center">
+                            <div className="h-screen py-20 flex justify-center">
                                 <ErrorFeedback
                                     messages={{
                                         title: t(
diff --git a/packages/frontend/src/pages/page/index.tsx b/packages/frontend/src/pages/page/index.tsx
index 4db437566..6ce92c4d3 100644
--- a/packages/frontend/src/pages/page/index.tsx
+++ b/packages/frontend/src/pages/page/index.tsx
@@ -27,17 +27,17 @@ export const Page = () => {
 
     return (
         <Layout navbarBgColor="orange">
-            <div className="flex-grow bg-grid-light bg-left-top bg-orange">
+            <div className="h-fit flex-grow bg-grid-light bg-left-top bg-orange">
                 <KPITokenPage
                     kpiToken={watchedKPITokenWithData}
                     i18n={i18n}
                     fallback={
-                        <div className="text-black h-screen flex justify-center items-center">
+                        <div className="h-screen py-20 text-black flex justify-center items-center">
                             <Loader />
                         </div>
                     }
                     error={
-                        <div className="bg-grid-light h-screen flex justify-center items-center">
+                        <div className="h-screen py-20 bg-grid-light flex justify-center items-center">
                             <ErrorFeedback
                                 messages={{
                                     title: t("error.initializing.page.title"),
diff --git a/packages/react/src/components/template-component.tsx b/packages/react/src/components/template-component.tsx
index 2b5e41057..4dcef6a1f 100644
--- a/packages/react/src/components/template-component.tsx
+++ b/packages/react/src/components/template-component.tsx
@@ -11,7 +11,7 @@ import { ErrorBoundary } from "./error-boundary";
 import type { BaseTemplateComponentProps } from "../types/templates";
 import { useNetwork } from "wagmi";
 
-const wrapperStyles = cva(["w-full", "h-full"], {
+const wrapperStyles = cva(["w-full", "h-fit"], {
     variants: {
         dark: {
             true: ["dark"],
@@ -83,7 +83,8 @@ export function TemplateComponent({
         );
     }, [systemDarkTheme, theme]);
 
-    if (loading || !template || !Component) return <>{fallback}</>;
+    if (loading || !template || !Component)
+        return <div className="h-screen py-20">{fallback}</div>;
     return (
         <div
             className={wrapperStyles({