From 457d392837cb3990508867b0d36affb6042800cc Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 17 Jun 2025 11:53:14 +0200
Subject: [PATCH] [Glitch] fix: Improve support for safe area insets

Port 59dc0bd6f3008bf162c3bfc2a5abc9ca836c337c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/styles/admin.scss      | 3 +++
 app/javascript/flavours/glitch/styles/basics.scss     | 2 ++
 app/javascript/flavours/glitch/styles/components.scss | 2 ++
 3 files changed, 7 insertions(+)

diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 65dbdb02b6..d8f2d05a49 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -9,8 +9,11 @@ $content-width: 840px;
 .admin-wrapper {
   display: flex;
   justify-content: center;
+  box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
 
   .icon {
     width: 16px;
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 295f69764f..96806b8ceb 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -50,6 +50,7 @@ body {
     padding: 0;
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
+    box-sizing: border-box;
 
     &.layout-single-column {
       height: auto;
@@ -61,6 +62,7 @@ body {
       position: absolute;
       width: 100%;
       height: 100%;
+      padding-bottom: env(safe-area-inset-bottom);
     }
 
     &.with-modals--active {
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index ddc5f15f0e..e75f7b1e92 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -2882,12 +2882,14 @@ a.account__display-name {
   }
 
   &__panels {
+    box-sizing: border-box;
     display: flex;
     justify-content: center;
     gap: 16px;
     width: 100%;
     height: 100%;
     min-height: 100vh;
+    padding-bottom: env(safe-area-inset-bottom);
 
     &__pane {
       height: 100%;