Fix [Features] incorrect panel view when adding a feature

mlrun · Nov 5, 2023 · 252b2a3 · 252b2a3
1 parent 6243477
commit 252b2a3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/src/components/FeatureStore/featureStore.scss b/src/components/FeatureStore/featureStore.scss
@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+
+  .table {
+    overflow-y: auto;
+  }
 }
diff --git a/src/components/Table/TableView.js b/src/components/Table/TableView.js
@@ -248,6 +248,11 @@ const TableView = ({
             )}
             {!pageData.tableHeaders && <tbody className="table-body">{children}</tbody>}
           </table>
+          {isTablePanelOpen && (
+            <div className="table__panel-container" ref={tablePanelRef}>
+              <div className="table__panel">{pageData.tablePanel}</div>
+            </div>
+          )}
         </div>
         {!isEmpty(selectedItem) && (
           <Details
@@ -264,11 +269,6 @@ const TableView = ({
             tab={tab}
           />
         )}
-        {isTablePanelOpen && (
-          <div className="table__panel-container" ref={tablePanelRef}>
-            <div className="table__panel">{pageData.tablePanel}</div>
-          </div>
-        )}
       </div>
     </div>
   )

diff --git a/src/components/Table/table.scss b/src/components/Table/table.scss
@@ -31,7 +31,6 @@
       right: 0;
       z-index: 2;
       display: flex;
-      flex-direction: column;
       width: 100%;
       height: 100%;
       overflow-y: auto;

diff --git a/src/elements/FeaturesTablePanel/featuresTablePanel.scss b/src/elements/FeaturesTablePanel/featuresTablePanel.scss
@@ -68,6 +68,7 @@
     width: 100%;
     padding: 10px 15px;
     background-color: $white;
+    z-index: 3;
   }
 
   .features-panel__divider {
@@ -81,15 +82,15 @@
     height: unset;
 
     .features-panel__expand-title {
-      margin-left: 40px;
+      margin-left: 45px;
       padding: 15px 0;
       font-weight: bold;
       font-size: 18px;
     }
 
     .features-panel__expand-content {
       display: none;
-      margin: 10px 15px 10px 40px;
+      margin: 10px 15px 10px 45px;
     }
 
     &.open {
@@ -110,10 +111,8 @@
 
     .features-panel__expand-icon {
       position: absolute;
-      top: 10px;
+      top: 8px;
       left: 0;
-      width: 30px;
-      height: 30px;
     }
   }