[Hiddify-Official]

Problem

Since #108, on phones in an RTL language (Persian) the Users page is drawn narrower than the screen and stops painting after the first few cards: the rest of the page stays blank. Users reported it on most mobile browsers.
Root cause: :global([dir='rtl']) .u-sorts { mask-image: … } in scoped CSS compiles to a bare [dir="rtl"] { mask-image: … }, because Vue drops what follows :global(). So the sort strip's fade mask was applied to the whole page.

Change

• features/users/views/UsersView.vue:
  • the strip's end fade is now a small gradient drawn over the strip (.u-sorts-wrap::after, the bar's own background color, pointer-events: none), with no mask-image;
  • its RTL direction uses html[dir='rtl'] .u-sorts-wrap::after, the form the repo already recommends in AddDomainWizard.vue.

Screenshots

Users page at phone width, Persian:

Before	After

Tested

• Deployed to main, node1 and node2 (UI).
• On main at 390 px in Persian and English:
  • the body has no padding and the content is the full width;
  • the whole card list paints while scrolling (the bottom half of the screen at 700 px scroll was 100% white before, now only the space below the list);
  • the sort strip still fades at its end, in both directions.
• Checked the other pages in RTL at phone width (dashboard, Admins, Domains, Settings, Actions, Proxies, Backup, Quick setup): none had this problem.
• No other :global([dir…]) .x rule in admin_v2. feat(admin): notes on a notepad sheet next to Edit (Admins, Users) #107 had the same pattern and is fixed in that PR.

Review

• Confidence: High (>90%): root cause found by removing the mask in the live page, and fixed at the selector.
• Complexity: Simple: one CSS rule and a wrapper div.

Fixes a regression from #108.

🤖 Generated with Claude Code