fix: global scroll bar styles (#38874)

## **Description**

This PR centralizes scrollbar styling across the MetaMask extension to
ensure a consistent user experience. Previously, scrollbar styles were
duplicated across multiple component files, leading to inconsistency
between browser-native scrollbars and our custom styles.

**Changes:**
- **Added global scrollbar styles** to `ui/css/base-styles.scss` that
apply to all scrollable elements
  - Firefox: `scrollbar-width: thin` with muted color scheme
- Webkit browsers (Chrome, Brave, Safari): 8px width with rounded
corners and muted background
- **Removed duplicate scrollbar declarations** from 5 component files:
  - `modal-content.scss`
  - `multichain/pages/page/components/content/index.scss`
- `form-combo-field/index.scss` (partial - kept hidden scrollbar
override)
- `bridge/index.scss` (partial - kept `scrollbar-width: none` override)
  - `settings/index.scss`
- **Retained component-specific overrides** where intentionally
different behavior is needed (e.g., hidden scrollbars in bridge page)

**Result:** Net reduction of 32 lines of code while achieving consistent
8px scrollbar styling across the extension.

Related: [Slack
Discussion](https://consensys.slack.com/archives/C0354T27M5M/p1765815374100129?thread_ts=1765815374.100129&cid=C0354T27M5M)

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38874?quickstart=1)

## **Changelog**

CHANGELOG entry: Standardized scrollbar styling across the extension for
visual consistency

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-644

## **Manual testing steps**

1. Build and run the extension locally
2. Navigate through different parts of the extension that have
scrollable content:
   - Open Settings and scroll through different tabs
- Open a modal with scrollable content (e.g., network list, token list)
   - View the Bridge page
   - Check multichain pages with scrollable lists
3. Verify that scrollbars appear consistently with 8px width and muted
color
4. Test in both Chrome and Firefox browsers
5. Verify that intentionally hidden scrollbars (e.g., Bridge page)
remain hidden

## **Screenshots/Recordings**

### **Before**
Inconsistent scrollbar widths and colors across different components,
with duplicate CSS in multiple files.


https://github.com/user-attachments/assets/284e9e5d-1908-42d3-8d21-c714dd0c0faf

### **After**
Consistent 8px scrollbar styling across all scrollable areas, that
adheres to design system colors (Brave browser)


https://github.com/user-attachments/assets/cee0b8a2-368d-4718-ac37-7519efc464ef

Scroll bar in expanded and side panel views


https://github.com/user-attachments/assets/45fa448f-6daf-45fb-9a14-c91aa368dbfa

Firefox



https://github.com/user-attachments/assets/b4a1c24d-2aa5-48d0-b3aa-bb14554ce686

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable (N/A for styling changes)
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable (N/A for styling changes)
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds global cross‑browser scrollbar styles and removes component‑level
scrollbar rules for consistency.
> 
> - **CSS/Base**:
> - Add global scrollbar styles in `ui/css/base-styles.scss` (Firefox
thin, WebKit 8px with rounded thumb, transparent track).
> - **Cleanup**:
> - Remove duplicate/override scrollbar rules from multiple components:
`modal-content`, multichain (`pages/page/content`,
`import-tokens-modal`), `form-combo-field`, `popover`, `newui-sections`
main container, Tailwind utility, `bridge`, `connect-hardware`
(unsupported-browser), `settings`, and `swaps`.
> - **Behavior**:
> - Keep existing overflow behavior; rely on global styles for
appearance.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
724820c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: georgewrmarshall

ui/components/component-library/modal-content/modal-content.scss

@@ -11,22 +11,6 @@
     padding: 8px;
   }
 
-  // Scroll bar styles
-  // Firefox
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-icon-muted) transparent;
-
-  // Webkit: Chrome, Brave
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background: var(--color-icon-muted);
-  }
-
   &__dialog {
     --modal-content-size: var(--size, 360px);
 

ui/components/multichain/import-tokens-modal/index.scss

@@ -3,10 +3,6 @@
 .import-tokens-modal {
   $self: &;
 
-  &__body::-webkit-scrollbar {
-    display: none;
-  }
-
   &__body {
     overflow-y: auto;
   }
@@ -33,8 +29,6 @@
   }
 
   &__search-list {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
     overflow-y: scroll;
     max-width: 100%;
     overflow: auto;

ui/components/multichain/pages/page/components/content/index.scss

@@ -1,18 +1,3 @@
 .multichain-page-content {
   overflow: auto;
-  // Scroll bar styles
-  // Firefox
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-icon-muted) transparent;
-
-  // Webkit: Chrome, Brave
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background: var(--color-icon-muted);
-  }
 }

ui/components/ui/form-combo-field/index.scss

@@ -1,16 +1,6 @@
 .form-combo-field {
   width: 100%;
 
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background: var(--color-icon-muted);
-  }
-
-  ::-webkit-scrollbar {
-    width: 0;
-  }
-
   &__value > div {
     outline: 0;
     width: 100%;
@@ -28,10 +18,6 @@
     overflow-y: scroll;
     z-index: 1;
     background-color: var(--color-background-default);
-
-    &__scroll::-webkit-scrollbar {
-      width: 8px;
-    }
   }
 
   &__option {

ui/components/ui/popover/index.scss

@@ -2,16 +2,6 @@
 
 .popover {
   &-wrap {
-    ::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    ::-webkit-scrollbar-thumb {
-      -webkit-border-radius: 10px;
-      border-radius: 10px;
-      background: var(--color-icon-muted);
-    }
-
     display: flex;
     flex-direction: column;
     position: absolute;

ui/css/base-styles.scss

@@ -75,3 +75,26 @@ a:hover {
 * {
   font-family: design-system.$font-family;
 }
+
+/** Global Scrollbar Styles **/
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-icon-muted) transparent;
+}
+
+/* Webkit: Chrome, Brave, Safari */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  background: var(--color-icon-muted);
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}

ui/css/itcss/components/newui-sections.scss

@@ -37,10 +37,6 @@
   z-index: design-system.$main-container-z-index;
 }
 
-.main-container::-webkit-scrollbar {
-  display: none;
-}
-
 .main-container-wrapper {
   display: flex;
   justify-content: center;

ui/css/tailwind.css

@@ -1,9 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-}

ui/pages/bridge/index.scss

@@ -16,19 +16,4 @@
 .bridge__container {
   height: 100%;
   overflow-y: scroll;
-  // Scroll bar styles
-  // Firefox
-  scrollbar-width: none;
-  scrollbar-color: var(--color-icon-muted) transparent;
-
-  // Webkit: Chrome, Brave
-  ::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
-    background: var(--color-icon-muted);
-  }
 }

ui/pages/create-account/connect-hardware/index.scss

@@ -258,11 +258,6 @@
   &.unsupported-browser {
     height: 210px;
     overflow: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
   }
 
   &.account-list {