From 252b2a30664fe358f13aa2b1dc68d4601012eb9e Mon Sep 17 00:00:00 2001
From: ilan7empest <therecanbeonly1.1984@gmail.com>
Date: Sun, 5 Nov 2023 19:48:51 +0800
Subject: [PATCH] Fix [Features] incorrect panel view when adding a feature

---
 src/components/FeatureStore/featureStore.scss          |  4 ++++
 src/components/Table/TableView.js                      | 10 +++++-----
 src/components/Table/table.scss                        |  1 -
 .../FeaturesTablePanel/featuresTablePanel.scss         |  9 ++++-----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/FeatureStore/featureStore.scss b/src/components/FeatureStore/featureStore.scss
index da2c4a417..f91104cda 100644
--- 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
index bd711bdde..e6caf4777 100644
--- 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
index 28ac73eb5..46ed56d25 100644
--- 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
index 6f2a96c7e..06f0248c8 100644
--- 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,7 +82,7 @@
     height: unset;
 
     .features-panel__expand-title {
-      margin-left: 40px;
+      margin-left: 45px;
       padding: 15px 0;
       font-weight: bold;
       font-size: 18px;
@@ -89,7 +90,7 @@
 
     .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;
     }
   }