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

Fix Beam viewer side panel teardown

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
plane-src/apps/web/styles/globals.css
+82 -46
View File
@@ -346,25 +346,20 @@
0 8px 22px rgba(0, 0, 0, 0.24);
}
.nodedc-beam-peek-shell {
.nodedc-beam-peek-viewer-layer {
--nodedc-beam-peek-width: 720px;
position: fixed;
top: 5.35rem;
left: 0.75rem;
right: 0.75rem;
right: calc(var(--nodedc-beam-peek-width) + 1.5rem);
bottom: var(--nodedc-peek-bottom-offset);
z-index: 80;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--nodedc-beam-peek-width);
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
column-gap: 0.75rem;
z-index: 81;
min-width: 0;
min-height: 0;
overflow: visible;
overscroll-behavior: contain;
transition:
column-gap 260ms ease,
grid-template-columns 260ms ease,
opacity 220ms ease;
pointer-events: auto;
transition: right 260ms ease;
}
html.nodedc-beam-viewer-interaction-lock,
@@ -377,7 +372,12 @@
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;
}
@@ -411,9 +411,9 @@
min-height: 0 !important;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr) 0;
column-gap: 0;
.nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
right: 0.75rem;
z-index: 82;
}
.nodedc-beam-peek-viewer-card {
@@ -433,30 +433,19 @@
animation: nodedcBeamPeekSlideIn 220ms ease-out;
}
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-viewer-card,
.nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-issue-card {
.nodedc-beam-peek-viewer-layer[data-resizing="true"] .nodedc-beam-peek-viewer-card {
transition: none;
}
.nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 28px;
}
.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;
.nodedc-beam-peek-viewer-layer[data-closing="true"] .nodedc-beam-peek-viewer-card {
visibility: hidden;
opacity: 0;
transform: translateX(1.5rem);
pointer-events: none;
animation: none;
transition: none;
}
.nodedc-beam-peek-viewer-layer[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
border-radius: 28px;
}
.nodedc-beam-peek-issue-card {
@@ -471,6 +460,53 @@
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:focus,
.nodedc-beam-peek-viewer-card iframe:focus-visible {
@@ -480,10 +516,15 @@
overscroll-behavior: contain;
}
.nodedc-beam-peek-shell[data-resizing="true"] iframe {
.nodedc-beam-peek-viewer-layer[data-resizing="true"] iframe {
pointer-events: none;
}
.nodedc-beam-peek-viewer-layer[data-closing="true"] iframe {
display: none;
visibility: hidden;
}
.nodedc-beam-peek-resize-shield {
position: absolute;
inset: -1rem;
@@ -505,20 +546,15 @@
}
@media (max-width: 900px) {
.nodedc-beam-peek-shell,
.nodedc-beam-peek-shell[data-fullscreen="true"] {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
.nodedc-beam-peek-viewer-layer,
.nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
right: 0.75rem;
}
.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;
}
.nodedc-beam-peek-issue-slot {
display: none;
}
}
.nodedc-glass-surface {