new: Dialog boxes show on top of the screen to account for phone keyb…

…oards

(this should prevent jarring layout shifts)

index.html

@@ -18,19 +18,19 @@
       });
     }
   </script> -->
-	<link rel="manifest" href="manifest.json?v=1703602562278">
+	<link rel="manifest" href="manifest.json?v=1703602562279">
 	<title>Search &bull; Casa Mia</title>
-	<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1703602562278">
+	<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1703602562279">
 	<meta name="theme-color" content="black">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="color-scheme" content="light only">
-	<link rel="stylesheet" href="./style.css?v=1703602562278" />
-	<script src="./index.js?v=1703602562278" type="module"></script>
+	<link rel="stylesheet" href="./style.css?v=1703602562279" />
+	<script src="./index.js?v=1703602562279" type="module"></script>
 	<link rel="preconnect" href="https://raw.githubusercontent.com" crossorigin />
 	<link rel="preconnect" href="https://fonts.bunny.net">
 	<link href="https://fonts.bunny.net/css?family=nanum-brush-script:400|advent-pro:400|ubuntu:300,300i,400,400i,500,500i,700,700i|ubuntu-condensed:400|ubuntu-mono:400,400i,700,700i|vujahday-script:400|are-you-serious:400|alkatra:400|montez:400"
 		  rel="stylesheet" />
-	<link rel="stylesheet" href="./animations.css?v=1703602562278">
+	<link rel="stylesheet" href="./animations.css?v=1703602562279">
 	<link rel="stylesheet" href="./icons.css" />
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>

js_modules/utils/dialog.js

@@ -74,8 +74,8 @@ export const showInputDialog = (
 		const inputFields = document.getElementsByClassName('inputField');
 		let tickBoxField = document.getElementById('tickBoxField');
 		if (tickBoxField) tickBoxField = tickBoxField.ariaChecked;
-
 		inputFields[0].focus();
+		modalContainer.style.paddingBlockStart = '4em';
 
 		const rejectModal = () => {
 			modalCancelButton.removeEventListener('click', rejectModal);

style.css

@@ -1119,8 +1119,10 @@ input::-webkit-search-cancel-button:hover {
 	-webkit-backdrop-filter: blur(2px);
 	z-index: 5;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: center;
+	padding-block-start: 0em;
+	transition: 600ms;
 }
 
 .modal {
@@ -1142,7 +1144,7 @@ input::-webkit-search-cancel-button:hover {
 
 .modalDescription {
 	padding-bottom: 2em;
-	font-size: 0.8em;
+	font-size: 0.9em;
 	font-weight: 100;
 }