From 336e29846254fbd34efcbbf960836c5985afed84 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 4 Jan 2025 23:05:24 +0200
Subject: [PATCH] style(mobile): background for whole bottom area + fix
 alignment

---
 src/public/app/layouts/mobile_layout.ts     | 17 ++++++++++-------
 src/public/stylesheets/style.css            |  8 ++++++--
 src/public/stylesheets/theme-next/shell.css | 13 +++++++++++--
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/public/app/layouts/mobile_layout.ts b/src/public/app/layouts/mobile_layout.ts
index 7f11c2e65..ba61f2400 100644
--- a/src/public/app/layouts/mobile_layout.ts
+++ b/src/public/app/layouts/mobile_layout.ts
@@ -184,13 +184,16 @@ export default class MobileLayout {
                 .child(new ProtectedSessionPasswordDialog())
                 .child(new ConfirmDialog())
             )
-            .child(new TabRowWidget().css('height', '40px'))
-            .child(new FlexContainer("row")
-                .class("horizontal")
-                .css("height", "53px")
-                .child(new LauncherContainer(true))
-                .child(new GlobalMenuWidget(true))
-                .id("launcher-pane"))
+            .child(new FlexContainer("column")
+                .contentSized()
+                .id("mobile-bottom-bar")
+                .child(new TabRowWidget().css('height', '40px'))
+                .child(new FlexContainer("row")
+                    .class("horizontal")
+                    .css("height", "53px")
+                    .child(new LauncherContainer(true))
+                    .child(new GlobalMenuWidget(true))
+                    .id("launcher-pane")))
             .child(new AboutDialog())
             .child(new HelpDialog())
     }
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 06ae69001..14bb72f00 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -22,6 +22,7 @@
 :root {
     --submenu-opening-delay: 300ms;
     --launcher-pane-size: 53px;
+    --mobile-bottom-offset: calc(env(safe-area-inset-bottom) * 0.75);
 }
 
 html {
@@ -57,7 +58,10 @@ body.mobile.context-menu-shown * {
 
 body.mobile #root-widget {
     padding-top: env(safe-area-inset-top);
-    padding-bottom: calc(env(safe-area-inset-bottom) * 0.75);
+}
+
+#mobile-bottom-bar {
+    padding-bottom: var(--mobile-bottom-offset);
 }
 
 body.desktop #root-widget.horizontal-layout {
@@ -1190,7 +1194,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 body.mobile #launcher-pane .dropdown-menu.show {
     position: fixed !important;
-    bottom: var(--launcher-pane-size) !important;
+    bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
     top: unset !important;
     left: 0 !important;
     right: 0 !important;
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index aa0b26964..35358fea4 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -112,8 +112,17 @@ body.layout-horizontal > .horizontal {
 
 #launcher-pane.horizontal {
     height: var(--launcher-pane-size) !important;    
-    align-items: center;
-    border-top: 1px solid var(--launcher-pane-horizontal-border-color);
+    align-items: center;    
+}
+
+@media (max-width: 991px) {
+    #mobile-bottom-bar {
+        background: var(--launcher-pane-background-color);
+    }
+
+    #launcher-pane {
+        background: transparent !important;
+    }
 }
 
 @media (min-width: 992px) {