chore: improve custom scroll areas

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,6 +761,7 @@
     </header>
 
     <main class="admin-main">
+      <ScrollArea class="admin-main-scroll" maxHeight="none">
         {#key active}
           <div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
             {#if active === "stats"}
@@ -842,6 +844,7 @@
             {/if}
           </div>
         {/key}
+      </ScrollArea>
     </main>
   </section>
 </div>

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,6 +824,7 @@
         />
       </label>
     </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)}
@@ -840,5 +841,6 @@
           </button>
         {/each}
       </div>
+    </ScrollArea>
   </div>
 </Dialog>

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,6 +607,7 @@
                 style="width:78%;height:9px;margin-top:6px"
               ></span>
             </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">
@@ -621,6 +623,7 @@
                   </div>
                 {/each}
               </div>
+            </ScrollArea>
           </div>
         </div>
       </Card.Content>
@@ -1018,6 +1021,7 @@
                     {at("stats_panel_inner_nodes_hint", {}, "")}
                   </p>
                 </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">
@@ -1031,6 +1035,7 @@
                       </div>
                     {/each}
                   </div>
+                </ScrollArea>
                 {#if panelNodeTraffic.seven.length > PANEL_NODE_TILE_LIMIT}
                   <p class="admin-panel-dash-nodes-more">
                     {at(

frontend/src/admin/sections/SupportSection.svelte

@@ -269,7 +269,8 @@
     {:else if !tickets.length}
       <div class="admin-empty-state">{at("support_empty", {}, "Тикетов пока нет")}</div>
     {:else}
-      <div class="support-inbox-list">
+      <ScrollArea class="support-inbox-list" maxHeight="none">
+        <div class="support-inbox-list-inner">
           {#each tickets as ticket}
             <SupportInboxRow
               {ticket}
@@ -279,6 +280,7 @@
             />
           {/each}
         </div>
+      </ScrollArea>
     {/if}
   </section>
 </div>

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 {

frontend/src/lib/components/patterns/admin/AdminSelect.svelte

@@ -30,12 +30,14 @@
   </Select.Trigger>
   <Select.Portal>
     <Select.Content class="admin-select-content" {sideOffset}>
+      <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>

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>
+      <ScrollArea class="dialog-body-scroll" maxHeight="none">
         <slot />
+      </ScrollArea>
     </section>
   </div>
 {/if}

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;
   }
 }
 

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;
   }
 

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 {

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,6 +296,7 @@
     </Tabs.Root>
 
     {#if loading}
+      <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">
@@ -310,6 +311,7 @@
             </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}
+      <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>