diff --git a/app/components/UI/account_page.html.erb b/app/components/UI/account_page.html.erb
index 37d3bd41e..d1c9a5add 100644
--- a/app/components/UI/account_page.html.erb
+++ b/app/components/UI/account_page.html.erb
@@ -1,12 +1,12 @@
 <%= turbo_stream_from account %>
 
 <%= turbo_frame_tag id do %>
-  <%= tag.div class: "space-y-4 pb-32" do %>
+  <%= tag.div class: "space-y-4 pb-5 lg:pb-32" do %>
     <%= render "accounts/show/header", account: account, title: title, subtitle: subtitle %>
 
     <%= render UI::Account::Chart.new(account: account, period: chart_period, view: chart_view) %>
 
-    <div class="min-h-[800px]" data-testid="account-details">
+    <div data-testid="account-details">
       <% if tabs.count > 1 %>
         <%= render DS::Tabs.new(active_tab: active_tab, url_param_key: "tab") do |tabs_container| %>
           <% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
diff --git a/app/javascript/controllers/viewport_controller.js b/app/javascript/controllers/viewport_controller.js
index c8b9100f4..94f045374 100644
--- a/app/javascript/controllers/viewport_controller.js
+++ b/app/javascript/controllers/viewport_controller.js
@@ -1,46 +1,26 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["content", "bottomNav"]
-
   connect() {
     this.updateViewport()
-    this.updateBottomSpacing()
 
-    window.addEventListener("resize", this.handleResize)
-    window.addEventListener("orientationchange", this.handleResize)
+    this.boundResize = this.handleResize.bind(this)
 
-    if (this.hasBottomNavTarget) {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateBottomSpacing()
-      })
-      this.resizeObserver.observe(this.bottomNavTarget)
-    }
+    window.addEventListener("resize", this.boundResize)
+    window.addEventListener("orientationchange", this.boundResize)
   }
 
   disconnect() {
-    window.removeEventListener("resize", this.handleResize)
-    window.removeEventListener("orientationchange", this.handleResize)
-
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
+    window.removeEventListener("resize", this.boundResize)
+    window.removeEventListener("orientationchange", this.boundResize)
   }
 
-  handleResize = () => {
+  handleResize() {
     this.updateViewport()
-    this.updateBottomSpacing()
   }
 
   updateViewport() {
     const height = window.innerHeight
     document.documentElement.style.setProperty("--app-height", `${height}px`)
   }
-
-  updateBottomSpacing() {
-    if (!this.hasBottomNavTarget || !this.hasContentTarget) return
-
-    const navHeight = this.bottomNavTarget.offsetHeight
-    this.contentTarget.style.paddingBottom = `${navHeight}px`
-  }
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a523dbeaa..9d5bc708c 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -126,7 +126,7 @@ end %>
     <% end %>
 
     <%# SHARED - Main content %>
-    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto"), data: { app_layout_target: "content", viewport_target: "content" } do %>
+    <%= tag.main class: class_names("grow overflow-y-auto px-3 lg:px-10 w-full mx-auto pb-[calc(5rem+env(safe-area-inset-bottom))] lg:pb-0"), data: { app_layout_target: "content", viewport_target: "content" } do %>
       <% unless intro_mode %>
         <div class="hidden lg:flex gap-2 items-center justify-between mb-6 sticky top-0 z-10 -mx-3 lg:-mx-10 px-3 lg:px-10 py-4 bg-surface border-b border-tertiary">
           <div class="flex items-center gap-2">