From 06f040a5663d7f1f983ebce2e6e73ecf25f26444 Mon Sep 17 00:00:00 2001
From: Philip Peterson <1326208+philip-peterson@users.noreply.github.com>
Date: Sun, 15 Jun 2025 17:22:21 -0700
Subject: [PATCH] Fix scrollbar width being too small on Retina Mac (#167)

---
 lib/components/style-sheet.tsx | 5 ++++-
 package.json                   | 1 +
 yarn.lock                      | 9 +++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/lib/components/style-sheet.tsx b/lib/components/style-sheet.tsx
index 86d89424..e8011fba 100644
--- a/lib/components/style-sheet.tsx
+++ b/lib/components/style-sheet.tsx
@@ -1,14 +1,17 @@
 import React, {forwardRef} from 'react';
 
 import type {StyleSheetProps} from '../../typings/hyper';
+import { useDevicePixelRatio } from 'use-device-pixel-ratio';
 
 const StyleSheet = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => {
   const {borderColor} = props;
 
+  const dpr = useDevicePixelRatio();
+
   return (
     <style jsx global ref={ref}>{`
       ::-webkit-scrollbar {
-        width: 5px;
+        width: ${5 * dpr}px;
       }
       ::-webkit-scrollbar-thumb {
         -webkit-border-radius: 10px;
diff --git a/package.json b/package.json
index da367cf9..6201f044 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "styled-jsx": "5.1.6",
     "stylis": "3.5.4",
     "typescript-json-schema": "0.65.1",
+    "use-device-pixel-ratio": "^1.1.2",
     "uuid": "10.0.0",
     "webpack-cli": "5.1.4"
   },
diff --git a/yarn.lock b/yarn.lock
index 8e536f18..b375fe27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2255,9 +2255,9 @@ at-least-node@^1.0.0:
   resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-"ava@https://github.com/quine-global/ava#5b287fbd9f8c24a84f083626f72b6f177002b2a6":
+"ava@https://github.com/quine-global/ava#38aebe3badef8d54f68e8315e9849cfa83d531fe":
   version "6.2.0"
-  resolved "https://github.com/quine-global/ava#5b287fbd9f8c24a84f083626f72b6f177002b2a6"
+  resolved "https://github.com/quine-global/ava#38aebe3badef8d54f68e8315e9849cfa83d531fe"
   dependencies:
     "@vercel/nft" "^0.27.5"
     acorn "^8.13.0"
@@ -8373,6 +8373,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-device-pixel-ratio@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/use-device-pixel-ratio/-/use-device-pixel-ratio-1.1.2.tgz#e936b99d4037ff1028ac1ac2b5b2ef02ac55f91d"
+  integrity sha512-nFxV0HwLdRUt20kvIgqHYZe6PK/v4mU1X8/eLsT1ti5ck0l2ob0HDRziaJPx+YWzBo6dMm4cTac3mcyk68Gh+A==
+
 use-sync-external-store@^1.0.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"