mirror of
				https://github.com/immich-app/immich.git
				synced 2025-11-03 19:29:32 -05:00 
			
		
		
		
	chore(web): modal max-width to 95 viewport width (#1297)
This commit is contained in:
		
							parent
							
								
									96e786d480
								
							
						
					
					
						commit
						a3688fe642
					
				@ -14,7 +14,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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
 | 
						<div
 | 
				
			||||||
		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
							class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -14,7 +14,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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
 | 
						<div
 | 
				
			||||||
		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
							class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -52,7 +52,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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">
 | 
						<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" />
 | 
							<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 | 
				
			||||||
 | 
				
			|||||||
@ -16,7 +16,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<FullScreenModal on:clickOutside={() => handleCancel()}>
 | 
					<FullScreenModal on:clickOutside={() => handleCancel()}>
 | 
				
			||||||
	<div
 | 
						<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
 | 
							<div
 | 
				
			||||||
			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
								class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -27,7 +27,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<FullScreenModal>
 | 
					<FullScreenModal>
 | 
				
			||||||
	<div
 | 
						<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
 | 
							<div
 | 
				
			||||||
			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
								class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -44,7 +44,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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">
 | 
						<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" />
 | 
							<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 | 
				
			||||||
 | 
				
			|||||||
@ -77,7 +77,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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">
 | 
						<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" />
 | 
							<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 | 
				
			||||||
 | 
				
			|||||||
@ -66,7 +66,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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
 | 
						<div
 | 
				
			||||||
		class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
							class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -72,7 +72,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div
 | 
					<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">
 | 
						<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" />
 | 
							<img class="text-center" src="/immich-logo.svg" height="100" width="100" alt="immich-logo" />
 | 
				
			||||||
 | 
				
			|||||||
@ -15,7 +15,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<div class="absolute top-0 left-0 w-screen h-screen">
 | 
					<div class="absolute top-0 left-0 w-screen h-screen">
 | 
				
			||||||
	<FullScreenModal on:clickOutside={() => console.log('Click outside')}>
 | 
						<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>
 | 
								<p class="text-2xl ">🎉 NEW VERSION AVAILABLE 🎉</p>
 | 
				
			||||||
			<br />
 | 
								<br />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -14,7 +14,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<FullScreenModal on:clickOutside={() => handleCancel()}>
 | 
					<FullScreenModal on:clickOutside={() => handleCancel()}>
 | 
				
			||||||
	<div
 | 
						<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
 | 
							<div
 | 
				
			||||||
			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
								class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 | 
				
			||||||
 | 
				
			|||||||
@ -3,7 +3,7 @@
 | 
				
			|||||||
</script>
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<div class="h-screen w-screen  flex place-items-center place-content-center flex-col">
 | 
					<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>
 | 
							<code class="text-xs text-red-500">Error code {$page.status}</code>
 | 
				
			||||||
		<br />
 | 
							<br />
 | 
				
			||||||
		<code class="text-sm">
 | 
							<code class="text-sm">
 | 
				
			||||||
 | 
				
			|||||||
@ -144,7 +144,7 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
	{#if shouldShowInfoPanel}
 | 
						{#if shouldShowInfoPanel}
 | 
				
			||||||
		<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
 | 
							<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>
 | 
									<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
				<p>
 | 
									<p>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user