From fbc3e193bffa6cb87dcee1b7b3a2b95d23693ba3 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Sat, 30 May 2026 21:41:32 +0300
Subject: [PATCH] chore: improve custom scroll areas

---
 frontend/src/admin/AdminPanel.svelte          | 143 +++++++++---------
 .../src/admin/sections/SettingsSection.svelte |  36 ++---
 .../src/admin/sections/StatsSection.svelte    |  61 ++++----
 .../src/admin/sections/SupportSection.svelte  |  22 +--
 .../src/admin/sections/UserDetailModal.svelte |  12 +-
 .../patterns/admin/AdminSelect.svelte         |  14 +-
 frontend/src/lib/components/ui/dialog.svelte  |   5 +-
 frontend/src/styles/admin.css                 |  95 ++++++++----
 frontend/src/styles/components.css            |  17 ++-
 frontend/src/styles/dialogs.css               |  14 +-
 .../src/webapp/screens/SupportScreen.svelte   |  44 +++---
 11 files changed, 270 insertions(+), 193 deletions(-)

diff --git a/frontend/src/admin/AdminPanel.svelte b/frontend/src/admin/AdminPanel.svelte
index f7d7d53..3a0336a 100644
--- a/frontend/src/admin/AdminPanel.svelte
+++ b/frontend/src/admin/AdminPanel.svelte
@@ -26,6 +26,7 @@
   import { onMount, setContext } from "svelte";
   import { fade } from "svelte/transition";
   import { Select } from "$components/ui/primitives.js";
+  import { ScrollArea } from "$components/ui/index.js";
   import { AdminBadge, AdminButton } from "$components/patterns/admin/index.js";
 
   import BrandMark from "$lib/webapp/BrandMark.svelte";
@@ -760,88 +761,90 @@
     </header>
 
     <main class="admin-main">
-      {#key active}
-        <div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
-          {#if active === "stats"}
-            <StatsSection {at} {fmtDate} {fmtDateShort} {fmtMoney} {paymentStatusVariant} />
-          {/if}
+      <ScrollArea class="admin-main-scroll" maxHeight="none">
+        {#key active}
+          <div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
+            {#if active === "stats"}
+              <StatsSection {at} {fmtDate} {fmtDateShort} {fmtMoney} {paymentStatusVariant} />
+            {/if}
 
-          {#if active === "users"}
-            <UsersSection
-              {at}
-              {fmtDateShort}
-              {panelStatusBadge}
-              {resolvedAvatarUrl}
-              {userDisplayName}
-              {userInitials}
-              {userSecondaryName}
-            />
-          {/if}
+            {#if active === "users"}
+              <UsersSection
+                {at}
+                {fmtDateShort}
+                {panelStatusBadge}
+                {resolvedAvatarUrl}
+                {userDisplayName}
+                {userInitials}
+                {userSecondaryName}
+              />
+            {/if}
 
-          {#if active === "payments"}
-            <PaymentsSection
-              {at}
-              {fmtDate}
-              {fmtMoney}
-              {paymentStatusVariant}
-              onOpenUserCard={openPaymentUserCard}
-            />
-          {/if}
+            {#if active === "payments"}
+              <PaymentsSection
+                {at}
+                {fmtDate}
+                {fmtMoney}
+                {paymentStatusVariant}
+                onOpenUserCard={openPaymentUserCard}
+              />
+            {/if}
 
-          {#if active === "promos"}
-            <PromosSection {at} {fmtDateShort} />
-          {/if}
+            {#if active === "promos"}
+              <PromosSection {at} {fmtDateShort} />
+            {/if}
 
-          {#if active === "ads"}
-            <AdsSection {at} {fmtMoney} />
-          {/if}
+            {#if active === "ads"}
+              <AdsSection {at} {fmtMoney} />
+            {/if}
 
-          {#if active === "broadcast"}
-            <BroadcastSection {at} />
-          {/if}
+            {#if active === "broadcast"}
+              <BroadcastSection {at} />
+            {/if}
 
-          {#if active === "logs"}
-            <LogsSection {at} {fmtDate} />
-          {/if}
+            {#if active === "logs"}
+              <LogsSection {at} {fmtDate} />
+            {/if}
 
-          {#if active === "support"}
-            <SupportSection
-              {at}
-              {brand}
-              {resolvedAvatarUrl}
-              onOpenUserCard={openUserCard}
-              initialTicketId={readSupportTicketIdFromPath()}
-            />
-          {/if}
+            {#if active === "support"}
+              <SupportSection
+                {at}
+                {brand}
+                {resolvedAvatarUrl}
+                onOpenUserCard={openUserCard}
+                initialTicketId={readSupportTicketIdFromPath()}
+              />
+            {/if}
 
-          {#if active === "tariffs"}
-            <TariffsSection {at} {fmtMoney} {onSettingsSaved} />
-          {/if}
+            {#if active === "tariffs"}
+              <TariffsSection {at} {fmtMoney} {onSettingsSaved} />
+            {/if}
 
-          {#if active === "appearance"}
-            <AppearanceSection
-              {at}
-              {currentLang}
-              {onSettingsSaved}
-              {brand}
-              {appFaviconUrl}
-              {appFaviconUseCustom}
-            />
-          {/if}
+            {#if active === "appearance"}
+              <AppearanceSection
+                {at}
+                {currentLang}
+                {onSettingsSaved}
+                {brand}
+                {appFaviconUrl}
+                {appFaviconUseCustom}
+              />
+            {/if}
 
-          {#if active === "settings"}
-            <SettingsSection {at} {onSettingsSaved} {currentLang} />
-          {/if}
+            {#if active === "settings"}
+              <SettingsSection {at} {onSettingsSaved} {currentLang} />
+            {/if}
 
-          {#if active === "backups"}
-            <BackupsSection {at} {fmtDate} />
-          {/if}
+            {#if active === "backups"}
+              <BackupsSection {at} {fmtDate} />
+            {/if}
 
-          {#if active === "translations"}
-            <TranslationsSection {at} {onTranslationsSaved} />
-          {/if}
-        </div>
-      {/key}
+            {#if active === "translations"}
+              <TranslationsSection {at} {onTranslationsSaved} />
+            {/if}
+          </div>
+        {/key}
+      </ScrollArea>
     </main>
   </section>
 </div>
diff --git a/frontend/src/admin/sections/SettingsSection.svelte b/frontend/src/admin/sections/SettingsSection.svelte
index 77b3180..62bddcd 100644
--- a/frontend/src/admin/sections/SettingsSection.svelte
+++ b/frontend/src/admin/sections/SettingsSection.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ColorInput, FileInput, Input, Textarea } from "$components/ui/index.js";
+  import { ColorInput, FileInput, Input, ScrollArea, Textarea } from "$components/ui/index.js";
   import {
     Check,
     ChevronRight,
@@ -824,21 +824,23 @@
         />
       </label>
     </div>
-    <div class="admin-icon-picker-grid">
-      {#each filteredIconOptions as iconName}
-        {@const Icon = iconComponent(iconName)}
-        <button
-          class:active={iconPickerField && iconValue(iconPickerField) === iconName}
-          class="admin-icon-picker-option"
-          type="button"
-          onclick={() => selectIcon(iconName)}
-        >
-          {#if Icon}
-            <svelte:component this={Icon} size={18} />
-          {/if}
-          <span>{iconName}</span>
-        </button>
-      {/each}
-    </div>
+    <ScrollArea class="admin-icon-picker-scroll" maxHeight="min(52vh, 460px)">
+      <div class="admin-icon-picker-grid">
+        {#each filteredIconOptions as iconName}
+          {@const Icon = iconComponent(iconName)}
+          <button
+            class:active={iconPickerField && iconValue(iconPickerField) === iconName}
+            class="admin-icon-picker-option"
+            type="button"
+            onclick={() => selectIcon(iconName)}
+          >
+            {#if Icon}
+              <svelte:component this={Icon} size={18} />
+            {/if}
+            <span>{iconName}</span>
+          </button>
+        {/each}
+      </div>
+    </ScrollArea>
   </div>
 </Dialog>
diff --git a/frontend/src/admin/sections/StatsSection.svelte b/frontend/src/admin/sections/StatsSection.svelte
index 5a8995c..67aa380 100644
--- a/frontend/src/admin/sections/StatsSection.svelte
+++ b/frontend/src/admin/sections/StatsSection.svelte
@@ -4,6 +4,7 @@
 
   import { fmtTrafficBytes } from "../../lib/admin/format.js";
   import Badge from "$components/ui/badge.svelte";
+  import { ScrollArea } from "$components/ui/index.js";
   import * as Card from "$components/ui/card/index.js";
   import {
     AdminDashboardGrid,
@@ -606,21 +607,23 @@
                 style="width:78%;height:9px;margin-top:6px"
               ></span>
             </div>
-            <div class="admin-panel-dash-nodes-grid">
-              {#each Array(4) as _, m (m)}
-                <div class="admin-panel-dash-node">
-                  <span class="admin-skeleton admin-skeleton-line" style="width:82%"></span>
-                  <span
-                    class="admin-skeleton admin-skeleton-line admin-skeleton-line-strong"
-                    style="width:52%;height:16px;margin-top:6px"
-                  ></span>
-                  <span
-                    class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"
-                    style="width:44%;margin-top:6px"
-                  ></span>
-                </div>
-              {/each}
-            </div>
+            <ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
+              <div class="admin-panel-dash-nodes-grid">
+                {#each Array(4) as _, m (m)}
+                  <div class="admin-panel-dash-node">
+                    <span class="admin-skeleton admin-skeleton-line" style="width:82%"></span>
+                    <span
+                      class="admin-skeleton admin-skeleton-line admin-skeleton-line-strong"
+                      style="width:52%;height:16px;margin-top:6px"
+                    ></span>
+                    <span
+                      class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"
+                      style="width:44%;margin-top:6px"
+                    ></span>
+                  </div>
+                {/each}
+              </div>
+            </ScrollArea>
           </div>
         </div>
       </Card.Content>
@@ -1018,19 +1021,21 @@
                     {at("stats_panel_inner_nodes_hint", {}, "")}
                   </p>
                 </div>
-                <div class="admin-panel-dash-nodes-grid">
-                  {#each panelNodeTraffic.seven.slice(0, PANEL_NODE_TILE_LIMIT) as node}
-                    <div class="admin-panel-dash-node">
-                      <div class="admin-panel-dash-node-name">{node.label}</div>
-                      <div class="admin-panel-dash-node-value">{node.value}</div>
-                      {#if node.online != null}
-                        <div class="admin-panel-dash-node-meta">
-                          {at("stats_panel_node_users_online", { count: node.online }, "")}
-                        </div>
-                      {/if}
-                    </div>
-                  {/each}
-                </div>
+                <ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
+                  <div class="admin-panel-dash-nodes-grid">
+                    {#each panelNodeTraffic.seven.slice(0, PANEL_NODE_TILE_LIMIT) as node}
+                      <div class="admin-panel-dash-node">
+                        <div class="admin-panel-dash-node-name">{node.label}</div>
+                        <div class="admin-panel-dash-node-value">{node.value}</div>
+                        {#if node.online != null}
+                          <div class="admin-panel-dash-node-meta">
+                            {at("stats_panel_node_users_online", { count: node.online }, "")}
+                          </div>
+                        {/if}
+                      </div>
+                    {/each}
+                  </div>
+                </ScrollArea>
                 {#if panelNodeTraffic.seven.length > PANEL_NODE_TILE_LIMIT}
                   <p class="admin-panel-dash-nodes-more">
                     {at(
diff --git a/frontend/src/admin/sections/SupportSection.svelte b/frontend/src/admin/sections/SupportSection.svelte
index 88e3c78..6eea221 100644
--- a/frontend/src/admin/sections/SupportSection.svelte
+++ b/frontend/src/admin/sections/SupportSection.svelte
@@ -269,16 +269,18 @@
     {:else if !tickets.length}
       <div class="admin-empty-state">{at("support_empty", {}, "Тикетов пока нет")}</div>
     {:else}
-      <div class="support-inbox-list">
-        {#each tickets as ticket}
-          <SupportInboxRow
-            {ticket}
-            active={openedTicketId === ticket.ticket_id}
-            {at}
-            onOpen={(item) => supportStore.openTicket(item.ticket_id)}
-          />
-        {/each}
-      </div>
+      <ScrollArea class="support-inbox-list" maxHeight="none">
+        <div class="support-inbox-list-inner">
+          {#each tickets as ticket}
+            <SupportInboxRow
+              {ticket}
+              active={openedTicketId === ticket.ticket_id}
+              {at}
+              onOpen={(item) => supportStore.openTicket(item.ticket_id)}
+            />
+          {/each}
+        </div>
+      </ScrollArea>
     {/if}
   </section>
 </div>
diff --git a/frontend/src/admin/sections/UserDetailModal.svelte b/frontend/src/admin/sections/UserDetailModal.svelte
index bb74860..86a293c 100644
--- a/frontend/src/admin/sections/UserDetailModal.svelte
+++ b/frontend/src/admin/sections/UserDetailModal.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Label, Separator, Tabs } from "$components/ui/primitives.js";
-  import { Checkbox, Input, Textarea } from "$components/ui/index.js";
+  import { Checkbox, Input, ScrollArea, Textarea } from "$components/ui/index.js";
   import Dialog from "$components/ui/dialog.svelte";
   import {
     AdminBadge,
@@ -552,7 +552,7 @@
                 </div>
               </div>
 
-              <div class="admin-user-logs-wrap">
+              <ScrollArea class="admin-user-logs-wrap" maxHeight="min(52vh, 460px)">
                 {#if userLogsLoading}
                   <AdminTableSkeleton
                     headers={[
@@ -604,7 +604,7 @@
                     </tbody>
                   </AdminTable>
                 {/if}
-              </div>
+              </ScrollArea>
 
               {#if userLogsLoaded && userLogsTotal > userLogsPageSize}
                 <AdminPagination
@@ -976,7 +976,9 @@
   onclose={() => usersStore.updateState({ userMessageConfirmOpen: false })}
   class="admin-dialog"
 >
-  <div class="admin-confirm-message-preview">{userMessageDraft}</div>
+  <ScrollArea class="admin-confirm-message-preview" maxHeight="min(280px, 45vh)">
+    {userMessageDraft}
+  </ScrollArea>
   <div class="admin-dialog-actions">
     <AdminButton onclick={() => usersStore.updateState({ userMessageConfirmOpen: false })}
       >{at("btn_cancel", {}, "Отмена")}</AdminButton
@@ -1230,7 +1232,7 @@
     gap: 8px;
     font-size: 13px;
   }
-  .admin-user-logs-wrap {
+  :global(.admin-user-logs-wrap) {
     min-height: 120px;
   }
   .admin-user-log-event {
diff --git a/frontend/src/lib/components/patterns/admin/AdminSelect.svelte b/frontend/src/lib/components/patterns/admin/AdminSelect.svelte
index 8d9bda2..b271585 100644
--- a/frontend/src/lib/components/patterns/admin/AdminSelect.svelte
+++ b/frontend/src/lib/components/patterns/admin/AdminSelect.svelte
@@ -30,12 +30,14 @@
   </Select.Trigger>
   <Select.Portal>
     <Select.Content class="admin-select-content" {sideOffset}>
-      {#each items as item (item.value)}
-        <Select.Item value={item.value} label={item.label} class="admin-select-item">
-          <span>{item.label}</span>
-          <Check size={14} class="admin-select-item-check" />
-        </Select.Item>
-      {/each}
+      <Select.Viewport class="admin-select-viewport">
+        {#each items as item (item.value)}
+          <Select.Item value={item.value} label={item.label} class="admin-select-item">
+            <span>{item.label}</span>
+            <Check size={14} class="admin-select-item-check" />
+          </Select.Item>
+        {/each}
+      </Select.Viewport>
     </Select.Content>
   </Select.Portal>
 </Select.Root>
diff --git a/frontend/src/lib/components/ui/dialog.svelte b/frontend/src/lib/components/ui/dialog.svelte
index c94fe45..b716149 100644
--- a/frontend/src/lib/components/ui/dialog.svelte
+++ b/frontend/src/lib/components/ui/dialog.svelte
@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
   import { fade, fly } from "svelte/transition";
   import Button from "./button.svelte";
+  import ScrollArea from "./scroll-area.svelte";
 
   export let open = false;
   export let title = "";
@@ -65,7 +66,9 @@
           <X size={18} />
         </Button>
       </div>
-      <slot />
+      <ScrollArea class="dialog-body-scroll" maxHeight="none">
+        <slot />
+      </ScrollArea>
     </section>
   </div>
 {/if}
diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css
index a8c383d..53a21b5 100644
--- a/frontend/src/styles/admin.css
+++ b/frontend/src/styles/admin.css
@@ -348,7 +348,7 @@
   min-height: 0;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
-  overflow-y: auto;
+  overflow: hidden;
   overflow-x: hidden;
   padding: 24px 28px 36px;
   display: flex;
@@ -359,7 +359,14 @@
 /* Flex children must NOT shrink — otherwise they collapse to fit the
    container and the main never overflows, breaking scroll. */
 
-.admin-main > * {
+.admin-main-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+}
+
+.admin-main > *,
+.admin-main-scroll > .scroll-area__viewport > * {
   flex-shrink: 0;
 }
 
@@ -1048,16 +1055,18 @@
   color: var(--admin-muted);
 }
 
+.admin-panel-dash-nodes-scroll {
+  max-height: 240px;
+  border-radius: 12px;
+  border: 1px solid var(--admin-border);
+  background: color-mix(in srgb, var(--admin-bg) 65%, var(--admin-surface-2));
+}
+
 .admin-panel-dash-nodes-grid {
   display: grid;
   gap: 8px;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  max-height: 240px;
-  overflow-y: auto;
   padding: 10px;
-  border-radius: 12px;
-  border: 1px solid var(--admin-border);
-  background: color-mix(in srgb, var(--admin-bg) 65%, var(--admin-surface-2));
 }
 
 .admin-panel-dash-node {
@@ -2221,12 +2230,14 @@
   padding-left: 36px;
 }
 
+.admin-icon-picker-scroll {
+  border-radius: 10px;
+}
+
 .admin-icon-picker-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 10px;
-  max-height: min(52vh, 460px);
-  overflow-y: auto;
   padding: 2px 4px 4px 0;
 }
 
@@ -2726,7 +2737,7 @@
   /* Keep admin dialogs readable on desktop: base .dialog-card uses min(100%, 520px);
      this rule must not stretch the card to full viewport width. */
   width: min(100%, 520px);
-  overflow-y: auto;
+  overflow: hidden;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
@@ -3842,7 +3853,7 @@
   z-index: 90;
   min-width: var(--bits-select-anchor-width);
   max-height: var(--bits-select-content-available-height, 320px);
-  overflow-y: auto;
+  overflow: hidden;
   border: 1px solid var(--admin-border);
   border-radius: 10px;
   background:
@@ -3855,6 +3866,31 @@
   gap: 1px;
 }
 
+.admin-select-viewport {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  max-height: inherit;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border)) transparent;
+}
+
+.admin-select-viewport::-webkit-scrollbar {
+  width: 8px;
+}
+
+.admin-select-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.admin-select-viewport::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--admin-muted) 34%, var(--admin-border));
+  background-clip: padding-box;
+}
+
 .admin-select-item {
   display: flex;
   align-items: center;
@@ -4050,7 +4086,7 @@
 
 .admin-confirm-message-preview {
   max-height: min(280px, 45vh);
-  overflow: auto;
+  overflow: hidden;
   padding: 12px 14px;
   border: 1px solid var(--admin-border);
   border-radius: 10px;
@@ -4399,11 +4435,14 @@
 }
 
 .support-inbox-list {
-  gap: 8px;
   min-height: 0;
-  overflow-y: auto;
+  overflow: hidden;
+}
+
+.support-inbox-list-inner {
+  display: grid;
+  gap: 8px;
   padding-right: 2px;
-  scrollbar-width: thin;
 }
 
 .support-inbox-row {
@@ -5033,11 +5072,13 @@
 }
 
 .support-inbox-list {
-  align-content: start;
   min-height: 0;
-  overflow-y: auto;
+  overflow: hidden;
+}
+
+.support-inbox-list-inner {
+  align-content: start;
   padding-right: 2px;
-  scrollbar-width: thin;
 }
 
 .support-inbox-row {
@@ -5263,7 +5304,7 @@
     height: 100%;
     min-height: 0;
     max-height: none !important;
-    overflow: auto;
+    overflow: hidden;
   }
 }
 
@@ -5436,15 +5477,17 @@
 }
 
 .support-admin-list-panel .support-inbox-list {
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+}
+
+.support-admin-list-panel .support-inbox-list-inner {
   display: grid;
   align-content: start;
   gap: 8px;
-  min-height: 0;
-  height: 100%;
-  overflow: auto;
-  padding: 0;
   padding-right: 4px;
-  scrollbar-width: thin;
 }
 
 .support-admin-list-panel > .admin-empty-state {
@@ -5561,7 +5604,7 @@
   min-height: 0;
   height: 100%;
   max-height: none !important;
-  overflow: auto;
+  overflow: hidden;
   border: 1px solid var(--admin-border);
   border-radius: 12px;
   background: color-mix(in srgb, var(--admin-bg) 68%, transparent);
@@ -5913,7 +5956,7 @@
   .support-ticket-dialog .support-admin-message-scroll {
     height: 100%;
     min-height: 320px;
-    overflow: auto;
+    overflow: hidden;
   }
 }
 
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index e26871d..73604ff 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -326,7 +326,7 @@
 }
 
 .scroll-area {
-  overflow: auto;
+  overflow: hidden;
   min-height: 0;
 }
 
@@ -854,7 +854,7 @@
 .ticket-list,
 .ticket-message-list,
 .support-admin-messages,
-.support-inbox-list {
+.support-inbox-list-inner {
   display: grid;
   gap: 10px;
 }
@@ -1457,14 +1457,15 @@
     align-content: stretch;
   }
 
+  .support-ticket-list-scroll {
+    min-height: 0;
+    height: 100%;
+  }
+
   .support-list-card .ticket-list,
   .support-user-list-skeleton {
     align-content: start;
-    min-height: 0;
-    height: 100%;
-    overflow: auto;
     padding-right: 4px;
-    scrollbar-width: thin;
   }
 
   .support-list-card .support-empty-state {
@@ -1538,7 +1539,7 @@
   .support-ticket-screen .support-message-scroll {
     min-height: 0;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     padding: 20px;
     scrollbar-width: thin;
   }
@@ -1717,7 +1718,7 @@
   .support-ticket-screen .support-message-scroll {
     min-height: 0;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
     padding: 10px;
   }
 
diff --git a/frontend/src/styles/dialogs.css b/frontend/src/styles/dialogs.css
index bae33dd..777a776 100644
--- a/frontend/src/styles/dialogs.css
+++ b/frontend/src/styles/dialogs.css
@@ -30,10 +30,11 @@
   position: relative;
   z-index: 1;
   display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 16px;
   width: min(100%, 520px);
   max-height: min(86dvh, 760px);
-  overflow: auto;
+  overflow: hidden;
   overscroll-behavior: contain;
   padding: 18px;
   border: 1px solid var(--border);
@@ -43,6 +44,15 @@
   box-shadow: var(--shadow-strong);
 }
 
+.dialog-body-scroll {
+  min-height: 0;
+  max-height: none;
+}
+
+.dialog-body-scroll > .scroll-area__viewport {
+  display: grid;
+}
+
 .dialog-head {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -94,7 +104,7 @@
 
 .payment-dialog-card {
   max-height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 .payment-dialog-body {
diff --git a/frontend/src/webapp/screens/SupportScreen.svelte b/frontend/src/webapp/screens/SupportScreen.svelte
index 1eabd43..997482d 100644
--- a/frontend/src/webapp/screens/SupportScreen.svelte
+++ b/frontend/src/webapp/screens/SupportScreen.svelte
@@ -4,7 +4,7 @@
   import { Check, ChevronsUpDown, LifeBuoy, MessageSquarePlus } from "$components/ui/icons.js";
   import Button from "$components/ui/button.svelte";
   import Card from "$components/ui/card.svelte";
-  import { Input, Skeleton, Textarea } from "$components/ui/index.js";
+  import { Input, ScrollArea, Skeleton, Textarea } from "$components/ui/index.js";
   import { TicketCard } from "$components/patterns/webapp/index.js";
   import { Select, Tabs } from "$components/ui/primitives.js";
   import {
@@ -296,20 +296,22 @@
     </Tabs.Root>
 
     {#if loading}
-      <div class="support-user-list-skeleton" aria-label={t("wa_loading")}>
-        {#each Array(5) as _, index (index)}
-          <article class="support-user-ticket-skeleton">
-            <span class="support-user-ticket-skeleton-main">
-              <Skeleton variant="title" width="min(420px, 76%)" />
-              <Skeleton variant="short" width="min(260px, 58%)" />
-            </span>
-            <span class="support-user-ticket-skeleton-side">
-              <Skeleton variant="badge" width="92px" />
-              <Skeleton variant="tiny" width="64px" />
-            </span>
-          </article>
-        {/each}
-      </div>
+      <ScrollArea class="support-ticket-list-scroll" maxHeight="none">
+        <div class="support-user-list-skeleton" aria-label={t("wa_loading")}>
+          {#each Array(5) as _, index (index)}
+            <article class="support-user-ticket-skeleton">
+              <span class="support-user-ticket-skeleton-main">
+                <Skeleton variant="title" width="min(420px, 76%)" />
+                <Skeleton variant="short" width="min(260px, 58%)" />
+              </span>
+              <span class="support-user-ticket-skeleton-side">
+                <Skeleton variant="badge" width="92px" />
+                <Skeleton variant="tiny" width="64px" />
+              </span>
+            </article>
+          {/each}
+        </div>
+      </ScrollArea>
     {:else if !tickets.length}
       <div class="support-empty-state" in:fade={{ duration: 180 }}>
         <MessageSquarePlus size={34} />
@@ -317,11 +319,13 @@
         <small>{t("wa_support_empty_hint")}</small>
       </div>
     {:else}
-      <div class="ticket-list">
-        {#each tickets as ticket}
-          <TicketCard {ticket} {t} onOpen={(item) => supportStore.openTicket(item.ticket_id)} />
-        {/each}
-      </div>
+      <ScrollArea class="support-ticket-list-scroll" maxHeight="none">
+        <div class="ticket-list">
+          {#each tickets as ticket}
+            <TicketCard {ticket} {t} onOpen={(item) => supportStore.openTicket(item.ticket_id)} />
+          {/each}
+        </div>
+      </ScrollArea>
     {/if}
   </Card>
 </main>