From 62c1f95b025e56d564471512a92eb505136a22e4 Mon Sep 17 00:00:00 2001
From: Ricardo Cabral <ricardo.cabralm@gmail.com>
Date: Mon, 16 Jun 2025 14:09:06 -0400
Subject: [PATCH 1/6] fix: BROS-109: Import dropzone content area moved beyond
 fold if JSON preview is too large


From 1088797399cac1aa6746cdcca259c59bc23f1033 Mon Sep 17 00:00:00 2001
From: Ricardo Cabral <ricardo.cabralm@gmail.com>
Date: Fri, 20 Jun 2025 15:22:27 -0400
Subject: [PATCH 2/6] Adds support to inject classes for the simple card header
 and content, as well as to set the header and content elements flush with the
 card's border.

---
 web/libs/ui/src/lib/simple-card/index.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/libs/ui/src/lib/simple-card/index.tsx b/web/libs/ui/src/lib/simple-card/index.tsx
index f7df2c3e211a..92099096776f 100644
--- a/web/libs/ui/src/lib/simple-card/index.tsx
+++ b/web/libs/ui/src/lib/simple-card/index.tsx
@@ -6,21 +6,34 @@ export function SimpleCard({
   children,
   title,
   description,
+  flushContent = false,
+  flushHeader = false,
+  headerClassName,
+  contentClassName,
   className: cls,
   ...rest
 }: PropsWithChildren<
   {
     title: ReactNode;
     description?: ReactNode;
+    flushContent?: boolean;
+    flushHeader?: boolean;
+    headerClassName?: string;
+    contentClassName?: string;
   } & Omit<HtmlHTMLAttributes<HTMLDivElement>, "title">
 >) {
   const className = cn("bg-transparent", cls);
   const hasHeaderContent = Boolean(title || description);
-  const contentClass = cn("p-4", { "pt-0": hasHeaderContent });
+  const headerClass = cn(flushHeader ? "p-0" : "p-4 pb-2", headerClassName);
+  const contentClass = cn(
+    flushContent ? "p-0" : "p-4",
+    { "pt-0": hasHeaderContent && !flushContent },
+    contentClassName,
+  );
   return (
     <Card className={className} {...rest}>
       {hasHeaderContent && (
-        <CardHeader className="p-4 pb-2">
+        <CardHeader className={headerClass}>
           {title && <CardTitle className="flex justify-between font-medium">{title}</CardTitle>}
           {description && <CardDescription>{description}</CardDescription>}
         </CardHeader>

From d48a2c7260101a74397a4badc929f4bd5f2c6e45 Mon Sep 17 00:00:00 2001
From: Ricardo Cabral <ricardo.cabralm@gmail.com>
Date: Fri, 20 Jun 2025 15:23:04 -0400
Subject: [PATCH 3/6] Adds support to pass class names to code block component.

---
 web/libs/ui/src/lib/code-block/code-block.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/libs/ui/src/lib/code-block/code-block.tsx b/web/libs/ui/src/lib/code-block/code-block.tsx
index abe75b36b75b..a0a92e3aba3c 100644
--- a/web/libs/ui/src/lib/code-block/code-block.tsx
+++ b/web/libs/ui/src/lib/code-block/code-block.tsx
@@ -1,5 +1,6 @@
 export function CodeBlock({
   code,
+  className,
 }: {
   title?: string;
   description?: string;
@@ -7,6 +8,8 @@ export function CodeBlock({
   className?: string;
 }) {
   return (
-    <div className="whitespace-pre-wrap font-mono mt-2 p-3 bg-neutral-surface rounded-sm max-h-fit">{code.trim()}</div>
+    <div className={`whitespace-pre-wrap font-mono mt-2 p-3 bg-neutral-surface rounded-md ${className || ""}`}>
+      {code.trim()}
+    </div>
   );
 }

From 518bc6dc350ed2ba2c429080e81ac9f996db8b96 Mon Sep 17 00:00:00 2001
From: Ricardo Cabral <ricardo.cabralm@gmail.com>
Date: Fri, 20 Jun 2025 15:24:25 -0400
Subject: [PATCH 4/6] Prevents large JSON samples from pushing the Import
 dropzone beyond the fold. Improves style of code block.

---
 .../src/pages/CreateProject/Import/Import.jsx | 23 ++++---
 .../pages/CreateProject/Import/Import.scss    | 63 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx
index 3dc9c7450f57..97737eb9be70 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx
+++ b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.jsx
@@ -493,19 +493,28 @@ export const ImportPage = ({
             {ff.isFF(ff.FF_JSON_PREVIEW) && (
               <div className="w-full h-full flex flex-col min-h-[400px]">
                 {projectConfigured ? (
-                  <SimpleCard title="Expected input preview" className="w-full h-full">
+                  <SimpleCard
+                    title="Expected Input Preview"
+                    className="w-full h-full overflow-hidden flex flex-col"
+                    contentClassName="h-[calc(100%-48px)]"
+                    flushContent
+                  >
                     {sampleConfig.data ? (
-                      <CodeBlock
-                        title="Expected input preview"
-                        code={sampleConfig?.data ?? ""}
-                        className="w-full h-full"
-                      />
+                      <div className={importClass.elem("code-wrapper")}>
+                        <CodeBlock
+                          title="Expected Input Preview"
+                          code={sampleConfig?.data ?? ""}
+                          className="w-full h-full"
+                        />
+                      </div>
                     ) : sampleConfig.isLoading ? (
                       <div className="w-full flex justify-center py-12">
                         <Spinner className="h-6 w-6" />
                       </div>
                     ) : sampleConfig.isError ? (
-                      <div className="w-full pt-4 text-lg text-negative-content">Unable to load sample data</div>
+                      <div className="w-[calc(100%-24px)] text-lg text-negative-content bg-negative-background border m-3 rounded-md border-negative-border-subtle p-4">
+                        Something went wrong, the sample data could not be loaded.
+                      </div>
                     ) : null}
                   </SimpleCard>
                 ) : (
diff --git a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
index fff29f709ac0..85ace66c6365 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
+++ b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
@@ -1,3 +1,34 @@
+// Custom scrollbar styling mixin
+@mixin custom-scrollbar {
+  scrollbar-color: var(--color-neutral-border-bold) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-neutral-surface);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-neutral-surface);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-border-bold);
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: var(--color-neutral-border-boldest);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: var(--color-neutral-surface);
+  }
+}
+
 .upload_page {
   flex: 1;
   min-height: 0;
@@ -75,6 +106,8 @@
   }
 
   & > main {
+    @include custom-scrollbar;
+    
     flex: 1;
     overflow-y: auto;
     background: linear-gradient(var(--color-neutral-background) 30%, rgb(255 255 255 / 0%)), linear-gradient(rgb(0 0 0 / 10%), var(--color-neutral-background) 100%);
@@ -123,6 +156,22 @@
     background:  rgb(255 255 255 / 50%);
   }
 
+  &__code-wrapper {
+    padding: 0 var(--spacing-base) var(--spacing-base);
+    height: calc(100% - var(--spacing-tight));
+
+    & > div {
+      @include custom-scrollbar;
+
+      height: 100%;
+      overflow-y: auto;
+      font-size: var(--font-size-14);
+      color: var(--color-neutral-content-subtle);
+      box-shadow: inset 0 2px 8px rgba(var(--color-neutral-shadow-raw) / 12%);
+      border: 1px solid var(--color-neutral-border);
+    }
+  }
+
   &__upload-button {
     display: flex;
     align-items: center;
@@ -180,13 +229,25 @@
     border-radius: 5px;
     pointer-events: none;
   }
+
+  // Constrain the height of the JSON preview CodeBlock to prevent dropzone from being pushed below the fold
+  .simple-card:has([title="Expected input preview"]) {
+    max-height: 400px;
+    
+    .code-block,
+    [class*="code-block"] {
+      max-height: 350px;
+      overflow-y: auto;
+    }
+  }
 }
 
 /* Import files via dropzone */
 .dropzone {
   padding: 0 32px 32px;
   margin: 0;
-  min-height: 100%;
+  min-height: 600px;
+  height: 100%;
   position: relative;
   display: flex;
 

From b3d682b9941d4ded29900c57f72ab24619895fd6 Mon Sep 17 00:00:00 2001
From: Ricardo Cabral <ricardo.cabralm@gmail.com>
Date: Fri, 20 Jun 2025 16:07:20 -0400
Subject: [PATCH 5/6] Removes unnecessary code.

---
 .../src/pages/CreateProject/Import/Import.scss      | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
index 85ace66c6365..7c91b43498fb 100644
--- a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
+++ b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss
@@ -107,7 +107,7 @@
 
   & > main {
     @include custom-scrollbar;
-    
+
     flex: 1;
     overflow-y: auto;
     background: linear-gradient(var(--color-neutral-background) 30%, rgb(255 255 255 / 0%)), linear-gradient(rgb(0 0 0 / 10%), var(--color-neutral-background) 100%);
@@ -229,17 +229,6 @@
     border-radius: 5px;
     pointer-events: none;
   }
-
-  // Constrain the height of the JSON preview CodeBlock to prevent dropzone from being pushed below the fold
-  .simple-card:has([title="Expected input preview"]) {
-    max-height: 400px;
-    
-    .code-block,
-    [class*="code-block"] {
-      max-height: 350px;
-      overflow-y: auto;
-    }
-  }
 }
 
 /* Import files via dropzone */

From 7c2e68b464e308809cbb827c7dc2d6c0777ab1f4 Mon Sep 17 00:00:00 2001
From: ricardoantoniocm <ricardoantoniocm@users.noreply.github.com>
Date: Fri, 20 Jun 2025 20:13:04 +0000
Subject: [PATCH 6/6] Sync Follow Merge dependencies

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/15786970999