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
carrot-kpi · Oct 23, 2023 · 3f8af7b · 3f8af7b
1 parent e838ea3
commit 3f8af7b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/.changeset/lazy-mangos-promise.md 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
@@ -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
@@ -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,30 +126,30 @@ 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 ? (
                     <KPITokenCreationForm
                         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
@@ -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
@@ -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({