Fixed landing page being broken in mobile and merged popup styling

src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx

@@ -140,18 +140,7 @@ export default function EquipmentInstancesListPage() {
         onClose={() => SetEditModalOpen(false)}
         modal
         position={"top center"}
-        contentStyle={{
+        contentStyle={styles.popup_center}
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          flexWrap: "wrap",
-        }}
       >
         <EditItemModal id={selectedItem} setOpen={SetEditModalOpen} />
       </Popup>

src/Pages/EquipmentListPage/EquipmentListPage.tsx

@@ -140,18 +140,7 @@ export default function EquipmentListPage() {
         onClose={() => SetEditModalOpen(false)}
         modal
         position={"top center"}
-        contentStyle={{
+        contentStyle={styles.popup_center}
-          width: "32rem",
-          borderRadius: 16,
-          borderColor: "grey",
-          borderStyle: "solid",
-          borderWidth: 1,
-          padding: 16,
-          alignContent: "center",
-          justifyContent: "center",
-          textAlign: "center",
-          flexWrap: "wrap",
-        }}
       >
         <EditSKUModal id={selectedItem} setOpen={SetEditModalOpen} />
       </Popup>

src/Pages/LandingPage/LandingPage.tsx

@@ -39,14 +39,11 @@ export default function LandingPage() {
           flexWrap: "wrap",
         }}
       >
-        <div
+        <div style={{ height: "auto", flex: 1, flexWrap: "wrap" }}>
-          style={{ maxWidth: "50%", height: "auto", flex: 1, flexWrap: "wrap" }}
+          <img style={{ width: "16rem", height: "auto" }} src={citc_logo} />
-        >
-          <img style={{ maxWidth: "50%", height: "auto" }} src={citc_logo} />
         </div>
         <div
           style={{
-            maxWidth: "50%",
             height: "auto",
             flex: 1,
             flexWrap: "wrap",

src/styles.tsx

@@ -75,6 +75,18 @@ const styles: { [key: string]: React.CSSProperties } = {
     minWidth: "100%",
     marginTop: 16,
   },
+  popup_center: {
+    width: "32rem",
+    borderRadius: 16,
+    borderColor: "grey",
+    borderStyle: "solid",
+    borderWidth: 1,
+    padding: 16,
+    alignContent: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    overflowY: "scroll",
+  },
 };
 
 export default styles;