From d44cb8e4bab2d80f91e9a0f778f2b158a26e5d91 Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:17:58 -0500
Subject: [PATCH 1/3] TT-7368 Constrain passage dropdown width with ellipsis
 truncation

---
 .../mobile/MobileWorkflowSteps.tsx             | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index 0f3e1acd..c8d63f29 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -225,8 +225,10 @@ export default function MobileWorkflowSteps() {
             size="small"
             endIcon={hasMultipleOptions ? <ArrowDropDownIcon /> : undefined}
             sx={{
-              whiteSpace: 'nowrap',
               minWidth: 'auto',
+              // 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' },
             }}
             onClick={(e) => {
               if (!hasMultipleOptions) return;
@@ -239,7 +241,19 @@ export default function MobileWorkflowSteps() {
             }}
             data-cy="passage-dropdown"
           >
-            {isStepProgression ? passageRef(passage) : getWfLabel(currentLabel)}
+            <Box
+              component="span"
+              sx={{
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {isStepProgression
+                ? passageRef(passage)
+                : getWfLabel(currentLabel)}
+            </Box>
           </Button>
           <Menu
             anchorEl={passageMenuAnchor}

From ff060a338bc9a41f8e6177f4261269a1147e07fd Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:33:12 -0500
Subject: [PATCH 2/3] TT-7368 Make sure that dropdown menu items also truncates
 with ellipsis

---
 .../PassageDetail/mobile/MobileWorkflowSteps.tsx     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index c8d63f29..651ca933 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -269,6 +269,12 @@ export default function MobileWorkflowSteps() {
                       navigateToPassage(p);
                       setPassageMenuAnchor(null);
                     }}
+                    sx={{
+                      display: 'block',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
                   >
                     {passageRef(p)}
                   </MenuItem>
@@ -281,6 +287,12 @@ export default function MobileWorkflowSteps() {
                       handleSelect(step.id)();
                       setPassageMenuAnchor(null);
                     }}
+                    sx={{
+                      display: 'block',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
                   >
                     {getWfLabel(step.label)}
                   </MenuItem>

From d1449a32a2b2d75e45388cd38cd9df2487a3684e Mon Sep 17 00:00:00 2001
From: Jiho Kim <55632840+nghtctrl@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:37:27 -0500
Subject: [PATCH 3/3] TT-7368 Don't apply uppercase to dropdown label by
 default

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

diff --git a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
index 651ca933..b76ea5e9 100644
--- a/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
+++ b/src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx
@@ -226,6 +226,7 @@ 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' },