From f5e80b04fae655b10d40d8f731a74df898bed58f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 7 Mar 2026 04:20:14 +0530
Subject: [PATCH] feat: add scroll position tracking and dynamic masking to
 DocumentsTableShell for improved document preview experience; update
 CreateSearchSpaceDialog styling for consistency

---
 .../(manage)/components/DocumentsTableShell.tsx      | 12 ++++++++++++
 .../layout/ui/dialogs/CreateSearchSpaceDialog.tsx    |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 5e2d9d6ca..7f6f7404f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -345,6 +345,13 @@ export function DocumentsTableShell({
 	const [viewingDoc, setViewingDoc] = useState<Document | null>(null);
 	const [viewingContent, setViewingContent] = useState<string>("");
 	const [viewingLoading, setViewingLoading] = useState(false);
+	const [previewScrollPos, setPreviewScrollPos] = useState<"top" | "middle" | "bottom">("top");
+	const handlePreviewScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atTop = el.scrollTop <= 2;
+		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
+		setPreviewScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
+	}, []);
 
 	const [deleteDoc, setDeleteDoc] = useState<Document | null>(null);
 	const [isDeleting, setIsDeleting] = useState(false);
@@ -752,6 +759,7 @@ export function DocumentsTableShell({
 					</DialogTitle>
 				</DialogHeader>
 				<div
+					onScroll={handlePreviewScroll}
 					className={[
 						"overflow-y-auto flex-1 min-h-0 px-1 md:px-6 select-text",
 						"max-md:text-xs",
@@ -762,6 +770,10 @@ export function DocumentsTableShell({
 						"max-md:[&_td]:text-[11px]! max-md:[&_td]:px-2! max-md:[&_td]:py-1.5!",
 						"max-md:[&_th]:text-[11px]! max-md:[&_th]:px-2! max-md:[&_th]:py-1.5!",
 					].join(" ")}
+					style={{
+						maskImage: `linear-gradient(to bottom, ${previewScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${previewScrollPos === "bottom" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to bottom, ${previewScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${previewScrollPos === "bottom" ? "black" : "transparent"})`,
+					}}
 				>
 					{viewingLoading ? (
 						<div className="flex items-center justify-center py-12">
diff --git a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
index 264db503a..98add9c5a 100644
--- a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
+++ b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
@@ -138,20 +138,20 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 							)}
 						/>
 
-						<DialogFooter className="flex-row gap-2 pt-2 sm:pt-3">
+						<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
 							<Button
 								type="button"
 								variant="secondary"
 								onClick={() => handleOpenChange(false)}
 								disabled={isSubmitting}
-								className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm"
+								className="h-8 sm:h-9 text-xs sm:text-sm"
 							>
 								{tCommon("cancel")}
 							</Button>
 							<Button
 								type="submit"
 								disabled={isSubmitting}
-								className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm"
+								className="h-8 sm:h-9 text-xs sm:text-sm"
 							>
 								{isSubmitting ? (
 									<>