improve(ux): make plugins list container netsted scrolling

package.json

@@ -134,7 +134,7 @@
         "react-textarea-autosize": "8.3.3",
         "react-tippy": "1.4.0",
         "react-transition-group": "4.3.0",
-        "reakit": "1.3.11",
+        "react-window": "1.8.7",
         "remove-accents": "0.4.2",
         "sanitize-filename": "1.6.3",
         "send-intent": "3.0.11",

src/main/frontend/components/plugins.cljs

@@ -646,7 +646,7 @@
        [:p.flex.justify-center.pt-20.opacity-50 (svg/offline 30)]
 
        @*fetching
-       [:p.flex.justify-center.pt-20 svg/loading]
+       [:p.flex.justify-center.py-20 svg/loading]
 
        @*error
        [:p.flex.justify-center.pt-20.opacity-50 "Remote error: " (.-message @*error)]
@@ -655,6 +655,7 @@
        [:div.cp__plugins-marketplace-cnt
         {:class (util/classnames [{:has-installing (boolean installing)}])}
         [:div.cp__plugins-item-lists.grid-cols-1.md:grid-cols-2.lg:grid-cols-3
+         ;; items list
          (for [item sorted-pkgs]
            (rum/with-key
              (let [pid  (keyword (:id item))
@@ -1064,7 +1065,8 @@
   []
   (state/set-modal!
    (fn [_close!]
-     (plugins-page))))
+     (plugins-page))
+   {:label "plugins-dashboard"}))
 
 (defn open-waiting-updates-modal!
   []

src/main/frontend/components/plugins.css

@@ -50,6 +50,10 @@
       }
     }
 
+    .panels {
+      margin: 0 -32px -24px;
+    }
+
     .secondary-tabs {
       button {
         margin-right: 5px;
@@ -67,6 +71,8 @@
     }
 
     .control-tabs {
+      @apply px-6;
+
       .ti, .tie {
         margin-right: 4px;
       }
@@ -92,7 +98,7 @@
       &.contribute {
         position: absolute;
         top: -46px;
-        right: 0;
+        right: 20px;
         background: transparent;
         font-size: 12px;
         opacity: .8;
@@ -159,12 +165,10 @@
   }
 
   &-installed {
-    min-height: 60vh;
     padding-top: 5px;
   }
 
   &-marketplace {
-    min-height: 60vh;
     padding-top: 5px;
 
     &.has-installing {
@@ -177,11 +181,14 @@
   }
 
   &-item-lists {
-    @apply w-full grid grid-flow-row gap-3 pt-1;
+    @apply w-full grid grid-flow-row gap-3 pt-2 px-6 pb-8;
+
+    max-height: 56vh;
+    overflow-y: auto;
   }
 
   &-item-card {
-    @apply flex py-3 px-1 rounded-md;
+    @apply flex py-3 px-1 rounded-md border;
 
     background-color: var(--ls-secondary-background-color);
     height: 150px;
@@ -859,6 +866,12 @@ html[data-theme='dark'] {
   }
 }
 
+.ui__modal[label=plugins-dashboard] {
+  .panel-content {
+    overflow-y: hidden;
+  }
+}
+
 body[data-page=plugins] {
   .cp__sidebar-main-content {
     max-width: 1280px !important;