Fix scrollbars for all macOS settings

Author: jamiebuilds-signal

stylesheets/_modules.scss

@@ -4856,8 +4856,9 @@ button.module-calling-participants-list__contact {
 .module-conversation-list {
   $normal-row-height: 72px;
 
-  padding-inline-start: 10px;
-  padding-inline-end: 1px; /* leaving room for scrollbar */
+  scrollbar-gutter: stable;
+  padding-inline-start: 11px;
+  padding-inline-end: calc(11px - var(--axo-scrollbar-gutter-thin-vertical));
 
   @include mixins.scrollbar-on-hover;
 
@@ -4867,13 +4868,6 @@ button.module-calling-participants-list__contact {
     padding-inline: 0;
   }
 
-  // Center chat list icons in narrow mode by reserving scrollbar space, preventing
-  // scrollbar from pushing content
-  &--width-narrow {
-    padding-inline: 10px 1px;
-    scrollbar-gutter: stable;
-  }
-
   &--has-dialog-padding {
     padding-block-start: 8px;
   }

stylesheets/components/CallsTab.scss

@@ -209,6 +209,9 @@
 }
 
 .CallsList__List {
+  scrollbar-gutter: stable;
+  padding-inline-start: 11px;
+  padding-inline-end: calc(11px - var(--axo-scrollbar-gutter-thin-vertical));
   @include mixins.scrollbar-on-hover;
 }
 
@@ -310,6 +313,8 @@
 // Override .ListTile
 .ListTile.CallsList__ItemTile {
   padding-block: 10px;
+  border: none;
+  border-radius: 12px;
 
   // Override .ListTile__subtitle with correct font size
   .ListTile__subtitle {

stylesheets/components/Preferences.scss

@@ -54,6 +54,12 @@ $secondary-text-color: light-dark(
   &__scroll-area {
     overflow-y: scroll;
     max-height: 100%;
+
+    scrollbar-gutter: stable;
+    padding-inline-start: 11px;
+    padding-inline-end: calc(11px - var(--axo-scrollbar-gutter-thin-vertical));
+
+    @include mixins.scrollbar-on-hover;
   }
 
   &__padding {
@@ -71,10 +77,6 @@ $secondary-text-color: light-dark(
     flex-direction: row;
     align-items: center;
 
-    width: calc(100% - 11px);
-    margin-inline-start: 10px;
-    margin-inline-end: 1px;
-
     margin-bottom: 4px;
     border-radius: 8px;
 
@@ -212,12 +214,10 @@ $secondary-text-color: light-dark(
       @include mixins.font-body-1;
       align-items: center;
       display: flex;
+      width: 100%;
       height: 40px;
-      width: calc(100% - 11px);
       padding-block: 14px;
       padding-inline: 0;
-      margin-inline-start: 10px;
-      margin-inline-end: 1px;
       border-radius: 10px;
       margin-bottom: 4px;
     }

stylesheets/components/Stories.scss

@@ -105,8 +105,11 @@
       flex-direction: column;
       flex: 1;
       overflow-y: auto;
-      padding-inline: 16px;
-
+      scrollbar-gutter: stable;
+      padding-inline-start: 11px;
+      padding-inline-end: calc(
+        11px - var(--axo-scrollbar-gutter-thin-vertical)
+      );
       @include mixins.scrollbar-on-hover;
 
       &--empty {

ts/axo/AxoDialog.dom.stories.tsx

@@ -1,14 +1,13 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React, { useId, useMemo, useState } from 'react';
 import type { Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { AxoDialog } from './AxoDialog.dom.js';
 import { AxoButton } from './AxoButton.dom.js';
 import { tw } from './tw.dom.js';
 import { AxoCheckbox } from './AxoCheckbox.dom.js';
-import { getScrollbarGutters } from './_internal/scrollbars.dom.js';
 
 export default {
   title: 'Axo/AxoDialog',
@@ -306,21 +305,14 @@ function ExampleItem(props: { label: string; description: string }) {
   const labelId = useId();
   const descriptionId = useId();
 
-  const style = useMemo((): CSSProperties => {
-    return {
-      paddingInline: 24 - getScrollbarGutters('thin', 'custom').vertical,
-    };
-  }, []);
-
   return (
     <div
       role="option"
       aria-selected={false}
       aria-labelledby={labelId}
       aria-describedby={descriptionId}
       tabIndex={0}
-      className={tw('rounded-lg py-2.5 hover:bg-fill-secondary')}
-      style={style}
+      className={tw('rounded-lg px-[13px] py-2.5 hover:bg-fill-secondary')}
     >
       <div
         id={labelId}
@@ -365,7 +357,13 @@ export function ExampleLanguageDialog(): JSX.Element {
           />
         </AxoDialog.ExperimentalSearch>
         <AxoDialog.Body padding="only-scrollbar-gutter">
-          <div role="listbox">
+          <div
+            role="listbox"
+            style={{
+              paddingInline:
+                'calc(11px - var(--axo-scrollbar-gutter-thin-vertical)',
+            }}
+          >
             <ExampleItem label="System Language" description="English" />
             <ExampleItem label="Afrikaans" description="Afrikaans" />
             <ExampleItem label="Arabic" description="العربية" />

ts/axo/AxoDialog.dom.tsx

@@ -14,37 +14,13 @@ import { AxoBaseDialog } from './_internal/AxoBaseDialog.dom.js';
 import { AxoSymbol } from './AxoSymbol.dom.js';
 import { tw } from './tw.dom.js';
 import { AxoScrollArea } from './AxoScrollArea.dom.js';
-import { getScrollbarGutters } from './_internal/scrollbars.dom.js';
 import { AxoButton } from './AxoButton.dom.js';
 import { AxoIconButton } from './AxoIconButton.dom.js';
 
 const Namespace = 'AxoDialog';
 
 const { useContentEscapeBehavior } = AxoBaseDialog;
 
-// We want to have 24px of padding on either side of header/body/footer, but
-// it's import that we remain aligned with the vertical scrollbar gutters that
-// we need to measure in the browser to know the value of.
-//
-// Chrome currently renders vertical scrollbars as 11px with
-// `scrollbar-width: thin` but that could change someday or based on some OS
-// settings. So we'll target 24px but we'll tolerate different values.
-function getPadding(target: number, scrollbars: boolean): number {
-  const scrollbarWidthExpected = 11;
-  const paddingBeforeScrollbarWidth = target - scrollbarWidthExpected;
-
-  if (scrollbars) {
-    // If this element has scrollbars we should just rely on the rendered gutter
-    return paddingBeforeScrollbarWidth;
-  }
-
-  const scrollbarWidthActual = getScrollbarGutters('thin', 'custom').vertical;
-
-  // If this element doesn't have scrollbars, we need to add the exact value of
-  // the actual scrollbar gutter
-  return scrollbarWidthActual + paddingBeforeScrollbarWidth;
-}
-
 export namespace AxoDialog {
   /**
    * Component: <AxoDialog.Root>
@@ -140,18 +116,12 @@ export namespace AxoDialog {
   }>;
 
   export const Header: FC<HeaderProps> = memo(props => {
-    const style = useMemo(() => {
-      return {
-        paddingInline: getPadding(10, false),
-      };
-    }, []);
     return (
       <div
         className={tw(
-          'grid items-center py-2.5',
+          'grid items-center p-2.5',
           'grid-cols-[[back-slot]_1fr_[title-slot]_auto_[close-slot]_1fr]'
         )}
-        style={style}
       >
         {props.children}
       </div>
@@ -204,20 +174,14 @@ export namespace AxoDialog {
   }>;
 
   export const Title: FC<TitleProps> = memo(props => {
-    const style = useMemo(() => {
-      return {
-        paddingInline: 24 - getPadding(10, false),
-      };
-    }, []);
     return (
       <Dialog.Title
         className={tw(
-          'col-[title-slot] py-0.5',
+          'col-[title-slot] px-3.5 py-0.5',
           'truncate text-center',
           'type-body-medium font-semibold text-label-primary',
           props.screenReaderOnly && 'sr-only'
         )}
-        style={style}
       >
         {props.children}
       </Dialog.Title>
@@ -281,14 +245,7 @@ export namespace AxoDialog {
   }>;
 
   export const ExperimentalSearch: FC<ExperimentalSearchProps> = memo(props => {
-    const style = useMemo(() => {
-      return { paddingInline: getPadding(16, false) };
-    }, []);
-    return (
-      <div style={style} className={tw('pb-2')}>
-        {props.children}
-      </div>
-    );
+    return <div className={tw('px-4 pb-2')}>{props.children}</div>;
   });
 
   ExperimentalSearch.displayName = `${Namespace}.ExperimentalSearch`;
@@ -308,9 +265,13 @@ export namespace AxoDialog {
   export const Body: FC<BodyProps> = memo(props => {
     const { padding = 'normal' } = props;
 
-    const style = useMemo((): CSSProperties => {
+    const style = useMemo((): CSSProperties | undefined => {
+      if (padding === 'only-scrollbar-gutter') {
+        return;
+      }
+
       return {
-        paddingInline: padding === 'normal' ? getPadding(24, true) : undefined,
+        paddingInline: 'calc(24px - var(--axo-scrollbar-gutter-thin-vertical))',
       };
     }, [padding]);
 
@@ -358,17 +319,8 @@ export namespace AxoDialog {
   }>;
 
   export const Footer: FC<FooterProps> = memo(props => {
-    const style = useMemo((): CSSProperties => {
-      return {
-        paddingInline: getPadding(12, false),
-      };
-    }, []);
-
     return (
-      <div
-        className={tw('flex flex-wrap items-center gap-3 py-2.5')}
-        style={style}
-      >
+      <div className={tw('flex flex-wrap items-center gap-3 px-3 py-2.5')}>
         {props.children}
       </div>
     );
@@ -386,12 +338,10 @@ export namespace AxoDialog {
   }>;
 
   export const FooterContent: FC<FooterContentProps> = memo(props => {
-    const style = useMemo(() => {
-      return { paddingInlineStart: 24 - getPadding(12, false) };
-    }, []);
     return (
       <div
         className={tw(
+          'px-3',
           // Allow the flex layout to place it in the same row as the actions
           // if it can be wrapped to fit within the available space:
           'basis-[min-content]',
@@ -402,7 +352,6 @@ export namespace AxoDialog {
           'flex-grow',
           'type-body-large text-label-primary'
         )}
-        style={style}
       >
         {props.children}
       </div>

ts/axo/AxoProvider.dom.tsx

@@ -1,15 +1,31 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import type { FC, ReactNode } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useInsertionEffect } from 'react';
 import { Direction } from 'radix-ui';
+import { createScrollbarGutterCssProperties } from './_internal/scrollbars.dom.js';
 
 type AxoProviderProps = Readonly<{
   dir: 'ltr' | 'rtl';
   children: ReactNode;
 }>;
 
+let runOnceGlobally = false;
+
 export const AxoProvider: FC<AxoProviderProps> = memo(props => {
+  useInsertionEffect(() => {
+    if (runOnceGlobally) {
+      return;
+    }
+    runOnceGlobally = true;
+
+    const unsubscribe = createScrollbarGutterCssProperties();
+
+    return () => {
+      unsubscribe();
+      runOnceGlobally = false;
+    };
+  });
   return (
     <Direction.Provider dir={props.dir}>{props.children}</Direction.Provider>
   );

ts/axo/AxoScrollArea.dom.stories.tsx

@@ -1,11 +1,10 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import type { ReactNode } from 'react';
-import React, { useMemo } from 'react';
+import React from 'react';
 import type { Meta } from '@storybook/react';
 import { AxoScrollArea } from './AxoScrollArea.dom.js';
 import { tw } from './tw.dom.js';
-import { getScrollbarGutters } from './_internal/scrollbars.dom.js';
 import { AxoSymbol } from './AxoSymbol.dom.js';
 
 export default {
@@ -39,18 +38,9 @@ function VerticalTemplate(props: {
   hints?: boolean;
   mask?: boolean;
 }) {
-  const paddingInline = useMemo(() => {
-    return getScrollbarGutters('thin', 'custom').vertical;
-  }, []);
-
   return (
     <div className={tw('w-64 rounded-2xl bg-background-secondary')}>
-      <h1
-        className={tw('pt-3 pb-2 type-title-large')}
-        style={{ paddingInline }}
-      >
-        Header
-      </h1>
+      <h1 className={tw('px-3 pt-3 pb-2 type-title-large')}>Header</h1>
       <div className={tw(props.fit || 'h-100')}>
         <AxoScrollArea.Root
           scrollbarWidth="thin"
@@ -76,9 +66,7 @@ function VerticalTemplate(props: {
           </MaybeMask>
         </AxoScrollArea.Root>
       </div>
-      <p className={tw('pt-2 pb-3 type-title-large')} style={{ paddingInline }}>
-        Footer
-      </p>
+      <p className={tw('px-3 pt-2 pb-3 type-title-large')}>Footer</p>
     </div>
   );
 }