Merge branch 'dev' into QA-Fixes

Author: talhainvenxion

src/ui/layouts/common/SidePopup/index.module.scss

@@ -3,26 +3,37 @@
 .dimmer {
   position: fixed;
   backdrop-filter: blur(4px);
-  // background: #424240;
-  // opacity: 0.5;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   z-index: 9999;
 }
 
+.popupContainer {
+  z-index: 99999;
+  position: relative;
+}
+
+.popupClose {
+  background-color: #fff;
+  border-radius: 100px;
+  position: absolute;
+  top: -2rem;
+  right: 117rem;
+  z-index: 999;
+}
+
 .sidePopup {
   background: #ffffff;
   border-radius: 4px;
   position: fixed;
-  right: 0;
+  right: 2rem;
   bottom: 0;
   top: 13rem;
-  height: 800px;
-  // height: 677px;
-  min-width: 700px;
-  overflow-x: auto;
+  height: 88rem;
+  min-width: 60vw;
+  overflow: auto;
 }
 
 @media (max-width: $md-breakpoint) {
@@ -32,27 +43,9 @@
   }
 }
 
-.popupContainer {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-}
-
-.popupClose {
-  background-color: #fff;
-  border-radius: 100px;
-  position: absolute;
-  top: 15rem;
-  right: 70rem;
-  z-index: 999;
-}
-
-.actionSection { 
-  min-width: 683px;
-  background-color: white;
+.actionSection {
+  width: 60vw;
+  background-color: #ffffff;
   position: fixed;
   bottom: 0;
 }

src/ui/layouts/common/SidePopup/index.tsx

@@ -39,7 +39,7 @@ export const SidePopup: React.FC<{
 
       <Box className={styles.sidePopup}>
         <OutsideClickHandler onOutsideClick={onClose}>
-          <Box paddingLeft="md" paddingTop="sm">
+          <Box paddingTop="sm">
             <iframe
               title="ZenML - Organization Embed"
               style={{ border: '0px', height: '100vh', width: '100%' }}

src/ui/layouts/stackComponents/ConfigureComponent/SidePopup/index.module.scss

@@ -18,7 +18,7 @@
   bottom: 0;
   top: 13rem;
   height: 88rem;
-  min-width: 45vw;
+  min-width: 60vw;
   overflow: auto;
 } 
 
@@ -30,7 +30,7 @@
 }
 
 .actionSection {
-  width: 100%;
+  width: 60vw;
   background-color: #ffffff;
   position: fixed;
   bottom: 0;

src/ui/layouts/stacks/CreateStack/ListForAll/SidePopup/index.module.scss

@@ -3,26 +3,28 @@
 .dimmer {
   position: fixed;
   backdrop-filter: blur(4px);
-  // background: #424240;
-  // opacity: 0.5;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   z-index: 9999;
 }
 
+.popupContainer {
+  z-index: 99999;
+  position: relative;
+}
+
 .sidePopup {
   background: #ffffff;
   border-radius: 4px;
   position: fixed;
-  right: 0;
+  right: 2rem;
   bottom: 0;
   top: 13rem;
-  height: 800px;
-  // height: 677px;
-  min-width: 700px;
-  overflow-x: auto;
+  height: 88rem;
+  min-width: 60vw;
+  overflow: auto;
 }
 
 @media (max-width: $md-breakpoint) {
@@ -32,26 +34,17 @@
   }
 }
 
-.popupContainer {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  z-index: 99999;
-}
-
 .popupClose {
   background-color: #fff;
   border-radius: 100px;
-  position: absolute;
-  top: 15rem;
-  right: 70rem;
-  z-index: 999;
+  position: fixed;
+  top: 17rem;
+  right: 103rem;
+  z-index: 99999999999;
 }
 
 .actionSection { 
-  min-width: 683px;
+  width: 60vw;
   background-color: white;
   position: fixed;
   bottom: 0;