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

Scrollbar to respect dpr

Browse source
This commit is contained in:
Philip Peterson 2025-06-15 17:04:26 -07:00
parent c4f05dbb1c
commit b19bc74001
1 changed files with 4 additions and 1 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;