From 3afc77702f13323b4be3ad4259e511c69db0f176 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:52:18 -0500
Subject: [PATCH 01/21] TT-7441 Add custom headerbackground color

---
 src/renderer/src/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index d6741232..83fa263f 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -27,6 +27,7 @@ function App(): React.JSX.Element {
             // Custom colors - simple key-value pairs
             custom: {
               currentRegion: 'rgb(102, 255, 0, .5)',
+              headerBackground: '#eee',
             },
           } as any,
           typography: {

From f44925466d2cd33342e5c1295abab7b5cec2c34a Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:52:30 -0500
Subject: [PATCH 02/21] TT-7441 Adjust AppHead and PassageDetailMobileLayout
 background color

---
 src/renderer/src/components/App/AppHead.tsx          | 12 ++++++------
 .../PassageDetail/PassageDetailMobileLayout.tsx      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/renderer/src/components/App/AppHead.tsx b/src/renderer/src/components/App/AppHead.tsx
index ae9263be..5cb93ea6 100644
--- a/src/renderer/src/components/App/AppHead.tsx
+++ b/src/renderer/src/components/App/AppHead.tsx
@@ -3,11 +3,7 @@ import { useGetGlobal, useGlobal } from '../../context/useGlobal';
 import { useLocation } from 'react-router-dom';
 import { IState, IViewModeStrings } from '../../model';
 import { shallowEqual, useSelector } from 'react-redux';
-import {
-  AppBar,
-  LinearProgress,
-  Box,
-} from '@mui/material';
+import { AppBar, LinearProgress, Box } from '@mui/material';
 import { isElectron } from '../../../api-variable';
 import { TokenContext } from '../../context/TokenProvider';
 import { UnsavedContext } from '../../context/UnsavedContext';
@@ -285,7 +281,11 @@ export const AppHead = (props: IProps) => {
   return (
     <AppBar
       position="fixed"
-      sx={{ width: '100%', display: 'flex' }}
+      sx={{
+        width: '100%',
+        display: 'flex',
+        backgroundColor: 'custom.headerBackground',
+      }}
       color="inherit"
     >
       <>
diff --git a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
index 6fc3d086..70f8bc35 100644
--- a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
+++ b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
@@ -33,7 +33,7 @@ export default function PassageDetailMobileLayout({
     >
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderBottom: '1px solid',
           borderColor: 'divider',
         }}

From d8c457678dbf6765c8a8b9a8e71a14ffa95177f8 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:54:39 -0500
Subject: [PATCH 03/21] TT-7441 Remove the shadow at the bottom of the AppBar

---
 src/renderer/src/App.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 83fa263f..12aa5ec5 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -35,6 +35,15 @@ function App(): React.JSX.Element {
               textTransform: 'capitalize',
             },
           },
+          components: {
+            MuiAppBar: {
+              styleOverrides: {
+                root: {
+                  boxShadow: 'none',
+                },
+              },
+            },
+          },
         },
         getDataGridLocale(lang)
       ),

From e7fc829be9ba7a6a3c7552d5098a448edfc326c8 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 10:59:38 -0500
Subject: [PATCH 04/21] TT-7441 Use different contrasting colors for the
 parallelograms

---
 .../PassageDetail/mobile/MobileWorkflowSteps.tsx          | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index b76ea5e9..f96b47c1 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -10,7 +10,6 @@ import {
   Menu,
   MenuItem,
   Typography,
-  useTheme,
 } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
@@ -58,7 +57,6 @@ export default function MobileWorkflowSteps() {
   const getGlobal = useGetGlobal();
   const { showMessage } = useSnackBar();
   const ts = useSelector(sharedSelector, shallowEqual);
-  const theme = useTheme();
   const getWfLabel = useWfLabel();
   const { getOrgDefault } = useOrgDefaults();
   const isStepProgression =
@@ -318,10 +316,10 @@ export default function MobileWorkflowSteps() {
         >
           {steps.map((step) => {
             const color = step.isCurrent
-              ? theme.palette.grey[700]
+              ? '#111'
               : step.isComplete
-                ? theme.palette.grey[400]
-                : theme.palette.grey[200];
+                ? '#888'
+                : '#ccc';
             return (
               <Box
                 key={step.id}

From bf952c58b07b36c3da3bb1d7379713d68d8034b7 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:23:41 -0500
Subject: [PATCH 05/21] TT-7441 Lock document scroll on mobile so that
 MobileWorkflowSteps won't be scrollable + Make sure that the area between
 MobileWorkflowSteps and AppBar is also in headerBackground color

---
 src/renderer/src/routes/PassageDetail.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/renderer/src/routes/PassageDetail.tsx b/src/renderer/src/routes/PassageDetail.tsx
index 80cb0591..5157487d 100644
--- a/src/renderer/src/routes/PassageDetail.tsx
+++ b/src/renderer/src/routes/PassageDetail.tsx
@@ -115,6 +115,22 @@ export const PassageDetail = () => {
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
 
+  // Lock document scroll on mobile so only the inner content region scrolls;
+  // this prevents MobileWorkflowSteps being scrolled under the AppBar.
+  useEffect(() => {
+    if (!isMobile) return;
+    const { body } = document;
+    const html = document.documentElement;
+    const prevBody = body.style.overflow;
+    const prevHtml = html.style.overflow;
+    body.style.overflow = 'hidden';
+    html.style.overflow = 'hidden';
+    return () => {
+      body.style.overflow = prevBody;
+      html.style.overflow = prevHtml;
+    };
+  }, [isMobile]);
+
   if (view !== '' && view !== pathname) return <StickyRedirect to={view} />;
 
   return (
@@ -136,6 +152,7 @@ export const PassageDetail = () => {
               // AppHead is position:fixed — offset in-flow content like PassageDetailGrids does,
               // otherwise mobile layout height calc(100dvh - HeadHeight) leaves a gap at the bottom.
               pt: `${HeadHeight}px`,
+              backgroundColor: 'custom.headerBackground',
               width: '100%',
               flex: 1,
               minHeight: 0,

From 96064aa675b33dff3c5907b530d99f8a9d6d9839 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:24:48 -0500
Subject: [PATCH 06/21] TT-7441 Make sure that the content under the header is
 a default background color

---
 .../src/components/PassageDetail/PassageDetailMobileLayout.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
index 70f8bc35..757a33a2 100644
--- a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
+++ b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
@@ -42,6 +42,7 @@ export default function PassageDetailMobileLayout({
       </Box>
       <Box
         sx={{
+          backgroundColor: 'background.default',
           px: 1.5,
           pt: 1.5,
           pb: 1.5,

From 39c2a9abab3df016dd8e9ab60cf2f1c1dd8ff502 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:47:25 -0500
Subject: [PATCH 07/21] TT-7441 The tip should be accessible inside the
 dropdown menu button

---
 .../mobile/MobileWorkflowSteps.tsx            | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index f96b47c1..85af845d 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -6,7 +6,6 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Menu,
   MenuItem,
   Typography,
@@ -208,19 +207,22 @@ export default function MobileWorkflowSteps() {
             alignItems: 'center',
           }}
         >
-          {!isStepProgression && currentTip && (
-            <IconButton
-              size="small"
-              onClick={() => setTipOpen(true)}
-              data-cy="workflow-step-tip"
-              aria-label={currentTip}
-              color="info"
-            >
-              <InfoIcon fontSize="small" />
-            </IconButton>
-          )}
           <Button
             size="small"
+            startIcon={
+              !isStepProgression && currentTip ? (
+                <InfoIcon
+                  color="info"
+                  fontSize="small"
+                  data-cy="workflow-step-tip"
+                  aria-label={currentTip}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setTipOpen(true);
+                  }}
+                />
+              ) : undefined
+            }
             endIcon={hasMultipleOptions ? <ArrowDropDownIcon /> : undefined}
             sx={{
               minWidth: 'auto',
@@ -363,8 +365,8 @@ export default function MobileWorkflowSteps() {
               }}
               aria-label={currentTip}
             >
-              {getWfLabel(currentLabel) + '\u00A0'}
               <InfoIcon color="info" fontSize="small" />
+              {'\u00A0' + getWfLabel(currentLabel)}
             </ButtonBase>
           ) : (
             getWfLabel(currentLabel)

From 4ce29da5e7966b380586d3513afa0b3f566a9c10 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:39:26 -0500
Subject: [PATCH 08/21] TT-7441 Add button theme

---
 src/renderer/src/App.tsx | 63 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 12aa5ec5..c2dd5db8 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -10,6 +10,21 @@ import { getDataGridLocale } from './utils/dataGridLocale';
 import { useMemo } from 'react';
 export { HeadHeight } from './layout';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+  interface PaletteOptions {
+    custom?: {
+      currentRegion: string;
+      headerBackground: string;
+    };
+  }
+}
+
 function App(): React.JSX.Element {
   const lang = useSelector((state: IState) => state.strings.lang, shallowEqual);
 
@@ -19,17 +34,16 @@ function App(): React.JSX.Element {
         {
           palette: {
             primary: {
-              main: '#135CB9', //Original: 135CB9, Better color: 1D9F90
+              main: '#135CB9',
             },
             secondary: {
-              main: '#00A7E1', //Original: 00A7E1, Better color: 25CBB8
+              main: '#00A7E1',
             },
-            // Custom colors - simple key-value pairs
             custom: {
-              currentRegion: 'rgb(102, 255, 0, .5)',
-              headerBackground: '#eee',
+              currentRegion: '#66FF0080',
+              headerBackground: '#EEEEEE',
             },
-          } as any,
+          },
           typography: {
             button: {
               textTransform: 'capitalize',
@@ -43,6 +57,43 @@ function App(): React.JSX.Element {
                 },
               },
             },
+            MuiButton: {
+              defaultProps: {
+                disableElevation: true,
+              },
+              styleOverrides: {
+                root: {
+                  borderRadius: '8px',
+                  padding: '8px 16px',
+                  boxShadow: '1px 1px 3px rgba(0, 0, 0, 0.12)',
+                  color: 'black',
+                  height: 36,
+                  background: '#fff',
+                  '&:hover': {
+                    background: '#e2e2e2',
+                  },
+                  '&:disabled': {
+                    background: '#f0f0f0',
+                  },
+                },
+              },
+              variants: [
+                {
+                  // Contained buttons are primary buttons
+                  props: { variant: 'contained' },
+                  style: {
+                    background: '#333',
+                    color: '#fff',
+                    '&:hover': {
+                      background: '#555',
+                    },
+                    '&:disabled': {
+                      background: '#f0f0f0',
+                    },
+                  },
+                },
+              ],
+            },
           },
         },
         getDataGridLocale(lang)

From 81ae2cf43bbe66b63c7b32ed04cd2395babd622a Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:40:51 -0500
Subject: [PATCH 09/21] TT-7441 Use the theming typography

---
 src/renderer/src/App.tsx                                        | 2 +-
 .../src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index c2dd5db8..a711048e 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -46,7 +46,7 @@ function App(): React.JSX.Element {
           },
           typography: {
             button: {
-              textTransform: 'capitalize',
+              textTransform: 'none',
             },
           },
           components: {
diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index 85af845d..8f19a89e 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -226,7 +226,6 @@ export default function MobileWorkflowSteps() {
             endIcon={hasMultipleOptions ? <ArrowDropDownIcon /> : undefined}
             sx={{
               minWidth: 'auto',
-              textTransform: 'none',
               // These per-breakpoint widths are fine-tuned to constrain the dropdown so
               // its label truncates before it can overlap the parallelograms
               maxWidth: { xs: '45vw', md: '20vw', lg: '25vw' },

From 696926722160fa321fb5a064594cd3a360516db8 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:46:59 -0500
Subject: [PATCH 10/21] TT-7441 Use consistent hex codes for colors

---
 src/renderer/src/App.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index a711048e..7919e6dc 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -65,15 +65,15 @@ function App(): React.JSX.Element {
                 root: {
                   borderRadius: '8px',
                   padding: '8px 16px',
-                  boxShadow: '1px 1px 3px rgba(0, 0, 0, 0.12)',
-                  color: 'black',
+                  boxShadow: '1px 1px 3px #0000001F',
+                  color: '#000000',
                   height: 36,
-                  background: '#fff',
+                  background: '#FFFFFF',
                   '&:hover': {
-                    background: '#e2e2e2',
+                    background: '#E2E2E2',
                   },
                   '&:disabled': {
-                    background: '#f0f0f0',
+                    background: '#F0F0F0',
                   },
                 },
               },
@@ -82,13 +82,13 @@ function App(): React.JSX.Element {
                   // Contained buttons are primary buttons
                   props: { variant: 'contained' },
                   style: {
-                    background: '#333',
-                    color: '#fff',
+                    background: '#333333',
+                    color: '#FFFFFF',
                     '&:hover': {
-                      background: '#555',
+                      background: '#555555',
                     },
                     '&:disabled': {
-                      background: '#f0f0f0',
+                      background: '#F0F0F0',
                     },
                   },
                 },

From 2e68a760ddecce7a08271388bc4b8dfd9c23a3ab Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:03:48 -0500
Subject: [PATCH 11/21] TT-7441 Position the tip icon on the right hand side of
 the buttom label

---
 .../src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index 8f19a89e..8956b3ac 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -364,8 +364,8 @@ export default function MobileWorkflowSteps() {
               }}
               aria-label={currentTip}
             >
+              {getWfLabel(currentLabel) + '\u00A0'}
               <InfoIcon color="info" fontSize="small" />
-              {'\u00A0' + getWfLabel(currentLabel)}
             </ButtonBase>
           ) : (
             getWfLabel(currentLabel)

From 65a4be62cf08665c84919802b48197b93562b3f3 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:34:50 -0500
Subject: [PATCH 12/21] TT-7441 Disable gutters and don't add padding around
 the back button

---
 src/renderer/src/components/App/MobileToolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/App/MobileToolbar.tsx b/src/renderer/src/components/App/MobileToolbar.tsx
index 897266f4..a51c609b 100644
--- a/src/renderer/src/components/App/MobileToolbar.tsx
+++ b/src/renderer/src/components/App/MobileToolbar.tsx
@@ -40,13 +40,13 @@ export const MobileToolbar = ({
   handleUserMenu,
 }: MobileToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!isDetail ? (
         <IconButton onClick={() => navigate('/team')} sx={{ p: 0 }}>
           <ApmLogo sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       ) : (
-        <IconButton onClick={() => navigate(planUrl || '/team')}>
+        <IconButton onClick={() => navigate(planUrl || '/team')} sx={{ p: 0 }}>
           <ArrowBackIcon sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       )}

From 14dd5a3d8bf3e372cf61e0d86300be665f209bf6 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:35:14 -0500
Subject: [PATCH 13/21] TT-7441 Disable gutters for the desktop toolbar too

---
 src/renderer/src/components/App/DesktopToolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/components/App/DesktopToolbar.tsx b/src/renderer/src/components/App/DesktopToolbar.tsx
index 5caa5584..00978720 100644
--- a/src/renderer/src/components/App/DesktopToolbar.tsx
+++ b/src/renderer/src/components/App/DesktopToolbar.tsx
@@ -98,7 +98,7 @@ export const DesktopToolbar = ({
   tv,
 }: DesktopToolbarProps) => {
   return (
-    <Toolbar>
+    <Toolbar disableGutters>
       {!home && orgRole && (
         <>
           <ProjectName switchTo={switchTo ?? false} />

From 6233a07d5a2faf324be2fe79f328cc3778b98655 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:48:28 -0500
Subject: [PATCH 14/21] TT-7441 Use primary.light color for tip icons

---
 .../components/PassageDetail/mobile/MobileWorkflowSteps.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index 8956b3ac..63a07763 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -212,7 +212,7 @@ export default function MobileWorkflowSteps() {
             startIcon={
               !isStepProgression && currentTip ? (
                 <InfoIcon
-                  color="info"
+                  sx={{ color: 'primary.light' }}
                   fontSize="small"
                   data-cy="workflow-step-tip"
                   aria-label={currentTip}
@@ -365,7 +365,7 @@ export default function MobileWorkflowSteps() {
               aria-label={currentTip}
             >
               {getWfLabel(currentLabel) + '\u00A0'}
-              <InfoIcon color="info" fontSize="small" />
+              <InfoIcon sx={{ color: 'primary.light' }} fontSize="small" />
             </ButtonBase>
           ) : (
             getWfLabel(currentLabel)

From 93d5f564c33f7cfb28affb9184841028201833d4 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 13:57:53 -0500
Subject: [PATCH 15/21] TT-7441 Make sure that that AppBar is also padded
 consistently with the rest of the screen

---
 src/renderer/src/components/App/AppHead.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/src/components/App/AppHead.tsx b/src/renderer/src/components/App/AppHead.tsx
index 5cb93ea6..652ab0a5 100644
--- a/src/renderer/src/components/App/AppHead.tsx
+++ b/src/renderer/src/components/App/AppHead.tsx
@@ -284,6 +284,7 @@ export const AppHead = (props: IProps) => {
       sx={{
         width: '100%',
         display: 'flex',
+        px: 1.5,
         backgroundColor: 'custom.headerBackground',
       }}
       color="inherit"

From ed29501e566121dc46b87a9fde8fe4aae57054f0 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 14:08:35 -0500
Subject: [PATCH 16/21] TT-7441 Revert to default MUI icon button padding size

---
 src/renderer/src/components/App/MobileToolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/App/MobileToolbar.tsx b/src/renderer/src/components/App/MobileToolbar.tsx
index a51c609b..11ccd567 100644
--- a/src/renderer/src/components/App/MobileToolbar.tsx
+++ b/src/renderer/src/components/App/MobileToolbar.tsx
@@ -42,11 +42,11 @@ export const MobileToolbar = ({
   return (
     <Toolbar disableGutters>
       {!isDetail ? (
-        <IconButton onClick={() => navigate('/team')} sx={{ p: 0 }}>
+        <IconButton onClick={() => navigate('/team')}>
           <ApmLogo sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       ) : (
-        <IconButton onClick={() => navigate(planUrl || '/team')} sx={{ p: 0 }}>
+        <IconButton onClick={() => navigate(planUrl || '/team')}>
           <ArrowBackIcon sx={{ width: '24px', height: '24px' }} />
         </IconButton>
       )}

From a1405b673d02be6eb6869c7b2bd08969bbf684a4 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 14:09:15 -0500
Subject: [PATCH 17/21] TT-7441 Use different icon style and don't make it in
 primary color

---
 src/renderer/src/components/HelpMenu.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/HelpMenu.tsx b/src/renderer/src/components/HelpMenu.tsx
index 45442834..c9e8f304 100644
--- a/src/renderer/src/components/HelpMenu.tsx
+++ b/src/renderer/src/components/HelpMenu.tsx
@@ -7,7 +7,7 @@ import ReportIcon from '@mui/icons-material/Report';
 import NotesIcon from '@mui/icons-material/SpeakerNotes';
 import BooksIcon from '@mui/icons-material/LibraryBooks';
 import TrainingIcon from '@mui/icons-material/FlightClass';
-import HelpIcon from '@mui/icons-material/Help';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import InfoIcon from '@mui/icons-material/Info';
 import DownloadIcon from '@mui/icons-material/CloudDownload';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -178,10 +178,9 @@ export function HelpMenu(props: IProps) {
       <IconButton
         aria-controls="customized-menu"
         aria-haspopup="true"
-        color="primary"
         onClick={handleClick}
       >
-        <HelpIcon />
+        <HelpOutlineIcon />
       </IconButton>
       <StyledMenu
         id="helpClose"
@@ -193,14 +192,14 @@ export function HelpMenu(props: IProps) {
       >
         <StyledMenuItem id="helpHelp" onClick={handleHelp('')}>
           <ListItemIcon>
-            <HelpIcon />
+            <HelpOutlineIcon />
           </ListItemIcon>
           <ListItemText primary={t.helpCenter} />
         </StyledMenuItem>
         {planRec && (
           <StyledMenuItem id="helpSheet" onClick={handleHelp(spreadsheetTopic)}>
             <ListItemIcon>
-              <HelpIcon />
+              <HelpOutlineIcon />
             </ListItemIcon>
             <ListItemText primary={t.helpSpreadsheet} />
           </StyledMenuItem>

From ffb840b5e8995ea049a6f7fca9b9f0ac968aff13 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 14:10:08 -0500
Subject: [PATCH 18/21] TT-7441 Turn it into an icon button rather than a
 regular button so that it would fit nicely with user avatar

---
 src/renderer/src/components/UserMenu.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/UserMenu.tsx b/src/renderer/src/components/UserMenu.tsx
index c630f36e..ef149498 100644
--- a/src/renderer/src/components/UserMenu.tsx
+++ b/src/renderer/src/components/UserMenu.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useGlobal } from '../context/useGlobal';
 import { IMainStrings, ISharedStrings, User, UserD } from '../model';
 import {
-  Button,
+  IconButton,
   ListItemIcon,
   ListItemText,
   Typography,
@@ -97,15 +97,14 @@ export function UserMenu(props: IProps) {
 
   return (
     <div>
-      <Button
+      <IconButton
         id="userMenu"
         aria-controls="custom-user-menu"
         aria-haspopup="true"
         onClick={handleClick}
-        sx={{ minWidth: '24px', minHeight: '24px' }}
       >
         <UserAvatar userRec={userRec} small={small} />
-      </Button>
+      </IconButton>
       <StyledMenu
         id="custom-user-menu"
         anchorEl={anchorEl}

From 268c47b6e896f6ffc7b6615043c71ed21df02560 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 14:29:18 -0500
Subject: [PATCH 19/21] TT-7441 Footer should also use the custom background
 color

---
 .../components/PassageDetail/PassageDetailMobileLayout.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
index 757a33a2..f2bb5c0a 100644
--- a/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
+++ b/src/renderer/src/components/PassageDetail/PassageDetailMobileLayout.tsx
@@ -68,12 +68,11 @@ export default function PassageDetailMobileLayout({
       )}
       <Box
         sx={{
-          backgroundColor: 'background.default',
+          backgroundColor: 'custom.headerBackground',
           borderTop: '1px solid',
           borderColor: 'divider',
-          px: 1,
-          pt: '4px',
-          pb: 'calc(2px + env(safe-area-inset-bottom, 0px))',
+          px: 1.5,
+          py: 1,
         }}
       >
         {footer}

From 60e31e09f0ce3100e37cd331b2fbc897444a987c Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:35:16 -0500
Subject: [PATCH 20/21] TT-7441 Make the next/previous footer buttons sized
 consistently (rather than based on the length of its labels)

---
 .../mobile/PassageDetailMobileFooter.tsx      | 97 ++++++++-----------
 1 file changed, 38 insertions(+), 59 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx b/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
index 437d7d51..98e3b225 100644
--- a/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx
@@ -30,16 +30,15 @@ function NavButtonLabel({
 }: {
   text: string;
   title?: string;
-  align: 'left' | 'right';
+  align: 'left' | 'center' | 'right';
 }) {
   return (
     <Box
       component="span"
       title={title ?? text}
       sx={{
-        display: 'block',
+        flexGrow: 1,
         minWidth: 0,
-        maxWidth: '100%',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -143,69 +142,49 @@ export default function PassageDetailMobileFooter() {
     }
   };
 
+  const navButtonSx = {
+    flex: 1,
+    minWidth: 'clamp(60px, 16vw, 100px)',
+    maxWidth: 'clamp(110px, 30vw, 190px)',
+  } as const;
+
   return (
     <Box
       sx={{
-        display: 'grid',
-        gridTemplateColumns: isBoldWorkflow
-          ? 'minmax(0, 1fr) minmax(0, 1fr)'
-          : 'minmax(0, 1fr) auto minmax(0, 1fr)',
+        display: 'flex',
         alignItems: 'center',
-        gap: 0.5,
+        justifyContent: 'space-between',
+        gap: 1,
         width: '100%',
-        minHeight: 0,
       }}
     >
-      <Box sx={{ minWidth: 0, display: 'flex', justifyContent: 'flex-start' }}>
-        <Button
-          size="small"
-          startIcon={<ArrowBackIcon fontSize="small" />}
-          onClick={() => handleNavigate(false)}
-          disabled={!prevNavEnabled}
-          sx={{
-            minWidth: 0,
-            maxWidth: '100%',
-            justifyContent: 'flex-start',
-          }}
-        >
-          <NavButtonLabel
-            text={prevButtonText}
-            title={prevLabelFull}
-            align="left"
-          />
-        </Button>
-      </Box>
-      {!isBoldWorkflow && (
-        <Box
-          sx={{
-            flexShrink: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            minWidth: 'min-content',
-          }}
-        >
-          <MobileStepComplete />
-        </Box>
-      )}
-      <Box sx={{ minWidth: 0, display: 'flex', justifyContent: 'flex-end' }}>
-        <Button
-          size="small"
-          endIcon={<ArrowForwardIcon fontSize="small" />}
-          onClick={() => handleNavigate(true)}
-          disabled={!nextNavEnabled}
-          sx={{
-            minWidth: 0,
-            maxWidth: '100%',
-            justifyContent: 'flex-end',
-          }}
-        >
-          <NavButtonLabel
-            text={nextButtonText}
-            title={nextLabelFull}
-            align="right"
-          />
-        </Button>
-      </Box>
+      <Button
+        size="small"
+        startIcon={<ArrowBackIcon fontSize="small" />}
+        onClick={() => handleNavigate(false)}
+        disabled={!prevNavEnabled}
+        sx={{ ...navButtonSx, justifyContent: 'center' }}
+      >
+        <NavButtonLabel
+          text={prevButtonText}
+          title={prevLabelFull}
+          align="center"
+        />
+      </Button>
+      {!isBoldWorkflow && <MobileStepComplete />}
+      <Button
+        size="small"
+        endIcon={<ArrowForwardIcon fontSize="small" />}
+        onClick={() => handleNavigate(true)}
+        disabled={!nextNavEnabled}
+        sx={{ ...navButtonSx, justifyContent: 'center' }}
+      >
+        <NavButtonLabel
+          text={nextButtonText}
+          title={nextLabelFull}
+          align="center"
+        />
+      </Button>
     </Box>
   );
 }

From 87fc1a201022033111919e40b36eee71919a20c0 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:35:48 -0500
Subject: [PATCH 21/21] TT-7441 Make step complete into a button

---
 .../mobile/MobileStepComplete.tsx             | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
index 787fe93d..cfcbee31 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useGlobal } from '../../../context/useGlobal';
-import { Box, IconButton, Typography } from '@mui/material';
-import CompleteIcon from '@mui/icons-material/CheckBoxOutlined';
+import { Box, Button } from '@mui/material';
+import CompleteIcon from '@mui/icons-material/CheckBox';
 import NotCompleteIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import usePassageDetailContext from '../../../context/usePassageDetailContext';
 import { IPassageDetailStepCompleteStrings } from '../../../model';
@@ -78,37 +78,43 @@ export default function MobileStepComplete() {
   if (isBoldWorkflow) return null;
 
   return (
-    <Box
+    <Button
+      id="mobile-complete"
+      size="small"
+      title={t.title}
+      onClick={handleToggleComplete}
+      disabled={
+        !hasPermission || view !== '' || recording || busy || importexportBusy
+      }
+      startIcon={
+        complete ? (
+          <CompleteIcon
+            id="step-yes"
+            fontSize="small"
+            sx={{ color: 'black' }}
+          />
+        ) : (
+          <NotCompleteIcon id="step-no" fontSize="small" />
+        )
+      }
       sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 0.25,
-        minHeight: 0,
-        flexShrink: 0,
+        minWidth: 0,
         maxWidth: '100%',
       }}
     >
-      <IconButton
-        id="mobile-complete"
-        size="small"
-        title={t.title}
-        onClick={handleToggleComplete}
-        disabled={
-          !hasPermission || view !== '' || recording || busy || importexportBusy
-        }
-      >
-        {complete ? (
-          <CompleteIcon id="step-yes" fontSize="small" />
-        ) : (
-          <NotCompleteIcon id="step-no" fontSize="small" />
-        )}
-      </IconButton>
-      <Typography
-        variant="body2"
-        sx={{ lineHeight: 1.2, whiteSpace: 'nowrap' }}
+      <Box
+        component="span"
+        sx={{
+          display: 'block',
+          minWidth: 0,
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
       >
         {t.title}
-      </Typography>
-    </Box>
+      </Box>
+    </Button>
   );
 }