From fc366a077c11e9bcdd7dafe7cbff4c7b165adfd6 Mon Sep 17 00:00:00 2001
From: Steph Ango <10565871+kepano@users.noreply.github.com>
Date: Tue, 24 Sep 2024 15:55:08 -0700
Subject: [PATCH] Mobile CSS

---
 src/style.scss             |  9 ++-------
 src/styles/_variables.scss |  6 ++++++
 src/styles/buttons.scss    |  4 ++--
 src/styles/icons.scss      | 10 +++++-----
 src/styles/mobile.scss     | 25 +++++++++++++++++++++++++
 src/styles/popup.scss      |  6 +++---
 src/styles/settings.scss   | 18 +++++++++++++++++-
 7 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/mobile.scss

diff --git a/src/style.scss b/src/style.scss
index 437599b9..a0297046 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -9,13 +9,6 @@ html {
 	font-size: 16px;
 }
 
-.is-mobile-safari {
-	font-size: 18px;
-}
-.is-firefox-mobile {
-	font-size: 20px;
-}
-
 body {
 	padding: 0;
 	margin: 0;
@@ -25,6 +18,8 @@ body {
 	font-size: var(--font-ui-medium);
 }
 
+@import 'styles/mobile';
+
 @import 'styles/buttons';
 @import 'styles/dragging';
 @import 'styles/dropdowns';
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 84d17875..67275437 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,9 @@
 :root {
+	--safe-area-inset-top: env(safe-area-inset-top);
+	--safe-area-inset-bottom: env(safe-area-inset-bottom);
+	--safe-area-inset-left: env(safe-area-inset-left);
+	--safe-area-inset-right: env(safe-area-inset-right);
+
 	--accent-h: 258;
 	--accent-s: 88%;
 	--accent-l: 66%;
@@ -24,6 +29,7 @@
 	--interactive-accent: var(--color-accent-1);
 	--interactive-accent-hover: var(--color-accent-2);
 
+	--icon-size: 1rem;
 	--input-height: 1.875rem;
 
 	--radius-s: 4px;
diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss
index e2b8fbea..4166db6c 100644
--- a/src/styles/buttons.scss
+++ b/src/styles/buttons.scss
@@ -43,8 +43,8 @@ button {
 
 .clickable-icon,
 button.clickable-icon {
-	width: 28px;
-	height: 28px;
+	width: 1.75rem;
+	height: 1.75rem;
 	display: flex;
 	padding: 0px 4px;
 	background-color: transparent;
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 5030d166..31fa1966 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -1,17 +1,17 @@
 svg.lucide-icon {
 	stroke-width: 1.75px;
-	width: 16px;
-	height: 16px;
+	width: var(--icon-size);
+	height: var(--icon-size);
 }
 .metadata-property-icon {
 	margin-inline-start: 4px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	min-width: 16px;
+	min-width: var(--icon-size);
 	color: var(--text-muted);
 	svg {
-		width: 16px;
-		height: 16px;
+		width: var(--icon-size);
+		height: var(--icon-size);
 	}
 }
\ No newline at end of file
diff --git a/src/styles/mobile.scss b/src/styles/mobile.scss
new file mode 100644
index 00000000..081a391e
--- /dev/null
+++ b/src/styles/mobile.scss
@@ -0,0 +1,25 @@
+.is-mobile-safari {
+	font-size: 18px;
+}
+.is-firefox-mobile {
+	font-size: 20px;
+}
+
+.is-mobile-safari,
+.is-firefox-mobile {
+	height: 100%;
+	--icon-size: 1rem;
+	--input-shadow: none;
+	--input-shadow-hover: none;
+
+	button {
+		--input-height: 2.5rem;
+		border-radius: 2rem;
+		border: 0;
+		box-shadow: none;
+	}
+
+	a, button, label, input, textarea, select {
+		-webkit-tap-highlight-color: transparent;
+	}
+}
\ No newline at end of file
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index 493eee07..8f72af22 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -229,6 +229,7 @@
 	display: flex;
 	flex-direction: row;
 	padding-top: 4px;
+	align-items: center;
 }
 
 #template-container {
@@ -266,16 +267,15 @@
 #popup-actions {
 	padding-right: 4px;
 	z-index: 100;
-	align-self: flex-end;
+	justify-self: flex-end;
+	align-items: center;
 	margin-left: auto;
 	user-select: none;
 	-webkit-user-select: none;
 	background-color: var(--background-primary);
 	display: flex;
 	flex-direction: row;
-	gap: 2px;
 	.clickable-icon {
-		width: 24px;
 		border-radius: var(--radius-s);
 		user-select: none;
 		-webkit-user-select: none;
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index a5a181df..e0c4a00f 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -322,8 +322,22 @@
 	}
 }
 
+:root {
+	--settings-section-height-mobile: calc(100vh - var(--safe-area-inset-bottom) - 48px);
+}
+
+@supports (height: 100dvh) {
+	.is-mobile-safari {
+		--settings-section-height-mobile: calc(100dvh - 48px);
+	}
+}
+
 @media (max-width: 768px) {
 	#settings {
+		#settings-container {
+			min-height: 100vh;
+			overflow: hidden;
+		}
 		#navbar {
 			padding: 0 24px;
 			width: 100%;
@@ -338,10 +352,12 @@
 		}
 		.settings-section {
 			margin: 0;
-			padding: 24px;
+			padding: 24px 24px 48px;
+			height: var(--settings-section-height-mobile);
 			overflow: scroll;
 			-webkit-overflow-scrolling: touch;
 		}
+
 		#content {
 			display: flex;
 			flex-direction: column;