MrSphay/odysseus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix docked-modal close: chat stays offset / reopen overlaps / no animation (#1158)

Browse Source 
Docking a modal to a window edge pushes the chat aside (body padding via
right-dock-active + --right-dock-w). Three problems on close/reopen:

1. Chat stayed offset after closing a docked modal. The close-watcher only
   reacted to the `.hidden` class or DOM removal, but the draggable modals
   (calendar, plan, workspace, document, …) close via inline `display:none`.
   Watch the `style` attribute too and treat `display:none` as closed.

2. Reopening a previously-docked singleton modal floated it off to the side,
   overlapping the chat. The reused element kept its docked inline geometry.
   Clear the content's inline position/size on close so it reopens at its CSS
   default (centered).

3. Undock wasn't animated. The transition lived on `.right/left-dock-active`,
   so removing the class dropped the transition with it and padding snapped to
   0. Move the transition to the base `body` so the push animates both ways.

Files: static/js/modalSnap.js, static/style.css.
Checks: node --check static/js/modalSnap.js; verified in-browser (dock → close
→ chat animates back; reopen → centered, no overlap).
This commit is contained in:
Kenny Van de Maele
2026-06-02 15:38:20 +02:00
committed by GitHub
parent 096468a29f
commit 68efa8ee53
2 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/js/modalSnap.js
View File

@@ -426,11 +426,16 @@ function _applyDockInternal(modal, side, dockClass) {
// its padding-right.
if (!modal._dockCloseWatcher && typeof MutationObserver !== 'undefined') {
const onGone = () => _onDockedModalGone(modal, dockClass);
// Watch the modal itself for hidden-class flips and parent removal.
const obs = new MutationObserver(() => {
if (!modal.isConnected || modal.classList.contains('hidden')) onGone();
});
obs.observe(modal, { attributes: true, attributeFilter: ['class'] });
// Watch the modal for: the `.hidden` class flip, an inline
// `display:none` (how the draggable modals — calendar, plan, workspace,
// etc. — actually close), and parent removal. Without the `style` filter
// a display:none close left the body's dock padding on, so the chat
// stayed shifted after the docked modal was closed.
const _isGone = () => !modal.isConnected
|| modal.classList.contains('hidden')
|| modal.style.display === 'none';
const obs = new MutationObserver(() => { if (_isGone()) onGone(); });
obs.observe(modal, { attributes: true, attributeFilter: ['class', 'style'] });
// A second observer catches DOM removal — childList on the parent
// is the reliable signal for `.remove()` / `.removeChild()` calls.
if (modal.parentNode) {
@@ -475,6 +480,25 @@ function _onDockedModalGone(modal, dockClass) {
}
modal.classList.remove('modal-right-docked');
modal.classList.remove('modal-left-docked');
// Clear the content's docked inline geometry. Singleton modals (plan,
// workspace, calendar, …) reuse the same element across open/close, so if we
// only drop the body push the element stays positioned (position:fixed;
// right:0; fixed width) on the next open — floating over the chat with no
// push. We deliberately do NOT restore the pre-dock snapshot here: that
// snapshot is the drag position from when the user pulled the window to the
// edge (near the side), so restoring it would reopen the modal off to the
// side, still overlapping. Clearing the inline styles lets the modal reopen
// at its CSS default (centered). Drag-to-undock still uses clearRightDock,
// which DOES restore the snapshot for the peel-off feel.
if (_c) {
for (const prop of ['position', 'inset', 'left', 'top', 'right', 'bottom',
'width', 'maxWidth', 'height', 'maxHeight',
'borderRadius', 'transform', 'margin']) {
_c.style[prop] = '';
}
delete _c._preDockSnapshot;
delete _c._dockSide;
}
}
function _expandSidebarFromRail() {

7
static/style.css
View File

@@ -87,6 +87,11 @@ html, body { overflow-x: hidden; height: 100%; margin: 0; overscroll-behavior: n
body {
background-color: var(--bg);
color: var(--fg);
/* Animate the dock push BOTH ways. Keeping the transition on the base body
(not on .right/left-dock-active) means removing the class on undock also
animates padding back to 0 — otherwise the chat snapped back instantly. */
transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: var(--font-family, 'Fira Code', monospace);
display: flex;
height: 100%;
@@ -14546,11 +14551,9 @@ body [data-act="from-sender"] {
fit instead of being hidden behind the panel. */
body.right-dock-active {
padding-right: var(--right-dock-w, 0px);
transition: padding-right 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.left-dock-active {
padding-left: var(--left-dock-w, 0px);
transition: padding-left 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.modal.modal-right-docked {
align-items: stretch;