From ac38ab92a77ebb76ab0b8c3259aab1492c2d052c Mon Sep 17 00:00:00 2001 From: Jamie <113370520+jamiebuilds-signal@users.noreply.github.com> Date: Thu, 30 Oct 2025 11:55:58 -0700 Subject: [PATCH] Fix scrollbar styles across the app --- stylesheets/_global.scss | 42 ---------------- stylesheets/_mixins.scss | 48 ++----------------- stylesheets/_modules.scss | 28 ++--------- stylesheets/components/CallsTab.scss | 4 +- stylesheets/components/CompositionInput.scss | 17 ------- stylesheets/components/ConversationPanel.scss | 2 +- stylesheets/components/ConversationView.scss | 2 +- stylesheets/components/CountryCodeSelect.scss | 4 -- stylesheets/components/Modal.scss | 4 +- stylesheets/components/Preferences.scss | 24 +--------- stylesheets/components/ShortcutGuide.scss | 4 -- stylesheets/components/Stories.scss | 5 +- stylesheets/tailwind-config.css | 3 +- stylesheets/tailwind-plugins/scrollbar.css | 4 +- 14 files changed, 23 insertions(+), 168 deletions(-) diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 6eb557dcb5..43d484d280 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -82,48 +82,6 @@ textarea { } } -::-webkit-scrollbar { - // For vertical scrollbars - width: variables.$scrollbar_width; - // For horizontal scrollbars - height: variables.$scrollbar_height; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - border-radius: 4px; - - @include mixins.light-theme { - background: variables.$color-gray-25; - border: 2px solid variables.$color-white; - } - @include mixins.dark-theme { - background: variables.$color-gray-45; - border: 2px solid variables.$color-gray-90; - } - - &:hover { - @include mixins.light-theme { - background: variables.$color-gray-45; - } - @include mixins.dark-theme { - background: variables.$color-gray-25; - } - } -} - -::-webkit-scrollbar-corner { - @include mixins.light-theme { - background: variables.$color-white; - } - @include mixins.dark-theme { - background: variables.$color-black; - } -} - audio { max-width: 100%; } diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index daab0f5b8d..fff8c0e922 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -869,33 +869,6 @@ $rtl-icon-map: ( } } -@mixin scrollbar { - &::-webkit-scrollbar-thumb { - border-radius: 4px; - visibility: hidden; - width: 6px; - - @include light-theme { - background: variables.$color-black-alpha-40; - } - @include dark-theme { - background: variables.$color-white-alpha-40; - } - } - - &::-webkit-scrollbar { - background: transparent; - } - - &::-webkit-scrollbar-track { - background: transparent; - } - - &:hover::-webkit-scrollbar-thumb { - visibility: visible; - } -} - @mixin normal-input { @include font-body-1; padding-block: 8px; @@ -1029,18 +1002,9 @@ $rtl-icon-map: ( transform: translateY(-50%); } -@mixin NavTabs__Scroller { - padding-bottom: 8px; - @include scrollbar; - &::-webkit-scrollbar-thumb { - @include light-theme { - background: variables.$color-gray-25; - border-color: variables.$color-gray-04; - } - @include dark-theme { - background: variables.$color-gray-45; - border-color: variables.$color-gray-80; - } +@mixin scrollbar-on-hover { + &:not(:hover, :focus-within) { + scrollbar-color: transparent transparent; } } @@ -1198,16 +1162,10 @@ $rtl-icon-map: ( & { @include light-theme { background: variables.$color-gray-02; - ::-webkit-scrollbar-thumb { - border: 2px solid variables.$color-gray-02; - } } @include dark-theme { background: variables.$color-gray-75; - ::-webkit-scrollbar-thumb { - border: 2px solid variables.$color-gray-75; - } } } } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 81e45586cc..c363dcf905 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -3507,15 +3507,9 @@ button.module-image__border-overlay:focus { & { @include mixins.light-theme() { background: variables.$color-white; - ::-webkit-scrollbar-thumb { - border-color: variables.$color-white; - } } @include mixins.dark-theme { background: variables.$color-gray-75; - ::-webkit-scrollbar-thumb { - border-color: variables.$color-gray-75; - } } } @@ -3935,12 +3929,7 @@ button.module-image__border-overlay:focus { width: 100%; max-height: 100%; overflow-y: scroll; - - &::-webkit-scrollbar, - &::-webkit-scrollbar-thumb { - width: 0; - background: transparent; - } + scrollbar-width: none; } & .module-ongoing-call__group-call-remote-participant { @@ -4705,15 +4694,6 @@ button.module-image__border-overlay:focus { margin: 0; padding-block: 0; padding-inline: 0; - - &::-webkit-scrollbar { - width: 4px; - } - - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background: transparent; - } } &__contact { @@ -4876,10 +4856,11 @@ button.module-calling-participants-list__contact { .module-conversation-list { $normal-row-height: 72px; - @include mixins.NavTabs__Scroller; padding-inline-start: 10px; padding-inline-end: 1px; /* leaving room for scrollbar */ + @include mixins.scrollbar-on-hover; + // list tiles in choose-group-members and compose extend to the edge .module-left-pane--mode-choose-group-members &, .module-left-pane--mode-compose & { @@ -5959,9 +5940,10 @@ button.module-calling-participants-list__contact { .module-timeline__messages__container { flex: 1 1; overflow-x: hidden; - overflow-y: overlay; + overflow-y: auto; display: flex; flex-direction: column; + scrollbar-width: auto; // Unset this for buttons in the timeline so that it doesn't prevent the higher z-index // ConversationHeader from being draggable diff --git a/stylesheets/components/CallsTab.scss b/stylesheets/components/CallsTab.scss index fdaface7d7..0ca91d1742 100644 --- a/stylesheets/components/CallsTab.scss +++ b/stylesheets/components/CallsTab.scss @@ -209,7 +209,7 @@ } .CallsList__List { - @include mixins.NavTabs__Scroller; + @include mixins.scrollbar-on-hover; } .CallsList__List--disableScrolling { @@ -342,7 +342,7 @@ } .CallsNewCall__List { - @include mixins.NavTabs__Scroller; + @include mixins.scrollbar-on-hover; } .CallsNewCall__ListHeaderItem { diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss index 591658e450..21b14a52fd 100644 --- a/stylesheets/components/CompositionInput.scss +++ b/stylesheets/components/CompositionInput.scss @@ -24,14 +24,6 @@ inset-inline: 0; font-style: normal; } - &::-webkit-scrollbar-thumb { - @include mixins.light-theme { - border-color: variables.$color-gray-05; - } - @include mixins.dark-theme { - border-color: variables.$color-gray-75; - } - } } } @@ -93,15 +85,6 @@ max-height: calc(72px - 2 * $border-size); overflow: auto; - &::-webkit-scrollbar-thumb { - @include mixins.light-theme { - border-color: variables.$color-gray-05; - } - @include mixins.dark-theme { - border-color: variables.$color-gray-75; - } - } - &--large { $largeHeight: calc(212px - 2 * $border-size); $largeHeightContentBox: calc($largeHeight - 2 * $padding-top); diff --git a/stylesheets/components/ConversationPanel.scss b/stylesheets/components/ConversationPanel.scss index 160c59b6e7..4740f5fb5a 100644 --- a/stylesheets/components/ConversationPanel.scss +++ b/stylesheets/components/ConversationPanel.scss @@ -7,7 +7,7 @@ .ConversationPanel { height: 100%; inset-inline-start: 0; - overflow-y: overlay; + overflow-y: auto; position: absolute; top: 0; width: 100%; diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss index eab27c00fc..5f289cfdd8 100644 --- a/stylesheets/components/ConversationView.scss +++ b/stylesheets/components/ConversationView.scss @@ -16,7 +16,7 @@ 100% - #{variables.$header-height} - var(--title-bar-drag-area-height) ); inset-inline-start: 0; - overflow-y: overlay; + overflow-y: auto; position: absolute; top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height)); width: 100%; diff --git a/stylesheets/components/CountryCodeSelect.scss b/stylesheets/components/CountryCodeSelect.scss index 1cbede5599..f166231eca 100644 --- a/stylesheets/components/CountryCodeSelect.scss +++ b/stylesheets/components/CountryCodeSelect.scss @@ -70,10 +70,6 @@ max-height: 344px; overflow-y: scroll; scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } } &__CountryButton { diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss index bfa8e680cc..240f47abb7 100644 --- a/stylesheets/components/Modal.scss +++ b/stylesheets/components/Modal.scss @@ -119,10 +119,10 @@ } &__body { - @include mixins.scrollbar; + @include mixins.scrollbar-on-hover; @include mixins.font-body-1; margin: 0; - overflow-y: overlay; + overflow-y: auto; overflow-x: auto; transition: border-color 150ms ease-in-out; } diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss index 707ba0189a..caf01ac3a7 100644 --- a/stylesheets/components/Preferences.scss +++ b/stylesheets/components/Preferences.scss @@ -54,17 +54,6 @@ $secondary-text-color: light-dark( &__scroll-area { overflow-y: scroll; max-height: 100%; - - &::-webkit-scrollbar-thumb { - @include mixins.light-theme { - background: variables.$color-gray-25; - border-color: variables.$color-gray-04; - } - @include mixins.dark-theme { - background: variables.$color-gray-45; - border-color: variables.$color-gray-80; - } - } } &__padding { @@ -346,10 +335,6 @@ $secondary-text-color: light-dark( padding-top: 8px; max-width: 750px; position: relative; - - &::-webkit-scrollbar-corner { - background: transparent; - } } &__settings-pane-content--with-footer { @@ -1223,10 +1208,6 @@ $secondary-text-color: light-dark( .Preferences__EditChatFolderPage__SelectChatsDialog { height: 60vw; - - .module-conversation-list::-webkit-scrollbar-thumb { - border-color: light-dark(variables.$color-white, variables.$color-gray-80); - } } .Preferences__EditChatFolderPage__SelectChatsDialog__body { @@ -1249,8 +1230,5 @@ $secondary-text-color: light-dark( } .TimePickerPopup { - ::-webkit-scrollbar { - width: 0px; - background: transparent; - } + scrollbar-width: 0; } diff --git a/stylesheets/components/ShortcutGuide.scss b/stylesheets/components/ShortcutGuide.scss index 371b86db33..b33cb907df 100644 --- a/stylesheets/components/ShortcutGuide.scss +++ b/stylesheets/components/ShortcutGuide.scss @@ -24,10 +24,6 @@ @include mixins.dark-theme { color: variables.$color-gray-05; background-color: variables.$color-gray-75; - - ::-webkit-scrollbar-thumb { - border: 2px solid variables.$color-gray-75; - } } } diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss index 638cfcd2bf..9829639931 100644 --- a/stylesheets/components/Stories.scss +++ b/stylesheets/components/Stories.scss @@ -101,13 +101,14 @@ } &__list { - @include mixins.NavTabs__Scroller; display: flex; flex-direction: column; flex: 1; - overflow-y: overlay; + overflow-y: auto; padding-inline: 16px; + @include mixins.scrollbar-on-hover; + &--empty { @include mixins.font-body-1; align-items: center; diff --git a/stylesheets/tailwind-config.css b/stylesheets/tailwind-config.css index 9372918f2d..989b6e7b81 100644 --- a/stylesheets/tailwind-config.css +++ b/stylesheets/tailwind-config.css @@ -434,6 +434,7 @@ */ @theme { + --default-scrollbar-width: thin; --default-scrollbar-track: transparent; - --default-scrollbar-thumb: #b9b9b9; + --default-scrollbar-thumb: var(--color-label-placeholder); } diff --git a/stylesheets/tailwind-plugins/scrollbar.css b/stylesheets/tailwind-plugins/scrollbar.css index 797e310bec..239d7432b6 100644 --- a/stylesheets/tailwind-plugins/scrollbar.css +++ b/stylesheets/tailwind-plugins/scrollbar.css @@ -8,6 +8,7 @@ */ @theme { + --default-scrollbar-width: auto; --default-scrollbar-track: transparent; --default-scrollbar-thumb: currentColor; } @@ -72,7 +73,8 @@ } @layer base { - :root { + * { + scrollbar-width: var(--default-scrollbar-width); scrollbar-color: var(--default-scrollbar-thumb) var(--default-scrollbar-track); }