From 83a3e53d8d24d82829a89d2274b9290a6b9f8b60 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian.danielsson@proton.me>
Date: Sun, 8 Sep 2024 17:36:51 +0200
Subject: [PATCH] Add padding to compensate for iPhone nav bar

---
 src/app.html                                                 | 5 ++++-
 src/lib/components/chat/MessageInput.svelte                  | 2 +-
 .../components/chat/Settings/Advanced/AdvancedParams.svelte  | 2 +-
 src/lib/components/layout/Sidebar.svelte                     | 2 +-
 tailwind.config.js                                           | 3 +++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app.html b/src/app.html
index 59fd7c5ed..532f2e9b5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -4,7 +4,10 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" crossorigin="use-credentials" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
+		/>
 		<meta name="robots" content="noindex,nofollow" />
 		<meta name="description" content="Open WebUI" />
 		<link
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 55daf799b..79bd4531d 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -349,7 +349,7 @@
 	</div>
 
 	<div class="{transparentBackground ? 'bg-transparent' : 'bg-white dark:bg-gray-900'} ">
-		<div class="max-w-6xl px-2.5 md:px-6 mx-auto inset-x-0">
+		<div class="max-w-6xl px-2.5 md:px-6 mx-auto inset-x-0 pb-safe-bottom">
 			<div class=" pb-2">
 				<input
 					bind:this={filesInputElement}
diff --git a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
index 915874aec..d1b566b63 100644
--- a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
+++ b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
@@ -41,7 +41,7 @@
 	}
 </script>
 
-<div class=" space-y-1 text-xs">
+<div class=" space-y-1 text-xs pb-safe-bottom">
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
 			<div class=" self-center text-xs font-medium">{$i18n.t('Seed')}</div>
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 168f7eaf2..e78bda96a 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -551,7 +551,7 @@
 			</div>
 		</div>
 
-		<div class="px-2.5">
+		<div class="px-2.5 pb-safe-bottom">
 			<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
 
 			<div class="flex flex-col font-primary">
diff --git a/tailwind.config.js b/tailwind.config.js
index 893cda83d..69b84725e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,6 +30,9 @@ export default {
 						'code::after': false
 					}
 				}
+			},
+			padding: {
+				'safe-bottom': 'env(safe-area-inset-bottom)'
 			}
 		}
 	},