From 9f16f9f25a1b72715617c2110dff6ff5d24d8a22 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 6 Oct 2025 11:38:33 -0600
Subject: [PATCH] Added inner shadow and capped height

---
 frontend/components/ui/button.tsx             |  2 +-
 frontend/src/app/globals.css                  | 13 ++++++++++
 .../src/components/cloud-picker/file-list.tsx | 26 +++++++++----------
 .../cloud-picker/unified-cloud-picker.tsx     | 20 +++++++-------
 4 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index c901d8ad..81a3537d 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 150d1c56..f3f04679 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -312,4 +312,17 @@
   .discord-error {
     @apply text-xs opacity-70;
   }
+
+  .box-shadow-inner::after {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: linear-gradient(to top, hsl(var(--background)), transparent);
+    display: block;
+    width: 100%;
+    height: 30px;
+  }
 }
diff --git a/frontend/src/components/cloud-picker/file-list.tsx b/frontend/src/components/cloud-picker/file-list.tsx
index db7daf64..7033fcf8 100644
--- a/frontend/src/components/cloud-picker/file-list.tsx
+++ b/frontend/src/components/cloud-picker/file-list.tsx
@@ -23,10 +23,8 @@ export const FileList = ({
     return null;
   }
 
-  console.log({ shouldDisableActions });
-
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 relative">
       <div className="flex items-center justify-between">
         <p className="text-sm font-medium">Added files ({files.length})</p>
         <Button
@@ -39,16 +37,18 @@ export const FileList = ({
           Remove all
         </Button>
       </div>
-      <div className="max-h-64 overflow-y-auto space-y-1">
-        {files.map((file) => (
-          <FileItem
-            key={file.id}
-            file={file}
-            onRemove={onRemoveFile}
-            provider={provider}
-            shouldDisableActions={shouldDisableActions}
-          />
-        ))}
+      <div className="box-shadow-inner">
+        <div className="max-h-[calc(100vh-720px)] overflow-y-auto space-y-1 pr-1 pb-4 relative">
+          {files.map((file) => (
+            <FileItem
+              key={file.id}
+              file={file}
+              onRemove={onRemoveFile}
+              provider={provider}
+              shouldDisableActions={shouldDisableActions}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/cloud-picker/unified-cloud-picker.tsx b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
index e92cef13..ff0c3903 100644
--- a/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
+++ b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
@@ -169,15 +169,17 @@ export const UnifiedCloudPicker = ({
   }
 
   return (
-    <div className="space-y-6">
-      <PickerHeader
-        provider={provider}
-        onAddFiles={handleAddFiles}
-        isPickerLoaded={isPickerLoaded}
-        isPickerOpen={isPickerOpen}
-        accessToken={accessToken}
-        isAuthenticated={isAuthenticated}
-      />
+    <div>
+      <div className="mb-6">
+        <PickerHeader
+          provider={provider}
+          onAddFiles={handleAddFiles}
+          isPickerLoaded={isPickerLoaded}
+          isPickerOpen={isPickerOpen}
+          accessToken={accessToken}
+          isAuthenticated={isAuthenticated}
+        />
+      </div>
 
       <FileList
         provider={provider}