diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 3e0189127..6f57af753 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -161,7 +161,7 @@ outline: 1px solid rgba(255, 255, 255, .15); outline-offset: -1px; background-attachment: fixed !important; - background-size: 2000px !important; + background-size: 100vw !important; } &, @@ -362,7 +362,7 @@ @media -moz-pref('zen.view.compact.color-toolbar') { background-attachment: fixed; background: var(--zen-main-browser-background-toolbar); - background-size: 100% 2000px; + background-size: 100% 100vh; } } } diff --git a/src/zen/folders/ZenFolders.mjs b/src/zen/folders/ZenFolders.mjs index 1aa6f415c..fd2e7f7ff 100644 --- a/src/zen/folders/ZenFolders.mjs +++ b/src/zen/folders/ZenFolders.mjs @@ -1603,6 +1603,7 @@ const tabsContainer = currentGroup.querySelector('.tab-group-container'); const groupStart = currentGroup.querySelector('.zen-tab-group-start'); + tabsContainer.style.overflow = 'clip'; if (tabsContainer.hasAttribute('hidden')) tabsContainer.removeAttribute('hidden'); @@ -1635,10 +1636,13 @@ } } + const itemsToShow = []; if (selectedTabs.length) { for (let i = 0; i < groupItems.length; i++) { const { item, splitViewId } = groupItems[i]; + itemsToShow.push(item); + // Skip selected items if (selectedTabs.includes(item)) continue; @@ -1652,18 +1656,18 @@ } // FIXME: This is a hack to fix the animations not working properly + this.styleCleanup(itemsToShow); itemsToHide.forEach((item) => { item.style.opacity = 0; item.style.height = 0; }); - this.styleCleanup(selectedTabs); animations.push( ...this.#createAnimation( - itemsToHide, + itemsToShow, { - opacity: 0, - height: 0, + opacity: '', + height: '', }, { duration: 0.12, @@ -1671,10 +1675,10 @@ } ), ...this.#createAnimation( - selectedTabs, + itemsToHide, { - opacity: '', - height: '', + opacity: 0, + height: 0, }, { duration: 0.12,