[#7655] added backups list scroll container

2026-04-22 17:21:11 +03:00
parent 83e44a7cfb
commit b15f358fc9
6 changed files with 97 additions and 80 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## v0.37.4 (WIP)
+
+- Added backups list scroll container ([#7655](https://github.com/pocketbase/pocketbase/issues/7655)).
+
+
 ## v0.37.3

 - Fixed total count load on page back/forward navigation.
--- a/ui/dist/assets/index-BdKmsBV_.js
+++ b/ui/dist/assets/index-BdKmsBV_.js
--- a/ui/dist/assets/index-COsT6ZrW.css
+++ b/ui/dist/assets/index-COsT6ZrW.css
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -13,9 +13,9 @@

    <!-- prism -->
    <script src="./libs/prism/prism.js" data-manual></script>
-  <script type="module" crossorigin src="./assets/index-CFYkmcdC.js"></script>
+  <script type="module" crossorigin src="./assets/index-BdKmsBV_.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/pocketbase.es-B_4DUNUU.js">
-  <link rel="stylesheet" crossorigin href="./assets/index-BsxX9wuy.css">
+  <link rel="stylesheet" crossorigin href="./assets/index-COsT6ZrW.css">
 </head>
 <body>
 </body>
--- a/ui/src/css/list.css
+++ b/ui/src/css/list.css
@@ -15,6 +15,14 @@
        display: none;
    }

+    .list-group {
+        display: block;
+        width: 100%;
+        max-height: 425px;
+        overflow: auto;
+        scrollbar-width: thin;
+    }
+
    .list-item {
        word-break: break-word;
        position: relative;
--- a/ui/src/settings/backups/backupsList.js
+++ b/ui/src/settings/backups/backupsList.js
@@ -100,7 +100,8 @@ export function backupsList(propsArg = {}) {

    return t.div(
        {
-            className: "list",
+            pbEvent: "backupsList",
+            className: "list backups-list",
            onmount: (el) => {
                watchers.push(watch(() => props.reset, () => {
                    loadBackups();
@@ -115,6 +116,8 @@ export function backupsList(propsArg = {}) {
                watchers.forEach((w) => w?.unwatch());
            },
        },
+        t.div(
+            { className: "list-group" },
            t.div(
                {
                    hidden: () => !data.isLoading || data.backups.length,
@@ -193,6 +196,7 @@ export function backupsList(propsArg = {}) {
                    );
                });
            },
+        ),
        t.div(
            { className: "list-item" },
            t.button(