Fixed broken vh sizes for some components

src/Components/AppIcon/AppIcon.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 export interface props {
-  size: string;
+  size: number;
   color: string;
 }
 
@@ -10,8 +10,8 @@ export default function AppIcon(props: props) {
     <>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={props.size}
-        height={props.size}
+        width={props.size + "px"}
+        height={props.size + "px"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}

src/Components/Header/Header.tsx

@@ -26,7 +26,7 @@ export default function Header() {
             ...{ flex: 6 },
           }}
         >
-          <AppIcon size="8vh" color="white" />
+          <AppIcon size={48} color="white" />
           <p style={styles.text_medium}>Clip Notes</p>
         </div>
         <div

src/Components/HomeIcon/HomeIcon.tsx

@@ -15,8 +15,8 @@ export default function HomeIcon(props: props) {
       style={{
         backgroundColor: "#005997",
         borderRadius: 16,
-        width: props.size || 32,
-        height: props.size || 32,
+        width: props.size + "px",
+        height: props.size + "px",
         margin: 4,
         alignContent: "center",
         alignItems: "center",
@@ -25,8 +25,8 @@ export default function HomeIcon(props: props) {
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={props.size - 4}
-        height={props.size - 4}
+        width={props.size - 4 + "px"}
+        height={props.size - 4 + "px"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}

src/styles.tsx

@@ -13,7 +13,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     position: "sticky",
     backgroundColor: "#0087e4",
     margin: "2vh",
-    height: "8vh",
+    height: "32px",
     padding: 8,
     borderRadius: 4,
   },
@@ -65,7 +65,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     borderColor: "#00293e",
     outline: "none",
     color: "white",
-    height: "3vh",
+    height: "16px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -79,7 +79,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: "white",
     height: "100%",
     width: "100%",
-    maxHeight: "100vh",
+    minWidth: "100%",
+    maxHeight: "200px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -97,7 +98,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignSelf: "center",
     display: "flex",
     flexDirection: "row",
-    width: "256x",
+    width: "256px",
     marginTop: 4,
     marginBottom: 4,
   },