chore: improve custom scroll areas

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>

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(

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>

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 {