From 979c777c64f24aa9dd0a056e20e38d15a15a0b4c Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Fri, 21 Apr 2023 10:12:07 -0700
Subject: [PATCH] fix: On smaller screens max height of image is less

---
 package.json                 | 2 +-
 pnpm-lock.yaml               | 8 ++++----
 src/routes/uses/+page.svelte | 4 ++++
 vite.config.ts               | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a74ce95..4775638 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify-icons/material-symbols": "^1.2.37",
+		"@iconify-icons/material-symbols": "^1.2.38",
 		"@iconify-icons/mdi": "^1.2.44",
 		"@iconify-icons/radix-icons": "^1.2.8",
 		"@iconify-icons/simple-icons": "^1.2.48",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 203819d..89df540 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,8 +13,8 @@ dependencies:
 
 devDependencies:
   '@iconify-icons/material-symbols':
-    specifier: ^1.2.37
-    version: 1.2.37
+    specifier: ^1.2.38
+    version: 1.2.38
   '@iconify-icons/mdi':
     specifier: ^1.2.44
     version: 1.2.44
@@ -930,8 +930,8 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify-icons/material-symbols@1.2.37:
-    resolution: {integrity: sha512-EDrnBXdj2Iem9pR0sT8Y/0m7ClP0ygiDuBdZn31wbfjRyEdWFU+yK98lOXO1j+DFUYuJXAe06NJ3GRfrJ0m5WA==}
+  /@iconify-icons/material-symbols@1.2.38:
+    resolution: {integrity: sha512-w2hv944ibUojEzPvDuVGuFtxYDyQpy1PnKj+Vm5eQ2fy8a26UBzjB0l3eHd50DIZVZv80b8oFPec1PCrh8rutA==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: true
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index b824677..3d734d8 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -46,5 +46,9 @@
 		@media(max-width: 800px) {
 			max-height: 350px;
 		}
+
+		@media(max-width: 500px) {
+			max-height: 300px;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 7b6c76b..342a935 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,7 @@ const config: UserConfig = {
 			// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
 			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
 			defaultDirectives: () =>
-				new URLSearchParams('?width=320;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
+				new URLSearchParams('?width=300;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
 		})
 	],
 	test: {