From 9bcdba5fbd7ba6e245ed44a64a4548b5a9458306 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Tue, 30 Jan 2024 12:56:28 +0100
Subject: [PATCH] Fix Modal Scrolling and layout on mobile

---
 src/routes/Modal.svelte                |  2 +-
 src/routes/modals/dashinit.svelte      |  4 ++--
 src/routes/modals/explorecraft.svelte  |  4 ++--
 src/routes/modals/lunivity.svelte      |  4 ++--
 src/routes/modals/more.svelte          |  2 +-
 src/routes/modals/sangefault.svelte    |  4 ++--
 src/routes/modals/sangelospace.svelte  |  4 ++--
 src/routes/modals/utilityclient.svelte |  4 ++--
 src/styles/mobile/modal-mobile.scss    |  4 ++++
 src/styles/modal.scss                  | 13 +++++++++++--
 10 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/routes/Modal.svelte b/src/routes/Modal.svelte
index 3613230..63c4de8 100644
--- a/src/routes/Modal.svelte
+++ b/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 {
diff --git a/src/routes/modals/dashinit.svelte b/src/routes/modals/dashinit.svelte
index 11d18d1..e0e8cae 100644
--- a/src/routes/modals/dashinit.svelte
+++ b/src/routes/modals/dashinit.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/routes/modals/explorecraft.svelte b/src/routes/modals/explorecraft.svelte
index 90575a0..d13f66c 100644
--- a/src/routes/modals/explorecraft.svelte
+++ b/src/routes/modals/explorecraft.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/routes/modals/lunivity.svelte b/src/routes/modals/lunivity.svelte
index 78748d4..1188d93 100644
--- a/src/routes/modals/lunivity.svelte
+++ b/src/routes/modals/lunivity.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/routes/modals/more.svelte b/src/routes/modals/more.svelte
index b36e4f9..246408d 100644
--- a/src/routes/modals/more.svelte
+++ b/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">
diff --git a/src/routes/modals/sangefault.svelte b/src/routes/modals/sangefault.svelte
index cd47416..2fa4f13 100644
--- a/src/routes/modals/sangefault.svelte
+++ b/src/routes/modals/sangefault.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/routes/modals/sangelospace.svelte b/src/routes/modals/sangelospace.svelte
index 8f37f3f..29362d0 100644
--- a/src/routes/modals/sangelospace.svelte
+++ b/src/routes/modals/sangelospace.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/routes/modals/utilityclient.svelte b/src/routes/modals/utilityclient.svelte
index 4983208..249e425 100644
--- a/src/routes/modals/utilityclient.svelte
+++ b/src/routes/modals/utilityclient.svelte
@@ -10,8 +10,8 @@
         <div class="gallery">
             <img src="{projectLogo}" class="project-logo" alt="Project Logo" />
 		</div>
-		<div>
-			<zero-md class="markdown" src="{projectReadme}">
+		<div class="content">
+			<zero-md src="{projectReadme}">
 				<template>
                     <link
                         rel="stylesheet"
diff --git a/src/styles/mobile/modal-mobile.scss b/src/styles/mobile/modal-mobile.scss
index c7be02a..3c6320c 100644
--- a/src/styles/mobile/modal-mobile.scss
+++ b/src/styles/mobile/modal-mobile.scss
@@ -8,6 +8,10 @@
 			grid-row-gap: 0px;
             overflow: scroll;
             margin: 0 5% 15% 5%;
+
+            .content {
+                margin-top: 1em;
+            }
             
             .gallery {
                 display: grid;
diff --git a/src/styles/modal.scss b/src/styles/modal.scss
index b39169c..0b7fb6b 100644
--- a/src/styles/modal.scss
+++ b/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);