Improve styling of mobile preview

Author: frozenhelium

manager-dashboard/app/components/MobilePreview/index.tsx

@@ -17,6 +17,7 @@ interface Props {
     popupIcons?: React.ReactNode;
     contentClassName?: string;
     popupClassName?: string;
+    popupVerticalPosition?: 'top' | 'center';
 }
 
 function MobilePreview(props: Props) {
@@ -31,6 +32,7 @@ function MobilePreview(props: Props) {
         popupIcons,
         contentClassName,
         popupClassName,
+        popupVerticalPosition,
     } = props;
 
     return (
@@ -57,7 +59,13 @@ function MobilePreview(props: Props) {
             </div>
             <div className={styles.contentContainer}>
                 {(popupTitle || popupDescription || popupIcons) && (
-                    <div className={_cs(styles.popup, popupClassName)}>
+                    <div
+                        className={_cs(
+                            styles.popup,
+                            popupClassName,
+                            popupVerticalPosition === 'center' && styles.verticallyCentered,
+                        )}
+                    >
                         <div className={styles.details}>
                             <div className={styles.popupTitle}>
                                 {popupTitle}

manager-dashboard/app/components/MobilePreview/styles.css

@@ -5,7 +5,7 @@
     border-radius: var(--radius-card-border);
     background-color: var(--color-black);
     padding: var(--spacing-small) 0;
-    width: var(--width-mobile-preview);
+    width: calc(var(--width-mobile-preview) + var(--width-separator-mobile-preview));
     height: var(--height-mobile-preview);
     color: var(--color-text-on-dark);
 
@@ -69,6 +69,11 @@
             width: calc(100% - 2 * var(--spacing-small));
             color: var(--color-text);
 
+            &.vertically-centered {
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
             .details {
                 flex-grow: 1;
 

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/index.tsx

@@ -53,7 +53,7 @@ export default function ChangeDetectionGeoJsonPreview(props: Props) {
             popupTitle={previewPopUp?.title || 'Title'}
             popupDescription={previewPopUp?.description || 'Description'}
             contentClassName={styles.content}
-            popupClassName={styles.popup}
+            popupVerticalPosition="center"
         >
             <GeoJsonPreview
                 className={styles.mapPreview}

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ChangeDetectionGeoJsonPreview/styles.css

@@ -11,9 +11,4 @@
             height: var(--height-mobile-preview-change-detection-content);
         }
     }
-
-    .popup {
-        top: 50%!important;
-        transform: translateY(-50%);
-    }
 }