From 97a1c29b0cd26b2d8521d7b3226addb055d97576 Mon Sep 17 00:00:00 2001
From: Adrien Maston <adrien@37signals.com>
Date: Fri, 23 Jan 2026 12:15:31 +0100
Subject: [PATCH] Use bottom inset

... fixes content being stuck behind the tab bar in apps
---
 app/assets/stylesheets/card-columns.css | 2 +-
 app/assets/stylesheets/native.css       | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 3409b83de..c438efa26 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -232,7 +232,7 @@
     overflow-y: auto;
 
     .is-expanded & {
-      padding: var(--column-padding);
+      padding: var(--column-padding) var(--column-padding) calc(var(--column-padding) + var(--custom-safe-inset-bottom));
 
       /* Use the rest of the column height for scrolling */
       @media (max-width: 639px) {
diff --git a/app/assets/stylesheets/native.css b/app/assets/stylesheets/native.css
index 6e2e12981..c67d05d14 100644
--- a/app/assets/stylesheets/native.css
+++ b/app/assets/stylesheets/native.css
@@ -8,6 +8,15 @@
       display: none;
     }
 
+    /* Layout
+    /* ------------------------------------------------------------------------ */
+
+    &:not(.contained-scrolling) {
+      #main {
+        padding-block-end: var(--custom-safe-inset-bottom);
+      }
+    }
+
     /* Header
     /* ------------------------------------------------------------------------ */