diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index 38799202c..d259e80d9 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -109,6 +109,15 @@ main { } @media(min-width: 768px) { + // hide scrollbars on browsers that take up layout width + .pngx-classic-scrollbars .sidebar.slim { + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + .sidebar.slim { max-width: 55px; @@ -125,6 +134,19 @@ main { .sidebar-heading span { display: none; } + + .nav-link, + .nav-anchor { + display: flex; + align-items: center; + justify-content: center; + padding-left: 0; + padding-right: 0; + + i-bs { + margin-right: 0 !important; + } + } } .sidebar.slim:not(.animating) ~ main.col-slim { diff --git a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts index 71b22bef1..306671817 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts @@ -543,6 +543,27 @@ describe('AppFrameComponent', () => { ) }) + it('should only flag scrollbars that take up layout width', () => { + const offsetWidth = jest.spyOn(HTMLElement.prototype, 'offsetWidth', 'get') + jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(100) + + offsetWidth.mockReturnValue(115) + component['detectClassicScrollbars']() + expect( + window.document.documentElement.classList.contains( + 'pngx-classic-scrollbars' + ) + ).toBeTruthy() + + offsetWidth.mockReturnValue(100) + component['detectClassicScrollbars']() + expect( + window.document.documentElement.classList.contains( + 'pngx-classic-scrollbars' + ) + ).toBeFalsy() + }) + it('should collapse attributes sections when enabling slim sidebar', () => { jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true)) settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, []) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 2548c217b..a495741f6 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -118,6 +118,7 @@ export class AppFrameComponent ngOnInit(): void { this.lastScrollY = window.scrollY + this.detectClassicScrollbars() if (this.settingsService.get(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED)) { this.checkForUpdates() @@ -343,6 +344,22 @@ export class AppFrameComponent this.lastScrollY = currentScrollY } + /** + * Flag for browsers whose scrollbars take up layout width. Remove me + * some day, I hope. + */ + private detectClassicScrollbars(): void { + const probe = document.createElement('div') + probe.style.cssText = + 'position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll' + document.body.appendChild(probe) + document.documentElement.classList.toggle( + 'pngx-classic-scrollbars', + probe.offsetWidth > probe.clientWidth + ) + probe.remove() + } + private isMobileViewport(): boolean { return window.innerWidth < 768 }