Page MenuHomePhabricator

[Cashtab] Correct horizontal scrollbar in balance header on desktop and extension
ClosedPublic

Authored by bytesofman on Jun 6 2025, 16:28.

Details

Summary

We get the system default scrollbar at screen widths < 1100px for non-mobile devices. The styles are optimized for touchscreen devices, but desktop windows at smaller widths (like the extension) do not support this, and just show an ugly system default scrollbar.

Add a customized scrollbar for this case. Keep the mobile device stuff unchanged.

Test Plan

Check with mobile device and desktop at cashtab.io, check extension, npm test, screenshots

extension before

image.png (298×395 px, 37 KB)

extension after

image.png (298×395 px, 37 KB)

mobile before and after unchanged

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

bytesofman published this revision for review.Jun 6 2025, 16:33
bytesofman added inline comments.
cashtab/src/components/Header/styled.ts
179 ↗(On Diff #54384)

TIL

the media query for touchscreen devices is pointer: coarse

FYI I was not able to make the scrollbar narrower, most browsers impose a 4px minimum.

This revision is now accepted and ready to land.Jun 6 2025, 22:18