[#399] Fix case sidebar overflow height

akvo · Jan 27, 2025 · 49e9b5f · 49e9b5f
1 parent fe69c85
commit 49e9b5f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 57 deletions.
diff --git a/frontend/src/pages/cases/layout/CaseWrapper.js b/frontend/src/pages/cases/layout/CaseWrapper.js
@@ -58,15 +58,17 @@ const CaseSidebar = ({ step, caseId }) => {
   )?.value;
 
   return (
-    <Steps
-      direction="vertical"
-      items={sidebarItems}
-      className="case-step-wrapper"
-      onChange={(val) =>
-        navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`)
-      }
-      current={findStepPathValue ? findStepPathValue - 1 : 1}
-    />
+    <div className="case-step-container">
+      <Steps
+        direction="vertical"
+        items={sidebarItems}
+        className="case-step-wrapper"
+        onChange={(val) =>
+          navigate(`/case/${caseId}/${stepPath[`step${val + 1}`].label}`)
+        }
+        current={findStepPathValue ? findStepPathValue - 1 : 1}
+      />
+    </div>
   );
 };
 

diff --git a/frontend/src/pages/cases/layout/case-wrapper.scss b/frontend/src/pages/cases/layout/case-wrapper.scss
@@ -11,71 +11,73 @@
     z-index: 2;
     overflow: auto;
 
-    .case-step-wrapper {
+    .case-step-container {
       min-height: 100vh;
-      padding-bottom: 75px !important;
+      padding-bottom: 75px;
 
-      .ant-steps-item {
-        // not active
-        .ant-steps-item-tail::after {
-          border: 1px solid #e1e0da;
-        }
+      .case-step-wrapper {
+        .ant-steps-item {
+          // not active
+          .ant-steps-item-tail::after {
+            border: 1px solid #e1e0da;
+          }
 
-        .ant-steps-item-icon {
-          border: 1px solid #e3e3e3;
+          .ant-steps-item-icon {
+            border: 1px solid #e3e3e3;
+
+            .ant-steps-icon {
+              color: #979797;
+              text-align: center;
+              font-family: "RocGrotesk";
+              font-size: 14px;
+              font-style: normal;
+              font-weight: 700;
+              line-height: 24px;
+            }
+          }
 
-          .ant-steps-icon {
-            color: #979797;
-            text-align: center;
+          .ant-steps-item-title {
             font-family: "RocGrotesk";
             font-size: 14px;
             font-style: normal;
             font-weight: 700;
             line-height: 24px;
           }
-        }
-
-        .ant-steps-item-title {
-          font-family: "RocGrotesk";
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 24px;
-        }
-        .ant-steps-item-description {
-          color: #475467;
-          font-family: "TabletGothic";
-          font-size: 13px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 24px;
-        }
-
-        // when active
-        &.ant-steps-item-active {
-          .ant-steps-item-tail::after {
-            border: 1px solid $primary-color;
+          .ant-steps-item-description {
+            color: #475467;
+            font-family: "TabletGothic";
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 24px;
           }
 
-          .ant-steps-item-icon {
-            border: 1px solid $primary-color;
-            box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1);
-            background: #eaf2f2;
+          // when active
+          &.ant-steps-item-active {
+            .ant-steps-item-tail::after {
+              border: 1px solid $primary-color;
+            }
 
-            .ant-steps-icon {
-              color: $primary-color;
+            .ant-steps-item-icon {
+              border: 1px solid $primary-color;
+              box-shadow: 0 0 2px 4px rgba(203, 244, 220, 1);
+              background: #eaf2f2;
+
+              .ant-steps-icon {
+                color: $primary-color;
+              }
             }
           }
-        }
 
-        // when finished
-        &.ant-steps-item-finish {
-          .ant-steps-item-icon {
-            border: 1px solid #48d985;
-            background: #48d985;
+          // when finished
+          &.ant-steps-item-finish {
+            .ant-steps-item-icon {
+              border: 1px solid #48d985;
+              background: #48d985;
 
-            .ant-steps-icon {
-              color: #fff;
+              .ant-steps-icon {
+                color: #fff;
+              }
             }
           }
         }