diff --git a/assets/css/app.css b/assets/css/app.css
index 58f3db9b3..85383ce66 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -93,6 +93,7 @@
 	--safe-area-inset-right: env(safe-area-inset-right, 0px);
 
 	--tab-bar-height: 3rem;
+	--bottom-space: 1.5px;
 	--tab-bar-background: var(--evcc-background);
 	--evcc-backdrop-blur: blur(20px);
 }
@@ -686,13 +687,13 @@ html.app .hide-in-app {
 	display: none !important;
 }
 
-html.app .safe-area-inset {
+.safe-area-inset {
 	padding: max(1rem, var(--safe-area-inset-top)) var(--safe-area-inset-right)
-		var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+		calc(var(--safe-area-inset-bottom) + var(--bottom-space)) var(--safe-area-inset-left);
 	position: relative;
 }
 
-html.app .safe-area-inset::before {
+.safe-area-inset::before {
 	content: "";
 	display: block;
 	position: fixed;
diff --git a/assets/js/components/Forecast/Co2Chart.vue b/assets/js/components/Forecast/Co2Chart.vue
index 1aa86789d..3d48cb1f1 100644
--- a/assets/js/components/Forecast/Co2Chart.vue
+++ b/assets/js/components/Forecast/Co2Chart.vue
@@ -122,7 +122,6 @@ export default defineComponent({
 <style scoped>
 .forecast-chart-scroll {
 	overflow-x: auto;
-	margin-bottom: 1.5rem;
 	padding-bottom: 4px;
 }
 </style>
diff --git a/assets/js/components/Forecast/PriceChart.vue b/assets/js/components/Forecast/PriceChart.vue
index 71e54fb0d..c792459bf 100644
--- a/assets/js/components/Forecast/PriceChart.vue
+++ b/assets/js/components/Forecast/PriceChart.vue
@@ -168,7 +168,6 @@ export default defineComponent({
 <style scoped>
 .forecast-chart-scroll {
 	overflow-x: auto;
-	margin-bottom: 1.5rem;
 	padding-bottom: 4px;
 }
 </style>
diff --git a/assets/js/components/Forecast/SolarChart.vue b/assets/js/components/Forecast/SolarChart.vue
index 0248fe551..3e007ccb0 100644
--- a/assets/js/components/Forecast/SolarChart.vue
+++ b/assets/js/components/Forecast/SolarChart.vue
@@ -133,7 +133,6 @@ export default defineComponent({
 <style scoped>
 .forecast-chart-scroll {
 	overflow-x: auto;
-	margin-bottom: 1.5rem;
 	padding-bottom: 4px;
 }
 </style>
diff --git a/assets/js/components/Site/Site.vue b/assets/js/components/Site/Site.vue
index cd63bc32c..f95f10e49 100644
--- a/assets/js/components/Site/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="d-flex flex-column site safe-area-inset"
-		:class="{ 'site--bottomtabs': experimental }"
-	>
+	<div class="d-flex flex-column site safe-area-inset">
 		<div class="container px-4 top-area">
 			<div
 				class="d-flex justify-content-between align-items-center my-3 my-md-4"
@@ -240,10 +237,6 @@ export default defineComponent({
 	min-height: 100vh;
 	min-height: 100dvh;
 }
-.site--bottomtabs {
-	min-height: calc(100vh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
-	min-height: calc(100dvh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
-}
 .content-area {
 	flex-grow: 1;
 	z-index: 1;
diff --git a/assets/js/views/App.vue b/assets/js/views/App.vue
index eb8a4552f..fd17b33eb 100644
--- a/assets/js/views/App.vue
+++ b/assets/js/views/App.vue
@@ -275,6 +275,6 @@ export default defineComponent({
 	min-height: 100dvh;
 }
 .app--bottomtabs {
-	padding-bottom: var(--tab-bar-height);
+	--bottom-space: calc(var(--tab-bar-height) + 1.5rem);
 }
 </style>
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index a6742e289..b435e3f55 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -6,7 +6,7 @@
 				:title="$t('config.main.title')"
 				:notifications="notifications"
 			/>
-			<div class="wrapper pb-5">
+			<div class="wrapper mb-3">
 				<AuthSuccessBanner
 					v-if="callbackCompleted || callbackError"
 					:provider-id="callbackCompleted"
@@ -357,7 +357,7 @@
 				<hr class="my-5" />
 
 				<h2 class="my-4 mt-5">{{ $t("config.section.system") }}</h2>
-				<div class="round-box p-4 d-flex gap-4 mb-5 flex-wrap">
+				<div class="round-box p-4 d-flex gap-4 flex-wrap">
 					<router-link to="/log" class="btn btn-outline-secondary">
 						{{ $t("config.system.logs") }}
 					</router-link>
diff --git a/assets/js/views/Forecast.vue b/assets/js/views/Forecast.vue
index 4f1f82eec..4ed3af809 100644
--- a/assets/js/views/Forecast.vue
+++ b/assets/js/views/Forecast.vue
@@ -119,7 +119,7 @@
 					/>
 				</section>
 
-				<section v-if="forecast.co2" class="mb-5">
+				<section v-if="forecast.co2">
 					<h3
 						class="fw-normal my-4 d-flex gap-3 flex-wrap align-items-baseline overflow-hidden"
 					>
@@ -311,8 +311,7 @@ export default defineComponent({
 
 <style scoped>
 .empty-container {
-	min-height: calc(100dvh - var(--tab-bar-height) - var(--safe-area-inset-bottom));
-	padding-bottom: calc(var(--tab-bar-height) + var(--safe-area-inset-bottom));
+	min-height: calc(100dvh - var(--bottom-space));
 }
 .empty-box {
 	background-color: var(--evcc-box);
diff --git a/assets/js/views/Log.vue b/assets/js/views/Log.vue
index e5981e85b..f6ff1d02e 100644
--- a/assets/js/views/Log.vue
+++ b/assets/js/views/Log.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="root safe-area-inset">
-		<div class="container d-flex h-100 flex-column px-0 pb-4">
+		<div class="container d-flex h-100 flex-column px-0 pb-0 pb-md-3">
 			<TopHeader :title="$t('log.title')" class="mx-4" />
 			<div class="logs d-flex flex-column overflow-hidden flex-grow-1 px-4 mx-2 mx-sm-4">
 				<div class="flex-grow-0 row py-4">
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
index 6f84e60a9..16f8a3774 100644
--- a/assets/js/views/Sessions.vue
+++ b/assets/js/views/Sessions.vue
@@ -152,7 +152,7 @@
 					:currency="currency"
 					@show-session="showDetails"
 				/>
-				<div class="d-flex gap-2 mt-1 mb-5">
+				<div class="d-flex gap-2 my-3">
 					<a
 						class="btn btn-outline-secondary"
 						tabindex="0"