quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-12 20:18:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix scrollbar width being too small on Retina Mac (#167)
Some checks failed
CodeQL / Analyze (push) Has been cancelled
Details

Browse source
This commit is contained in:
Philip Peterson 2025-06-15 17:22:21 -07:00 committed by GitHub
parent fa460d697c
commit 06f040a566
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/components/style-sheet.tsx
View file

@ -1,14 +1,17 @@
import React, {forwardRef} from 'react'; import React, {forwardRef} from 'react';
import type {StyleSheetProps} from '../../typings/hyper'; import type {StyleSheetProps} from '../../typings/hyper';
import { useDevicePixelRatio } from 'use-device-pixel-ratio';
const StyleSheet = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => { const StyleSheet = forwardRef<HTMLStyleElement, StyleSheetProps>((props, ref) => {
const {borderColor} = props; const {borderColor} = props;
const dpr = useDevicePixelRatio();
return ( return (
<style jsx global ref={ref}>{` <style jsx global ref={ref}>{`
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: ${5 * dpr}px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;

1
package.json
View file

@ -77,6 +77,7 @@
"styled-jsx": "5.1.6", "styled-jsx": "5.1.6",
"stylis": "3.5.4", "stylis": "3.5.4",
"typescript-json-schema": "0.65.1", "typescript-json-schema": "0.65.1",
"use-device-pixel-ratio": "^1.1.2",
"uuid": "10.0.0", "uuid": "10.0.0",
"webpack-cli": "5.1.4" "webpack-cli": "5.1.4"
}, },

9
yarn.lock
View file

@ -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" resolved "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
"ava@https://github.com/quine-global/ava#5b287fbd9f8c24a84f083626f72b6f177002b2a6": "ava@https://github.com/quine-global/ava#38aebe3badef8d54f68e8315e9849cfa83d531fe":
version "6.2.0" version "6.2.0"
resolved "https://github.com/quine-global/ava#5b287fbd9f8c24a84f083626f72b6f177002b2a6" resolved "https://github.com/quine-global/ava#38aebe3badef8d54f68e8315e9849cfa83d531fe"
dependencies: dependencies:
"@vercel/nft" "^0.27.5" "@vercel/nft" "^0.27.5"
acorn "^8.13.0" acorn "^8.13.0"
@ -8373,6 +8373,11 @@ uri-js@^4.2.2:
dependencies: dependencies:
punycode "^2.1.0" 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: use-sync-external-store@^1.0.0:
version "1.5.0" version "1.5.0"
resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0" resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"