fix: BROS-109: Import Dropzone content area moved beyond fold if JSON preview is too large

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>
                 ) : (

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;
@@ -186,7 +235,8 @@
 .dropzone {
   padding: 0 32px 32px;
   margin: 0;
-  min-height: 100%;
+  min-height: 600px;
+  height: 100%;
   position: relative;
   display: flex;
 

web/libs/ui/src/lib/code-block/code-block.tsx

@@ -1,12 +1,15 @@
 export function CodeBlock({
   code,
+  className,
 }: {
   title?: string;
   description?: string;
   code: string;
   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>
   );
 }

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>