From 5b622a547d7204e49a0cb14b53aa5adda768b181 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Wed, 8 Oct 2025 10:06:22 -0400
Subject: [PATCH] Fix app bar visibility on item details page

---
 src/apps/experimental/AppOverrides.scss | 17 ++++++++++++++---
 src/themes/defaults.ts                  |  8 ++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/apps/experimental/AppOverrides.scss b/src/apps/experimental/AppOverrides.scss
index c22144b79..76754af4c 100644
--- a/src/apps/experimental/AppOverrides.scss
+++ b/src/apps/experimental/AppOverrides.scss
@@ -27,7 +27,18 @@ $mui-bp-xl: 1536px;
     padding-top: 3.25rem !important;
 }
 
-// Fix backdrop position on mobile item details page
-.layout-mobile .itemBackdrop {
-    margin-top: 0 !important;
+.layout-mobile {
+    .itemBackdrop {
+        // Fix backdrop position on mobile item details page
+        margin-top: 0 !important;
+
+        // Add a subtle gradient over the backdrop to ensure the app bar buttons are visible
+        &::before {
+            display: block;
+            content: "";
+            height: 100%;
+            width: 100%;
+            background: linear-gradient(180deg, rgba(32, 32, 32, 0.6) 0%, rgba(32, 32, 32, 0.2) 4rem, rgba(0, 0, 0, 0) 50%);
+        }
+    }
 }
diff --git a/src/themes/defaults.ts b/src/themes/defaults.ts
index db7fcbd00..5523652c8 100644
--- a/src/themes/defaults.ts
+++ b/src/themes/defaults.ts
@@ -1,4 +1,5 @@
 import type { ColorSystemOptions, ThemeOptions } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 const LIST_ICON_WIDTH = 36;
 
@@ -54,6 +55,13 @@ export const DEFAULT_THEME_OPTIONS: ThemeOptions = {
                 }
             }
         },
+        MuiAppBar: {
+            styleOverrides: {
+                colorTransparent: ({ theme }) => ({
+                    color: theme.vars.palette.text.primary
+                })
+            }
+        },
         MuiButton: {
             defaultProps: {
                 variant: 'contained'