From c7a8021026035019f260f8ee2373e02881ae8766 Mon Sep 17 00:00:00 2001
From: dextmorgn <dexxterrmorgan@proton.me>
Date: Wed, 5 Nov 2025 16:40:24 +0100
Subject: [PATCH] feat(app): update styles for import sheet

---
 .../src/components/graphs/import-preview.tsx  | 198 +++++++++---------
 .../src/components/graphs/import-sheet.tsx    |  60 +++---
 2 files changed, 135 insertions(+), 123 deletions(-)

diff --git a/flowsint-app/src/components/graphs/import-preview.tsx b/flowsint-app/src/components/graphs/import-preview.tsx
index 025af6df..74056922 100644
--- a/flowsint-app/src/components/graphs/import-preview.tsx
+++ b/flowsint-app/src/components/graphs/import-preview.tsx
@@ -334,108 +334,108 @@ export function ImportPreview({
   }
 
   return (
-    <div className="space-y-2">
-      <div className="border rounded-lg">
-        <div className="overflow-auto" style={{ maxHeight: '500px' }}>
-          <table className="w-full" style={{ borderCollapse: 'separate', borderSpacing: 0 }}>
-            <thead className="bg-muted top-0 z-10">
-              {table.getHeaderGroups().map((headerGroup: any) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header: any, index: number) => {
-                    return (
-                      <th
-                        key={header.id}
-                        className={`px-3 py-2 text-left text-xs font-medium border-b border-r`}
-                        style={{
-                          width: `${header.getSize()}px`,
-                          minWidth: `${header.getSize()}px`,
-                          maxWidth: `${header.getSize()}px`,
-                          boxSizing: 'border-box',
-                        }}
-                      >
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </th>
-                    )
-                  })}
-                </tr>
-              ))}
-            </thead>
-            <tbody>
-              {table.getRowModel().rows.map((row: any) => (
-                <tr
-                  key={row.id}
-                  className={`border-b ${!row.original.mapping.include ? 'opacity-50' : ''}`}
+    <div className="flex flex-col h-full overflow-hidden">
+  {/* Scrollable area */}
+  <div className="flex flex-col flex-grow overflow-hidden">
+    {/* Table wrapper */}
+    <div className="flex-grow overflow-auto border rounded-lg">
+      <table
+        className="w-full"
+        style={{ borderCollapse: 'separate', borderSpacing: 0 }}
+      >
+        <thead className="bg-muted sticky top-0 z-10">
+          {table.getHeaderGroups().map((headerGroup: any) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header: any) => (
+                <th
+                  key={header.id}
+                  className="px-3 py-2 text-left text-xs font-medium border-b border-r bg-muted"
+                  style={{
+                    width: `${header.getSize()}px`,
+                    minWidth: `${header.getSize()}px`,
+                    maxWidth: `${header.getSize()}px`,
+                    boxSizing: 'border-box',
+                  }}
                 >
-                  {row.getVisibleCells().map((cell: any, index: number) => {
-                    return (
-                      <td
-                        key={cell.id}
-                        className={`px-3 py-2 border-r`}
-                        style={{
-                          width: `${cell.column.getSize()}px`,
-                          minWidth: `${cell.column.getSize()}px`,
-                          maxWidth: `${cell.column.getSize()}px`,
-                          boxSizing: 'border-box',
-                        }}
-                      >
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </td>
-                    )
-                  })}
-                </tr>
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </th>
               ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Pagination */}
-        <div className="flex items-center justify-between px-4 py-3 border-t">
-          <div className="text-sm text-muted-foreground">
-            Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{' '}
-            {Math.min(
-              (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
-              table.getFilteredRowModel().rows.length
-            )}{' '}
-            of {table.getFilteredRowModel().rows.length} entities
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row: any) => (
+            <tr
+              key={row.id}
+              className={`border-b ${!row.original.mapping.include ? 'opacity-50' : ''}`}
             >
-              <ChevronLeft className="h-4 w-4" />
-              Previous
-            </Button>
-            <span className="text-sm">
-              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-            </span>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              Next
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </div>
-      {/* Actions */}
-      <div className="flex justify-end gap-2">
-        <Button variant="outline" onClick={onCancel} disabled={isImporting}>
-          Cancel
-        </Button>
-        <Button onClick={handleImport} disabled={isImporting}>
-          {isImporting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          {isImporting ? 'Importing...' : `Import ${entityMappings.filter(m => m.include).length} Entities`}
-        </Button>
-      </div>
+              {row.getVisibleCells().map((cell: any) => (
+                <td
+                  key={cell.id}
+                  className="px-3 py-2 border-r"
+                  style={{
+                    width: `${cell.column.getSize()}px`,
+                    minWidth: `${cell.column.getSize()}px`,
+                    maxWidth: `${cell.column.getSize()}px`,
+                    boxSizing: 'border-box',
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
+  </div>
+
+  {/* Fixed footer: Pagination */}
+  <div className="flex items-center justify-between px-4 py-3 shrink-0 bg-background">
+    <div className="text-sm text-muted-foreground">
+      Showing {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1} to{' '}
+      {Math.min(
+        (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
+        table.getFilteredRowModel().rows.length
+      )}{' '}
+      of {table.getFilteredRowModel().rows.length} entities
+    </div>
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        <ChevronLeft className="h-4 w-4" />
+        Previous
+      </Button>
+      <span className="text-sm">
+        Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        Next
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  </div>
+
+  {/* Fixed footer: Actions */}
+  <div className="flex justify-end gap-2 px-4 py-3 border-t shrink-0 bg-background">
+    <Button variant="outline" onClick={onCancel} disabled={isImporting}>
+      Cancel
+    </Button>
+    <Button onClick={handleImport} disabled={isImporting}>
+      {isImporting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {isImporting ? 'Importing...' : `Import ${entityMappings.filter(m => m.include).length} Entities`}
+    </Button>
+  </div>
+</div>
+
   )
 }
diff --git a/flowsint-app/src/components/graphs/import-sheet.tsx b/flowsint-app/src/components/graphs/import-sheet.tsx
index e5d92592..adfe1c75 100644
--- a/flowsint-app/src/components/graphs/import-sheet.tsx
+++ b/flowsint-app/src/components/graphs/import-sheet.tsx
@@ -101,31 +101,43 @@ export function ImportSheet({ sketchId }: ImportSheetProps) {
     <Sheet open={open} onOpenChange={handleClose}>
       <SheetContent
         side="right"
-        className={`w-full overflow-y-auto ${analysisResult ? 'sm:max-w-[95vw]' : 'sm:max-w-2xl'
-          }`}
+        className={cn(
+          "flex flex-col h-full overflow-hidden", // full height, vertical layout
+          analysisResult ? "sm:max-w-[85vw]" : "sm:max-w-2xl"
+        )}
       >
-        <SheetHeader>
-          <SheetTitle>Import Entities</SheetTitle>
+        {/* Header stays fixed */}
+        <SheetHeader className="shrink-0 border-b bg-background px-6 py-4">
+          <SheetTitle>Import entities</SheetTitle>
           <SheetDescription>
             Upload a CSV, TXT, or XLSX file to import entities into your sketch
           </SheetDescription>
         </SheetHeader>
 
-        <div className="px-6">
+        {/* Optional beta banner */}
+        <div className="px-6 shrink-0">
           <div className="mt-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800">
-            This import feature is in beta. There may be minor side effects. If you see any issue, please <a className='text-primary underline font-semibold' target='_blank' href="https://github.com/reconurge/flowsint/issues">report them here</a> to help out the community.
+            This import feature is in beta. There may be minor side effects. If you see any issue, please{" "}
+            <a
+              className="text-primary underline font-semibold"
+              target="_blank"
+              href="https://github.com/reconurge/flowsint/issues"
+            >
+              report them here
+            </a>{" "}
+            to help out the community.
           </div>
         </div>
 
-
-        <div className="p-6">
+        {/* Main scrollable zone */}
+        <div className="flex flex-col flex-grow overflow-hidden p-6">
           {!file && !analysisResult && (
             <div
               className={cn(
-                'border-2 border-dashed rounded-lg p-12 text-center transition-colors',
+                "border-2 border-dashed rounded-lg p-12 text-center flex items-center justify-center transition-colors flex-grow overflow-auto",
                 isDragging
-                  ? 'border-primary bg-primary/5'
-                  : 'border-muted-foreground/25 hover:border-muted-foreground/50'
+                  ? "border-primary bg-primary/5"
+                  : "border-muted-foreground/25 hover:border-muted-foreground/50"
               )}
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
@@ -134,12 +146,8 @@ export function ImportSheet({ sketchId }: ImportSheetProps) {
               <div className="flex flex-col items-center gap-4">
                 <Upload className="h-12 w-12 text-muted-foreground" />
                 <div>
-                  <p className="text-lg font-medium">
-                    Drag & drop your file here
-                  </p>
-                  <p className="text-sm text-muted-foreground mt-1">
-                    or click to browse
-                  </p>
+                  <p className="text-lg font-medium">Drag & drop your file here</p>
+                  <p className="text-sm text-muted-foreground mt-1">or click to browse</p>
                 </div>
                 <input
                   type="file"
@@ -182,17 +190,21 @@ export function ImportSheet({ sketchId }: ImportSheetProps) {
             </div>
           )}
 
+          {/* Scrollable Import Preview */}
           {analysisResult && file && (
-            <ImportPreview
-              analysisResult={analysisResult}
-              file={file}
-              sketchId={sketchId}
-              onSuccess={handleClose}
-              onCancel={handleReset}
-            />
+            <div className="flex flex-col flex-grow overflow-hidden">
+              <ImportPreview
+                analysisResult={analysisResult}
+                file={file}
+                sketchId={sketchId}
+                onSuccess={handleClose}
+                onCancel={handleReset}
+              />
+            </div>
           )}
         </div>
       </SheetContent>
     </Sheet>
+
   )
 }