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
Branch
no-horiz-scroll-ext
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 33562
Build 66603: Build Diffcashtab-tests
Build 66602: arc lint + arc unit

Event Timeline

bytesofman published this revision for review.Jun 6 2025, 16:33
bytesofman added inline comments.
cashtab/src/components/Header/styled.ts
179

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