apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-25 19:15:18 +02:00
Code Issues Projects Releases Packages Wiki Activity

Improve full-screen mode with modal popup and backdrop

Browse source
This commit is contained in:
CREDO23 2026-02-13 15:26:19 +02:00
parent 254ed5ed11
commit eca5332d81
1 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

28
surfsense_web/components/tool-ui/update-notion-page.tsx
View file

@ -117,21 +117,28 @@ function ApprovalCard({
const account = interruptData.context?.account;
const currentTitle = interruptData.context?.current_title;
// Title is not editable, so it's always valid
const isTitleValid = true;
const reviewConfig = interruptData.review_configs[0];
const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
const canEdit = allowedDecisions.includes("edit");
return (
<div
className={`my-4 ${isFullScreen ? "fixed inset-0 z-50 m-0 flex flex-col bg-background" : "max-w-full"} overflow-hidden rounded-xl transition-all duration-300 ${
decided
? "border border-border bg-card shadow-sm"
: "border-2 border-foreground/20 bg-muted/30 dark:bg-muted/10 shadow-lg animate-pulse-subtle"
}`}
>
<>
{/* Backdrop for full-screen mode */}
{isFullScreen && (
<div className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" onClick={() => setIsFullScreen(false)} />
)}
<div
className={`${
isFullScreen
? "fixed left-1/2 top-1/2 z-50 h-[90vh] flex max-h-300 w-[90vw] max-w-350 -translate-x-1/2 -translate-y-1/2 flex-col"
: "my-4 max-w-full"
} overflow-hidden rounded-xl bg-background shadow-xl transition-all duration-300 ${
decided
? "border border-border bg-card shadow-sm"
: "border-2 border-foreground/20 bg-muted/30 dark:bg-muted/10 shadow-lg animate-pulse-subtle"
}`}
>
<div
className={`flex items-center gap-3 border-b ${
decided ? "border-border bg-card" : "border-foreground/15 bg-muted/40 dark:bg-muted/20"
@ -343,6 +350,7 @@ function ApprovalCard({
)}
</div>
</div>
</>
);
}