Fixing padding error (#9656)

* Fixing padding error * zIndex problem fix :q * Update front/components/sparkle/AppLayout.tsx Co-authored-by: Thomas Draier <[email protected]> * patch * Remove default value --------- Co-authored-by: Thomas Draier <[email protected]>
dust-tt · Dec 30, 2024 · 5eb0f09 · 5eb0f09
1 parent 786a402
commit 5eb0f09
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -36,6 +36,7 @@ export default function AppLayout({
   pageTitle,
   navChildren,
   titleChildren,
+  hasTopPadding,
   children,
 }: {
   owner: WorkspaceType;
@@ -47,6 +48,7 @@ export default function AppLayout({
   navChildren?: React.ReactNode;
   titleChildren?: React.ReactNode;
   children: React.ReactNode;
+  hasTopPadding?: boolean;
 }) {
   const [loaded, setLoaded] = useState(false);
 
@@ -124,7 +126,10 @@ export default function AppLayout({
         <div className="relative h-full w-full flex-1 flex-col overflow-x-hidden overflow-y-hidden">
           <main
             id={CONVERSATION_PARENT_SCROLL_DIV_ID.page}
-            className="flex h-full w-full flex-col items-center"
+            className={classNames(
+              "flex h-full w-full flex-col items-center overflow-y-auto",
+              hasTopPadding ?? !titleChildren ? "lg:pt-8" : ""
+            )}
           >
             <div
               className={classNames(

diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.348",
+  "version": "0.2.349",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/NavigationList.tsx b/sparkle/src/components/NavigationList.tsx
@@ -172,7 +172,7 @@ const variantStyles = cva("", {
       secondary: "s-text-muted-foreground",
     },
     isSticky: {
-      true: "s-sticky s-top-0 s-z-50 s-border-b s-border-border-dark/80 s-bg-structure-100/90 s-backdrop-blur-sm",
+      true: "s-sticky s-top-0 s-z-10 s-border-b s-border-border-dark/80 s-bg-structure-100/90 s-backdrop-blur-sm",
     },
   },
   defaultVariants: {