From e0c818b68b28915707c8ba7a0d37b4ae0f2a6e2e Mon Sep 17 00:00:00 2001
From: Aadi Desai <21363892+supleed2@users.noreply.github.com>
Date: Sun, 12 Nov 2023 22:30:32 +0000
Subject: [PATCH] Add small-screen view: `@media (width < 600px)`

Also add dynamic search box size
Also remove note about mobile view issues
---
 index.html |  3 ---
 styles.css | 44 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 8f2b553..d00d119 100644
--- a/index.html
+++ b/index.html
@@ -115,9 +115,6 @@
 	<div class="options-description">
 		<p>Use the default gateway (checked and updated if the current default gateway stops working in the future),
 			select a specific gateway, or use one of the extra features like Opensea or Block Explorer linking</p>
-		<br>
-		<p><b>Note:</b> the formatting of this page is currently <u>very</u> broken on mobile, and is being actively
-			worked on.</p>
 	</div>
 	<br>
 	<a href="#">
diff --git a/styles.css b/styles.css
index 2ce6677..ffaa47a 100644
--- a/styles.css
+++ b/styles.css
@@ -120,8 +120,7 @@ body::-webkit-scrollbar {
 	font-family: 'JetBrains Mono', monospace;
 	background-color: var(--input-box-bg-colour);
 	color: var(--accent-colour);
-	width: calc(300px - var(--input-prefix-width));
-	/* TODO: make dynamic */
+	width: calc(max(300px, 50vw) - var(--input-prefix-width));
 	padding: 8px;
 	font-size: 16px;
 	border: none;
@@ -288,4 +287,43 @@ body::-webkit-scrollbar {
 	margin: 0px 10%;
 }
 
-/* TODO: @media (width < 600px) { stuff to change format of input box } */
\ No newline at end of file
+@media screen and (width < 450px) {
+	.scroll-button {
+		display: none;
+	}
+
+	.input-container {
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: calc(100% - 50px);
+	}
+
+	.input-prefix {
+		border-right: none;
+		border-bottom: var(--input-box-border);
+		align-items: center;
+		width: 100%;
+		border-radius: var(--input-box-border-radius) var(--input-box-border-radius) 0 0;
+		justify-content: center;
+	}
+
+	.user-input {
+		width: 100%;
+		text-align: center;
+	}
+
+	.input-button {
+		border-top: var(--input-box-border);
+		width: 50%;
+	}
+
+	.last-button {
+		border-left: var(--input-box-border);
+		border-radius: 0 0 var(--input-box-border-radius) 0;
+	}
+
+	#copy-button {
+		border-left: none;
+		border-radius: 0 0 0 var(--input-box-border-radius);
+	}
+}
\ No newline at end of file