Fix Modal Scrolling and layout on mobile

src/routes/Modal.svelte

@@ -82,7 +82,7 @@
 			padding: 1em;
 			box-shadow: 0px 2px 10px $space-black-modal;
 			z-index: 1001;
-            overflow: auto;
+            // overflow: auto;
 		}
 
 		.close-button {

src/routes/modals/dashinit.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/routes/modals/explorecraft.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/routes/modals/lunivity.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/routes/modals/more.svelte

@@ -27,7 +27,7 @@
 		<div class="gallery">
 			<div class="next-icon" />
 		</div>
-		<div>
+		<div class="content">
 			<h1 class="modal-title no-select">All Projects</h1>
 			<p class="modal-title">These are all of my projects, including the ones that didn't fit in the homepage. Take a look!</p>
 			<ul class="item-list">

src/routes/modals/sangefault.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/routes/modals/sangelospace.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/routes/modals/utilityclient.svelte

@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
+		<div class="content">
-			<zero-md class="markdown" src="{projectReadme}">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"

src/styles/mobile/modal-mobile.scss

@@ -9,6 +9,10 @@
             overflow: scroll;
             margin: 0 5% 15% 5%;
 
+            .content {
+                margin-top: 1em;
+            }
+            
             .gallery {
                 display: grid;
                 justify-items: center;

src/styles/modal.scss

@@ -1,15 +1,25 @@
 content {
+	// height: 100%;
 	height: 100%;
+	width: 100%;
 	text-align: left;
+	display: inline-block;
 
 	.parent {
 		display: grid;
+		height: 100%;
+		width: auto;
 		grid-template-columns: auto 1fr;
 		grid-template-rows: auto;
 		grid-column-gap: 0px;
 		grid-row-gap: 0px;
+		margin: 0.5em 4% 0 0.5em;
 		overflow: hidden;
-		margin: 0.5em 5% 6% 0.5em;
+
+		.content {
+			padding: 0 1em 6em 0;
+			overflow: auto;
+		}
 
         .gallery {
             img.project-logo {
@@ -20,7 +30,6 @@ content {
             }
         }
 
-
         img.project-logo:hover {
             box-shadow: 10px 10px 69px -32px rgba(0, 0, 0, 0.5);
             -webkit-box-shadow: 10px 10px 69px -32px rgba(0,0,0,0.5);