Added inner shadow and capped height

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: {

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;
+  }
 }

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">
+      <div className="box-shadow-inner">
-        {files.map((file) => (
+        <div className="max-h-[calc(100vh-720px)] overflow-y-auto space-y-1 pr-1 pb-4 relative">
-          <FileItem
+          {files.map((file) => (
-            key={file.id}
+            <FileItem
-            file={file}
+              key={file.id}
-            onRemove={onRemoveFile}
+              file={file}
-            provider={provider}
+              onRemove={onRemoveFile}
-            shouldDisableActions={shouldDisableActions}
+              provider={provider}
-          />
+              shouldDisableActions={shouldDisableActions}
-        ))}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

frontend/src/components/cloud-picker/unified-cloud-picker.tsx

@@ -169,15 +169,17 @@ export const UnifiedCloudPicker = ({
   }
 
   return (
-    <div className="space-y-6">
+    <div>
-      <PickerHeader
+      <div className="mb-6">
-        provider={provider}
+        <PickerHeader
-        onAddFiles={handleAddFiles}
+          provider={provider}
-        isPickerLoaded={isPickerLoaded}
+          onAddFiles={handleAddFiles}
-        isPickerOpen={isPickerOpen}
+          isPickerLoaded={isPickerLoaded}
-        accessToken={accessToken}
+          isPickerOpen={isPickerOpen}
-        isAuthenticated={isAuthenticated}
+          accessToken={accessToken}
-      />
+          isAuthenticated={isAuthenticated}
+        />
+      </div>
 
       <FileList
         provider={provider}