Fix spacing in collection tree

ComPlat · Nov 4, 2024 · a1b459c · a1b459c
1 parent c06c884
commit a1b459c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/app/assets/stylesheets/components/CollectionSubtree.scss b/app/assets/stylesheets/components/CollectionSubtree.scss
@@ -2,17 +2,16 @@
   @extend .d-flex;
   @extend .flex-column;
   @extend .gap-1;
+  @extend .ms-3;
+  @extend .pt-1;
   &_container {
-    @extend .d-flex;
-    @extend .flex-column;
-    @extend .gap-1;
+    @extend .tree-view;
     @extend .overflow-y-auto;
-    @extend .ms-3;
     @extend .my-n1;
-    @extend .py-1;
+    @extend .pe-1;
+    @extend .pb-1;
     --scrollbar-width: 8px;
     --mask-height: 0.25rem;
-    padding-right: calc(var(--scrollbar-width) + 0.25rem);
     --mask-image-content: linear-gradient(
       to bottom,
       transparent,
@@ -42,8 +41,7 @@
     @extend .rounded;
 
     &--selected {
-      background: $primary;
-      color: $white;
+      @extend .text-bg-primary;
     }
   }
 

diff --git a/app/packs/src/apps/mydb/collections/CollectionSubtree.js b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
@@ -140,7 +140,7 @@ export default class CollectionSubtree extends React.Component {
     const showGatePushButton = root && root.is_locked && root.label === 'chemotion-repository.net';
 
     return (
-      <div className="tree-view" key={root.id}>
+      <div key={root.id}>
         <div
           id={`tree-id-${root.label}`}
           className={`tree-view_item ${selected ? 'tree-view_item--selected' : ''}`}
@@ -175,7 +175,7 @@ export default class CollectionSubtree extends React.Component {
           )}
         </div>
         {visible && (
-          <div className="ms-3">
+          <div className="tree-view">
             {children.map((child) => (
               <CollectionSubtree key={child.id} root={child} isRemote={isRemote} />
             ))}