From a3688fe642088efe7c7a01e9220b8f5668c8ae90 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Tue, 10 Jan 2023 22:06:27 -0500
Subject: [PATCH] chore(web): modal max-width to 95 viewport width (#1297)

---
 web/src/lib/components/admin-page/delete-confirm-dialoge.svelte | 2 +-
 web/src/lib/components/admin-page/restore-dialoge.svelte        | 2 +-
 web/src/lib/components/forms/admin-registration-form.svelte     | 2 +-
 web/src/lib/components/forms/api-key-form.svelte                | 2 +-
 web/src/lib/components/forms/api-key-secret.svelte              | 2 +-
 web/src/lib/components/forms/change-password-form.svelte        | 2 +-
 web/src/lib/components/forms/create-user-form.svelte            | 2 +-
 web/src/lib/components/forms/edit-user-form.svelte              | 2 +-
 web/src/lib/components/forms/login-form.svelte                  | 2 +-
 .../lib/components/shared-components/announcement-box.svelte    | 2 +-
 .../lib/components/shared-components/confirm-dialogue.svelte    | 2 +-
 web/src/routes/+error.svelte                                    | 2 +-
 web/src/routes/admin/user-management/+page.svelte               | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
index 8d9b4625cfca1..c9d7555ec9da5 100644
--- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
+++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div
 		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/lib/components/admin-page/restore-dialoge.svelte b/web/src/lib/components/admin-page/restore-dialoge.svelte
index 524ff9e47e915..2cdfe01955e35 100644
--- a/web/src/lib/components/admin-page/restore-dialoge.svelte
+++ b/web/src/lib/components/admin-page/restore-dialoge.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div
 		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte
index ef8ae5e155dd1..10cf620a3a566 100644
--- a/web/src/lib/components/forms/admin-registration-form.svelte
+++ b/web/src/lib/components/forms/admin-registration-form.svelte
@@ -52,7 +52,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
diff --git a/web/src/lib/components/forms/api-key-form.svelte b/web/src/lib/components/forms/api-key-form.svelte
index 23a0c90af8b02..068e7bcfe53af 100644
--- a/web/src/lib/components/forms/api-key-form.svelte
+++ b/web/src/lib/components/forms/api-key-form.svelte
@@ -16,7 +16,7 @@
 
 <FullScreenModal on:clickOutside={() => handleCancel()}>
 	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 	>
 		<div
 			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte
index 7a37bb6c60203..5c22eaf4651c0 100644
--- a/web/src/lib/components/forms/api-key-secret.svelte
+++ b/web/src/lib/components/forms/api-key-secret.svelte
@@ -27,7 +27,7 @@
 
 <FullScreenModal>
 	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 	>
 		<div
 			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte
index f8036af4fd70b..46cc15db8ca35 100644
--- a/web/src/lib/components/forms/change-password-form.svelte
+++ b/web/src/lib/components/forms/change-password-form.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
index d7ebac843e794..9f1a885d0e9d8 100644
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index ac214867ca00a..e0161dfb34ae3 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -66,7 +66,7 @@
 </script>
 
 <div
-	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+	class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 >
 	<div
 		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
index 8d7e7e723dc4f..07ebf88c7695b 100644
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -72,7 +72,7 @@
 </script>
 
 <div
-	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-md py-8"
+	class="border bg-white dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-md py-8"
 >
 	<div class="flex flex-col place-items-center place-content-center gap-4 px-4">
 		<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
diff --git a/web/src/lib/components/shared-components/announcement-box.svelte b/web/src/lib/components/shared-components/announcement-box.svelte
index eb2c34e367e10..e6f378909afcd 100644
--- a/web/src/lib/components/shared-components/announcement-box.svelte
+++ b/web/src/lib/components/shared-components/announcement-box.svelte
@@ -15,7 +15,7 @@
 
 <div class="absolute top-0 left-0 w-screen h-screen">
 	<FullScreenModal on:clickOutside={() => console.log('Click outside')}>
-		<div class="max-w-[500px] z-[99999] border bg-immich-bg p-10 rounded-xl">
+		<div class="max-w-[500px] max-w-[95vw] z-[99999] border bg-immich-bg p-10 rounded-xl">
 			<p class="text-2xl ">🎉 NEW VERSION AVAILABLE 🎉</p>
 			<br />
 
diff --git a/web/src/lib/components/shared-components/confirm-dialogue.svelte b/web/src/lib/components/shared-components/confirm-dialogue.svelte
index 1513f41e0ba84..793ccf3011fd1 100644
--- a/web/src/lib/components/shared-components/confirm-dialogue.svelte
+++ b/web/src/lib/components/shared-components/confirm-dialogue.svelte
@@ -14,7 +14,7 @@
 
 <FullScreenModal on:clickOutside={() => handleCancel()}>
 	<div
-		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] rounded-3xl py-8 dark:text-immich-dark-fg"
+		class="border bg-immich-bg dark:bg-immich-dark-gray dark:border-immich-dark-gray p-4 shadow-sm w-[500px] max-w-[95vw] rounded-3xl py-8 dark:text-immich-dark-fg"
 	>
 		<div
 			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index d988c6af9b6d2..902d3218f86b0 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="h-screen w-screen  flex place-items-center place-content-center flex-col">
-	<div class="min-w-[500px]  bg-gray-300 rounded-2xl my-4 p-4">
+	<div class="min-w-[500px] max-w-[95vw]  bg-gray-300 rounded-2xl my-4 p-4">
 		<code class="text-xs text-red-500">Error code {$page.status}</code>
 		<br />
 		<code class="text-sm">
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index 6efc6c696647d..8c3e947b1a59f 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -144,7 +144,7 @@
 
 	{#if shouldShowInfoPanel}
 		<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
-			<div class="border bg-white shadow-sm w-[500px] rounded-3xl p-8 text-sm">
+			<div class="border bg-white shadow-sm w-[500px] max-w-[95vw] rounded-3xl p-8 text-sm">
 				<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
 
 				<p>