mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-17 07:16:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sidebar width calculations and improve compact mode styling; ensure accurate width properties are set and remove unnecessary transformations.

Browse Source
This commit is contained in:
mr. M
2025-03-06 20:39:34 +01:00
parent 391cb84117
commit b9eb13f033
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -69,7 +69,7 @@
} }
&:not([zen-right-side='true']) #navigator-toolbox { &:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--zen-sidebar-width) + 1px); left: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
} }
/* When we have multiple toolbars and the top-toolbar is NOT being hidden, /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
@@ -86,7 +86,7 @@
--zen-compact-float: calc(var(--zen-element-separation) + 1px); --zen-compact-float: calc(var(--zen-element-separation) + 1px);
&:not([animate='true']) { &:not([animate='true']) {
right: calc(-1 * var(--zen-sidebar-width) + 1px); right: calc(-1 * var(--actual-zen-sidebar-width) + 1px);
} }
} }
@@ -105,7 +105,13 @@
border: 1px solid var(--zen-colors-border-contrast); border: 1px solid var(--zen-colors-border-contrast);
/* times 4 because we have the inner padding and the outter padding to consider */ /* times 4 because we have the inner padding and the outter padding to consider */
:root[zen-sidebar-expanded='true'] & { :root[zen-sidebar-expanded='true'] & {
width: calc(100% + var(--zen-toolbox-padding)); &[has-animated-padding='true'] {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
&:not([has-animated-padding='true']) {
width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
}
} }
:root[zen-single-toolbar='true'] { :root[zen-single-toolbar='true'] {

5
src/browser/base/content/zen-styles/zen-sidebar-panels.css
View File

@@ -129,7 +129,6 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
opacity: 0; opacity: 0;
transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out;
pointer-events: none; pointer-events: none;
@@ -140,10 +139,6 @@
} }
} }
.zen-split-view-splitter[orient='vertical']::before {
transform: translate(-75%, -50%);
}
.zen-sidebar-web-panel-splitter[side='right'] { .zen-sidebar-web-panel-splitter[side='right'] {
left: 100%; left: 100%;
} }

13
src/browser/base/zen-components/ZenCompactMode.mjs
View File

@@ -141,10 +141,17 @@ var gZenCompactModeManager = {
this.animateCompactMode(); this.animateCompactMode();
}, },
getAndApplySidebarWidth() { // NOTE: Dont actually use event, it's just so we make sure
// the caller is from the ResizeObserver
getAndApplySidebarWidth(event = undefined) {
let sidebarWidth = this.sidebar.getBoundingClientRect().width; let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (sidebarWidth > 1) { if (sidebarWidth > 1) {
gZenUIManager.restoreScrollbarState(); gZenUIManager.restoreScrollbarState();
// Second variable to get the genuine width of the sidebar
this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
if (event && this.preference) {
return;
}
this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`); this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
} }
return sidebarWidth; return sidebarWidth;
@@ -161,8 +168,12 @@ var gZenCompactModeManager = {
!this.sidebar.hasAttribute('zen-has-empty-tab') && !this.sidebar.hasAttribute('zen-has-empty-tab') &&
!this.sidebar.hasAttribute('zen-has-hover'); !this.sidebar.hasAttribute('zen-has-hover');
// Do this so we can get the correct width ONCE compact mode styled have been applied // Do this so we can get the correct width ONCE compact mode styled have been applied
const titlebar = this.sidebar.querySelector('#titlebar');
if (canAnimate) { if (canAnimate) {
this.sidebar.setAttribute('animate', 'true'); this.sidebar.setAttribute('animate', 'true');
titlebar.setAttribute('has-animated-padding', 'true');
} else {
titlebar.removeAttribute('has-animated-padding');
} }
this.sidebar.style.removeProperty('margin-right'); this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left'); this.sidebar.style.removeProperty('margin-left');