SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Beam viewer side panel teardown

This commit is contained in:
DCCONSTRUCTIONS 2026-06-05 18:43:16 +03:00
parent 81abcb5b36
commit e4fd2a5eff
2 changed files with 168 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
plane-src/apps/web/core/components/issues/peek-overview/view.tsx
View File

@ -38,6 +38,7 @@ import { IssuePeekOverviewLoader } from "./loader";
import { PeekOverviewProperties } from "./properties"; import { PeekOverviewProperties } from "./properties";
const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:issue-peek-width"; const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:issue-peek-width";
const BEAM_VIEWER_CLOSING_CLASS_NAME = "nodedc-beam-viewer-closing";
interface IIssueView { interface IIssueView {
workspaceSlug: string; workspaceSlug: string;
@ -94,6 +95,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false); const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null); const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null);
const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false); const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false);
const [isBeamPeekClosing, setIsBeamPeekClosing] = useState(false);
const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => { const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
if (typeof window === "undefined") return 720; if (typeof window === "undefined") return 720;
@ -106,11 +108,12 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const [isResizingPeek, setIsResizingPeek] = useState(false); const [isResizingPeek, setIsResizingPeek] = useState(false);
// ref // ref
const issuePeekOverviewRef = useRef<HTMLDivElement>(null); const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
const beamPeekViewerRef = useRef<HTMLDivElement>(null);
const editorRef = useRef<EditorRefApi>(null); const editorRef = useRef<EditorRefApi>(null);
const initialPeekWidthRef = useRef<number>(0); const initialPeekWidthRef = useRef<number>(0);
const initialMouseXRef = useRef<number>(0); const initialMouseXRef = useRef<number>(0);
const livePeekWidthRef = useRef<number>(sidePeekWidth); const livePeekWidthRef = useRef<number>(sidePeekWidth);
const resizeAnimationFrameRef = useRef<number | null>(null); const beamCloseTimeoutRef = useRef<number | null>(null);
// store hooks // store hooks
const { const {
setPeekIssue, setPeekIssue,
@ -135,19 +138,57 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const isAnyLocalModalOpen = const isAnyLocalModalOpen =
isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen; isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer; const shouldShowBeamPeekViewer = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
const clearBeamCloseTimeout = useCallback(() => {
if (typeof window === "undefined" || beamCloseTimeoutRef.current === null) return;
window.clearTimeout(beamCloseTimeoutRef.current);
beamCloseTimeoutRef.current = null;
}, []);
const closeBeamPeekViewer = useCallback(
(event?: ReactMouseEvent<HTMLButtonElement>) => {
event?.preventDefault();
event?.stopPropagation();
if (isBeamPeekClosing) return;
if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
clearBeamCloseTimeout();
document.documentElement.classList.add(BEAM_VIEWER_CLOSING_CLASS_NAME);
setIsBeamPeekClosing(true);
setIsBeamPeekFullscreen(false);
beamCloseTimeoutRef.current = window.setTimeout(() => {
beamCloseTimeoutRef.current = null;
setBeamPeekViewer(null);
setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
}, 140);
},
[clearBeamCloseTimeout, isBeamPeekClosing]
);
useEffect(
() => () => {
clearBeamCloseTimeout();
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
},
[clearBeamCloseTimeout]
);
useEffect(() => { useEffect(() => {
if (typeof window === "undefined" || !shouldUseBeamPeekShell) return; if (typeof window === "undefined" || !shouldShowBeamPeekViewer) return;
const root = document.documentElement; const root = document.documentElement;
root.classList.add("nodedc-beam-viewer-interaction-lock"); root.classList.add("nodedc-beam-viewer-interaction-lock");
const isViewerEvent = (event: Event) => { const isViewerEvent = (event: Event) => {
const shell = issuePeekOverviewRef.current; const viewerCard = beamPeekViewerRef.current?.querySelector(".nodedc-beam-peek-viewer-card");
if (!shell) return false;
const viewerCard = shell.querySelector(".nodedc-beam-peek-viewer-card");
const target = event.target instanceof Node ? event.target : null; const target = event.target instanceof Node ? event.target : null;
const path = typeof event.composedPath === "function" ? event.composedPath() : []; const path = typeof event.composedPath === "function" ? event.composedPath() : [];
@ -181,30 +222,20 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
window.removeEventListener("pointermove", stopViewerGestureLeak, passiveOptions); window.removeEventListener("pointermove", stopViewerGestureLeak, passiveOptions);
window.removeEventListener("pointerup", stopViewerGestureLeak, passiveOptions); window.removeEventListener("pointerup", stopViewerGestureLeak, passiveOptions);
}; };
}, [shouldUseBeamPeekShell]); }, [shouldShowBeamPeekViewer]);
const getMaxSidePeekWidth = useCallback(() => { const getMaxSidePeekWidth = useCallback(() => {
if (typeof window === "undefined") return 720; if (typeof window === "undefined") return 720;
const minWidth = 640; const minWidth = 640;
if (shouldUseBeamPeekShell && !isBeamPeekFullscreen) { if (shouldShowBeamPeekViewer && !isBeamPeekFullscreen) {
return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2)); return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2));
} }
return Math.max(720, window.innerWidth - 48); return Math.max(720, window.innerWidth - 48);
}, [isBeamPeekFullscreen, shouldUseBeamPeekShell]); }, [isBeamPeekFullscreen, shouldShowBeamPeekViewer]);
const stopPeekResizing = useCallback(() => { const stopPeekResizing = useCallback(() => {
if (resizeAnimationFrameRef.current !== null) {
window.cancelAnimationFrame(resizeAnimationFrameRef.current);
resizeAnimationFrameRef.current = null;
}
if (shouldUseBeamPeekShell) {
issuePeekOverviewRef.current?.style.setProperty("--nodedc-beam-peek-width", `${livePeekWidthRef.current}px`);
setSidePeekWidth(livePeekWidthRef.current);
}
setIsResizingPeek(false); setIsResizingPeek(false);
}, [shouldUseBeamPeekShell]); }, []);
const handlePeekResize = useCallback( const handlePeekResize = useCallback(
(event: MouseEvent) => { (event: MouseEvent) => {
@ -215,25 +246,10 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const deltaX = event.clientX - initialMouseXRef.current; const deltaX = event.clientX - initialMouseXRef.current;
const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth); const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
if (shouldUseBeamPeekShell) { livePeekWidthRef.current = nextWidth;
livePeekWidthRef.current = nextWidth;
if (resizeAnimationFrameRef.current === null) {
resizeAnimationFrameRef.current = window.requestAnimationFrame(() => {
issuePeekOverviewRef.current?.style.setProperty(
"--nodedc-beam-peek-width",
`${livePeekWidthRef.current}px`
);
resizeAnimationFrameRef.current = null;
});
}
return;
}
setSidePeekWidth(nextWidth); setSidePeekWidth(nextWidth);
}, },
[getMaxSidePeekWidth, isResizingPeek, shouldUseBeamPeekShell] [getMaxSidePeekWidth, isResizingPeek]
); );
const startPeekResizing = useCallback( const startPeekResizing = useCallback(
@ -276,32 +292,29 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
livePeekWidthRef.current = sidePeekWidth; livePeekWidthRef.current = sidePeekWidth;
}, [sidePeekWidth]); }, [sidePeekWidth]);
useEffect(
() => () => {
if (resizeAnimationFrameRef.current !== null) {
window.cancelAnimationFrame(resizeAnimationFrameRef.current);
}
},
[]
);
useEffect(() => { useEffect(() => {
clearBeamCloseTimeout();
setBeamPeekViewer(null); setBeamPeekViewer(null);
setIsBeamPeekFullscreen(false); setIsBeamPeekFullscreen(false);
}, [issueId]); setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
}, [clearBeamCloseTimeout, issueId]);
useEffect(() => { useEffect(() => {
const handleOpenBeamViewer = (event: Event) => { const handleOpenBeamViewer = (event: Event) => {
const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail; const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail;
if (!detail?.viewerUrl || detail.issueId !== issueId) return; if (!detail?.viewerUrl || detail.issueId !== issueId) return;
clearBeamCloseTimeout();
setPeekMode("side-peek"); setPeekMode("side-peek");
setIsBeamPeekClosing(false);
document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
setBeamPeekViewer(detail); setBeamPeekViewer(detail);
setIsBeamPeekFullscreen(false); setIsBeamPeekFullscreen(false);
}; };
window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer); window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer); return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
}, [issueId]); }, [clearBeamCloseTimeout, issueId]);
useEffect(() => { useEffect(() => {
if (!isResizingPeek) return; if (!isResizingPeek) return;
@ -342,8 +355,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const dropdownElement = document.activeElement?.tagName === "INPUT"; const dropdownElement = document.activeElement?.tagName === "INPUT";
const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen(); const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
if (beamPeekViewer) { if (beamPeekViewer) {
setBeamPeekViewer(null); closeBeamPeekViewer();
setIsBeamPeekFullscreen(false);
return; return;
} }
if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) { if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
@ -365,17 +377,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
shouldRenderPeekSurface shouldRenderPeekSurface
? "flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300" ? "flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300"
: "h-full w-full", : "h-full w-full",
!embedIssue && !shouldUseBeamPeekShell && "absolute z-[80]", !embedIssue && "absolute z-[80]",
!embedIssue && !embedIssue && {
!shouldUseBeamPeekShell && { "nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]":
"nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]": peekMode === "side-peek",
peekMode === "side-peek", "nodedc-peek-modal-bound rounded-[28px]": peekMode === "modal",
"nodedc-peek-modal-bound rounded-[28px]": peekMode === "modal", "nodedc-peek-full-bound rounded-[28px]": peekMode === "full-screen",
"nodedc-peek-full-bound rounded-[28px]": peekMode === "full-screen", },
}, !embedIssue && isBeamPeekClosing && "nodedc-beam-peek-closing !transition-none !duration-0",
!embedIssue &&
shouldUseBeamPeekShell &&
"nodedc-beam-peek-issue-card relative h-full rounded-[28px] border md:min-w-[640px]",
shouldUseInteractiveEmbeddedLayout && { shouldUseInteractiveEmbeddedLayout && {
"relative ml-auto h-full rounded-[28px]": peekMode === "side-peek", "relative ml-auto h-full rounded-[28px]": peekMode === "side-peek",
"relative mx-auto my-3 h-[calc(100%-1.5rem)] w-full max-w-[min(1080px,100%)] rounded-[28px]": "relative mx-auto my-3 h-[calc(100%-1.5rem)] w-full max-w-[min(1080px,100%)] rounded-[28px]":
@ -389,23 +398,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const portalContainer = document.getElementById("full-screen-portal") as HTMLElement; const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
const issuePanelStyle = { const issuePanelStyle = {
width: shouldUseBeamPeekShell width: shouldAllowPeekResize && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
? "100%" boxShadow: shouldRenderPeekSurface
: shouldAllowPeekResize && peekMode === "side-peek" ? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
? `${sidePeekWidth}px` : undefined,
: undefined,
boxShadow:
shouldRenderPeekSurface && !shouldUseBeamPeekShell
? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
: undefined,
}; };
const issuePanel = issueId ? ( const issuePanel = issueId ? (
<div <div ref={issuePeekOverviewRef} className={peekOverviewIssueClassName} style={issuePanelStyle}>
ref={shouldUseBeamPeekShell ? undefined : issuePeekOverviewRef}
className={peekOverviewIssueClassName}
style={issuePanelStyle}
>
{shouldAllowPeekResize && peekMode === "side-peek" && ( {shouldAllowPeekResize && peekMode === "side-peek" && (
<div <div
className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent" className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
@ -558,12 +558,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
const content = ( const content = (
<div className="w-full text-body-sm-regular"> <div className="w-full text-body-sm-regular">
{shouldUseBeamPeekShell && beamPeekViewer ? ( {shouldShowBeamPeekViewer && beamPeekViewer && (
<div <div
ref={issuePeekOverviewRef} ref={beamPeekViewerRef}
className="nodedc-beam-peek-shell" className="nodedc-beam-peek-viewer-layer"
data-prevent-outside-click
data-fullscreen={isBeamPeekFullscreen ? "true" : "false"} data-fullscreen={isBeamPeekFullscreen ? "true" : "false"}
data-resizing={isResizingPeek ? "true" : "false"} data-resizing={isResizingPeek ? "true" : "false"}
data-closing={isBeamPeekClosing ? "true" : "false"}
style={ style={
{ {
"--nodedc-beam-peek-width": `${sidePeekWidth}px`, "--nodedc-beam-peek-width": `${sidePeekWidth}px`,
@ -602,10 +604,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
<button <button
type="button" type="button"
className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60" className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
onClick={() => { onMouseDown={(event) => {
setBeamPeekViewer(null); event.preventDefault();
setIsBeamPeekFullscreen(false); event.stopPropagation();
}} }}
onClick={closeBeamPeekViewer}
title="Закрыть" title="Закрыть"
> >
<X className="size-5" /> <X className="size-5" />
@ -622,11 +625,9 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
/> />
{isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />} {isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />}
</section> </section>
<div className="nodedc-beam-peek-issue-slot">{issuePanel}</div>
</div> </div>
) : (
issuePanel
)} )}
{issuePanel}
</div> </div>
); );

128
plane-src/apps/web/styles/globals.css
View File

@ -346,25 +346,20 @@
0 8px 22px rgba(0, 0, 0, 0.24); 0 8px 22px rgba(0, 0, 0, 0.24);
} }
.nodedc-beam-peek-shell { .nodedc-beam-peek-viewer-layer {
--nodedc-beam-peek-width: 720px; --nodedc-beam-peek-width: 720px;
position: fixed; position: fixed;
top: 5.35rem; top: 5.35rem;
left: 0.75rem; left: 0.75rem;
right: 0.75rem; right: calc(var(--nodedc-beam-peek-width) + 1.5rem);
bottom: var(--nodedc-peek-bottom-offset); bottom: var(--nodedc-peek-bottom-offset);
z-index: 80; z-index: 81;
display: grid; min-width: 0;
grid-template-columns: minmax(0, 1fr) var(--nodedc-beam-peek-width); min-height: 0;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
column-gap: 0.75rem;
overflow: visible; overflow: visible;
overscroll-behavior: contain; overscroll-behavior: contain;
transition: pointer-events: auto;
column-gap 260ms ease, transition: right 260ms ease;
grid-template-columns 260ms ease,
opacity 220ms ease;
} }
html.nodedc-beam-viewer-interaction-lock, html.nodedc-beam-viewer-interaction-lock,
@ -377,7 +372,12 @@
overscroll-behavior: none; overscroll-behavior: none;
} }
.nodedc-beam-peek-shell[data-resizing="true"] { .nodedc-beam-peek-viewer-layer[data-resizing="true"] {
transition: none;
}
.nodedc-beam-peek-viewer-layer[data-closing="true"] {
pointer-events: none;
transition: none; transition: none;
} }
@ -411,9 +411,9 @@
min-height: 0 !important; min-height: 0 !important;
} }
.nodedc-beam-peek-shell[data-fullscreen="true"] { .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr) 0; right: 0.75rem;
column-gap: 0; z-index: 82;
} }
.nodedc-beam-peek-viewer-card { .nodedc-beam-peek-viewer-card {
@ -433,30 +433,19 @@
animation: nodedcBeamPeekSlideIn 220ms ease-out; animation: nodedcBeamPeekSlideIn 220ms ease-out;
} }
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-viewer-card, .nodedc-beam-peek-viewer-layer[data-resizing="true"] .nodedc-beam-peek-viewer-card {
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-issue-card {
transition: none; transition: none;
} }
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card { .nodedc-beam-peek-viewer-layer[data-closing="true"] .nodedc-beam-peek-viewer-card {
border-radius: 28px; visibility: hidden;
}
.nodedc-beam-peek-issue-slot {
min-width: 0;
min-height: 0;
height: 100%;
overflow: visible;
transition:
opacity 220ms ease,
transform 260ms ease;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-issue-slot {
overflow: hidden;
opacity: 0; opacity: 0;
transform: translateX(1.5rem); animation: none;
pointer-events: none; transition: none;
}
.nodedc-beam-peek-viewer-layer[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 28px;
} }
.nodedc-beam-peek-issue-card { .nodedc-beam-peek-issue-card {
@ -471,6 +460,53 @@
0px 1px 16px 0px rgba(16, 24, 40, 0.12); 0px 1px 16px 0px rgba(16, 24, 40, 0.12);
} }
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound,
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus,
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus-visible,
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus-within,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus-visible,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus-within {
outline: none !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow:
0px 4px 8px 0px rgba(0, 0, 0, 0.12),
0px 6px 12px 0px rgba(16, 24, 40, 0.12),
0px 1px 16px 0px rgba(16, 24, 40, 0.12) !important;
transition: none !important;
}
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *,
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *:focus,
html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *:focus-visible,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *:focus,
html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.nodedc-beam-peek-closing,
.nodedc-beam-peek-closing:focus,
.nodedc-beam-peek-closing:focus-visible,
.nodedc-beam-peek-closing:focus-within {
outline: none !important;
border-color: rgba(255, 255, 255, 0.08) !important;
box-shadow:
0px 4px 8px 0px rgba(0, 0, 0, 0.12),
0px 6px 12px 0px rgba(16, 24, 40, 0.12),
0px 1px 16px 0px rgba(16, 24, 40, 0.12) !important;
transition: none !important;
}
.nodedc-beam-peek-closing *,
.nodedc-beam-peek-closing *:focus,
.nodedc-beam-peek-closing *:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.nodedc-beam-peek-viewer-card iframe, .nodedc-beam-peek-viewer-card iframe,
.nodedc-beam-peek-viewer-card iframe:focus, .nodedc-beam-peek-viewer-card iframe:focus,
.nodedc-beam-peek-viewer-card iframe:focus-visible { .nodedc-beam-peek-viewer-card iframe:focus-visible {
@ -480,10 +516,15 @@
overscroll-behavior: contain; overscroll-behavior: contain;
} }
.nodedc-beam-peek-shell[data-resizing="true"] iframe { .nodedc-beam-peek-viewer-layer[data-resizing="true"] iframe {
pointer-events: none; pointer-events: none;
} }
.nodedc-beam-peek-viewer-layer[data-closing="true"] iframe {
display: none;
visibility: hidden;
}
.nodedc-beam-peek-resize-shield { .nodedc-beam-peek-resize-shield {
position: absolute; position: absolute;
inset: -1rem; inset: -1rem;
@ -505,20 +546,15 @@
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.nodedc-beam-peek-shell, .nodedc-beam-peek-viewer-layer,
.nodedc-beam-peek-shell[data-fullscreen="true"] { .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr); right: 0.75rem;
column-gap: 0;
} }
.nodedc-beam-peek-viewer-card, .nodedc-beam-peek-viewer-card,
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card { .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 24px; border-radius: 24px;
} }
.nodedc-beam-peek-issue-slot {
display: none;
}
} }
.nodedc-glass-surface { .nodedc-glass-surface {