Merge pull request #5275 from sebdanielsson/safe-area

fix: Add padding to compensate for iPhone nav bar

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

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}

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>

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">

tailwind.config.js

@@ -30,6 +30,9 @@ export default {
 						'code::after': false
 					}
 				}
+			},
+			padding: {
+				'safe-bottom': 'env(safe-area-inset-bottom)'
 			}
 		}
 	},