From 4d7916b528139b18d3cea593a0a1a0ee06249da1 Mon Sep 17 00:00:00 2001
From: Hiddify-Official <143534788+Hiddify-Official@users.noreply.github.com>
Date: Wed, 28 Oct 2026 01:22:03 +0330
Subject: [PATCH] fix(users): blank Users page on phones in RTL (sort strip
 mask on the whole page)

":global([dir='rtl']) .u-sorts" compiles to a bare [dir='rtl'] {} in scoped CSS, so in RTL the
sort strip's fade mask was applied to the page itself; phone browsers then stopped painting the
page part way down. The fade is now a gradient drawn over the strip's end (html[dir='rtl'] for
its direction), with no mask-image.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/features/users/views/UsersView.vue    | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/hiddifypanel/admin_v2/src/features/users/views/UsersView.vue b/hiddifypanel/admin_v2/src/features/users/views/UsersView.vue
index 4bbae9db2..9046e2077 100644
--- a/hiddifypanel/admin_v2/src/features/users/views/UsersView.vue
+++ b/hiddifypanel/admin_v2/src/features/users/views/UsersView.vue
@@ -272,6 +272,7 @@
           <span>{{ t('users.selectAll', { n: rows.length }, rows.length) }}</span>
         </label>
         <!-- The table's column sorts, as small buttons: a tap sorts up, the next down, the third goes back to your own order -->
+        <div class="u-sorts-wrap">
         <div class="u-sorts">
           <button
             v-for="c in CARD_SORTS"
@@ -288,6 +289,7 @@
             <i v-if="sortField === c.field" class="u-sort__dir pi" :class="sortOrder === -1 ? 'pi-arrow-down' : 'pi-arrow-up'" aria-hidden="true" />
           </button>
         </div>
+        </div>
       </div>
       <template v-for="group in cardGroups" :key="group.key">
         <div v-if="groupByOwner" class="users-group users-group--card"><i class="pi pi-sitemap" /><b>{{ group.owner || '—' }}</b><span class="text-muted-color">{{ group.users.length }}</span></div>
@@ -1801,18 +1803,30 @@ onBeforeUnmount(() => {
   font-weight: 500;
   cursor: pointer;
 }
-/* One line: what does not fit scrolls sideways, with the edge fading out */
-.u-sorts {
-  display: flex;
+/* One line: what does not fit scrolls sideways, with the edge fading out. The fade is drawn over the strip, not a
+   mask-image on it: phone browsers stop painting the page below a masked sideways scroller in RTL. */
+.u-sorts-wrap {
+  position: relative;
   flex: 1;
   min-width: 0;
+}
+.u-sorts-wrap::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  width: 1rem;
+  pointer-events: none;
+  background: linear-gradient(to right, transparent, var(--p-content-background));
+}
+html[dir='rtl'] .u-sorts-wrap::after {
+  background: linear-gradient(to left, transparent, var(--p-content-background));
+}
+.u-sorts {
+  display: flex;
   gap: 0.3rem;
   overflow-x: auto;
   scrollbar-width: none;
-  mask-image: linear-gradient(to right, #000 calc(100% - 1rem), transparent);
-}
-:global([dir='rtl']) .u-sorts {
-  mask-image: linear-gradient(to left, #000 calc(100% - 1rem), transparent);
 }
 .u-sorts::-webkit-scrollbar {
   display: none;