[#3344, #2505] optimized records listing

ui/src/scss/_base.scss

@@ -323,6 +323,10 @@ a,
     }
 }
 
+.scrollbar-gutter-stable {
+    scrollbar-gutter: stable;
+}
+
 .no-pointer-events {
     pointer-events: none;
 }

ui/src/scss/_bulkbar.scss

@@ -1,6 +1,7 @@
 .bulkbar {
-    position: sticky;
+    position: absolute;
     bottom: var(--baseSpacing);
+    left: 50%;
     z-index: 101;
     gap: 10px;
     display: flex;
@@ -8,10 +9,11 @@
     align-items: center;
     width: var(--smWrapperWidth);
     max-width: 100%;
-    margin: var(--smSpacing) auto;
+    margin-bottom: 10px;
     padding: 10px var(--smSpacing);
     border-radius: var(--btnHeight);
     background: var(--baseColor);
     border: 1px solid var(--baseAlt2Color);
     @include shadowize();
+    transform: translateX(-50%);
 }

ui/src/scss/_layout.scss

@@ -308,7 +308,7 @@
     display: block;
     width: 100%;
     flex-grow: 1;
-    padding: calc(var(--baseSpacing) - 5px) var(--baseSpacing);
+    padding: calc(var(--baseSpacing) - 5px) var(--baseSpacing) var(--smSpacing);
 }
 
 .page-footer {
@@ -316,8 +316,7 @@
     gap: 5px;
     align-items: center;
     justify-content: right;
-    text-align: right;
-    padding: 0px var(--baseSpacing) 15px;
+    padding: 0px var(--baseSpacing) var(--smSpacing);
     color: var(--txtDisabledColor);
     font-size: var(--xsFontSize);
     line-height: var(--smLineHeight);
@@ -343,12 +342,13 @@
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    scrollbar-gutter: stable;
     scroll-behavior: smooth;
+    scrollbar-gutter: stable;
     .overlay-active & {
         overflow-y: hidden; // prevent double scrollbar
     }
     &.full-page {
+        scrollbar-gutter: auto;
         background: var(--baseColor);
     }
     &.center-content {
@@ -357,4 +357,12 @@
             align-items: center;
         }
     }
+    &.flex-content {
+        scrollbar-gutter: auto;
+        .page-content {
+            display: flex;
+            min-height: 0;
+            flex-direction: column;
+        }
+    }
 }

ui/src/scss/_searchbar.scss

@@ -6,7 +6,6 @@
     align-items: center;
     min-height: var(--searchHeight);
     width: 100%;
-    flex-grow: 1;
     padding: 5px 7px;
     margin: 0;
     white-space: nowrap;

ui/src/scss/_table.scss

@@ -251,9 +251,11 @@ table {
 .table-wrapper {
     width: auto;
     padding: 0;
+    max-height: 100%;
     max-width: calc(100% + 2*var(--baseSpacing));
     margin-left: calc(var(--baseSpacing) * -1);
     margin-right: calc(var(--baseSpacing) * -1);
+    border-bottom: 1px solid var(--baseAlt2Color);
     .bulk-select-col {
         min-width: 70px;
     }
@@ -266,6 +268,20 @@ table {
             padding-right: calc(var(--baseSpacing) + 3px);
         }
     }
+    thead {
+        position: sticky;
+        top: 0;
+        z-index: 99;
+        transition: box-shadow var(--baseAnimationSpeed);
+    }
+    tbody {
+        position: relative;
+        z-index: 0;
+        tr:last-child td,
+        tr:last-child th {
+            border-bottom: 0;
+        }
+    }
 
     // horizontal scrolling
     .bulk-select-col,
@@ -290,16 +306,21 @@ table {
     }
 
     // scrolling styles
-    &.scrollable {
+    &.h-scroll {
         .bulk-select-col {
             box-shadow: 3px 0px 5px 0px var(--shadowColor);
         }
         .col-type-action {
             box-shadow: -3px 0px 5px 0px var(--shadowColor);
         }
-        &.scroll-start .bulk-select-col,
-        &.scroll-end .col-type-action {
+        &.h-scroll-start .bulk-select-col,
+        &.h-scroll-end .col-type-action {
             box-shadow: none;
         }
     }
+    &.v-scroll:not(.v-scroll-start) {
+        thead {
+            box-shadow: 0px 2px 5px 0px var(--shadowColor);
+        }
+    }
 }