Move map expansion button to itinerary header #1502

alec-georgoff · 2025-12-03T21:13:04Z

Description:

This update moves the "Expand map"/"Show results" button from the map to the itinerary header component, preventing overlap issues with the map attribution on smaller screen sizes in mobile view.

PR Checklist:

Does the code follow accessibility standards (WCAG 2.1 AA Compliant)?
Are all languages supported (Internationalization/Localization)?
Are appropriate Typescript types implemented?

alec-georgoff · 2025-12-03T21:14:23Z

lib/components/narrative/narrative-itineraries-header.tsx

+          <ItinerariesHeaderContainer
+            showHeaderText={showHeaderText}
+            style={{
+              alignItems: 'flex-end',


I was going to abstract these into CSS or Styled Components, but it looks like we already use inline styling elsewhere in this file so I stuck with that.

You can add these to ItinerariesHeaderContainer, since it's a styled-component! Better to keep all the styles in the same place.

amy-corson-ibigroup · 2025-12-05T17:41:33Z

Looking really good! I haven't spent a ton of time looking at the code yet, thought it might make sense to iron out the below for this first round:

Something we discussed was replacing the button text with a chevron, which most mobile users will recognize as a way to expand/collapse the panel. Here's some examples of how this could look

The container on the button has a scroll and so you can easily accidentally get the page into a weird state:

Could be this is outside the scope of this PR, but I'm wondering if we may want to more gracefully animate the map expanding and collapsing? Right now the panel size is animated but the map is not, and there's a huge white gap mid-animation when the map resizes. Either we could animate the map height or if that doesn't work we could delay the map resizing.

Thank you so so much for the work on this!

alec-georgoff · 2025-12-08T20:48:03Z

@amy-corson-ibigroup I prevented scrolling in the collapsed header area and updated to use the chevron icon! Currently looking into the animation to see if I can clean it up a bit but wanted to get the other fixes over to you for review.

amy-corson-ibigroup

Can we move the zoom buttons to the left hand side? We're still getting some button overlap on smaller screen sizes: !
Something about the button isn't quite right to me, especially when it's collapsed... wondering how we feel about a) making the chevron icon a little wider, and/or b) when the itinerary results are collapsed, making the button the base branding color, so it matches the mobile header? idk, just a couple of ideas, I'm not married to either of them but curious what you and a second reviewer might think!

lib/components/mobile/batch-results-screen.js

amy-corson-ibigroup · 2025-12-10T16:43:13Z

lib/components/narrative/narrative-itineraries-header.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable complexity */
 import { ArrowLeft } from '@styled-icons/fa-solid/ArrowLeft'
+import { ChevronDown } from '@styled-icons/fa-solid/ChevronDown'


Probably easier to just import one icon and rotate

Well, actually I guess we import both in app-menu-items so I'll leave that to the second reviewer

Yeah, I found these via their usage in another component and figured I'd keep the same pattern here. Happy to go with a rotate strategy if you or others feel strongly, though!

amy-corson-ibigroup · 2025-12-10T16:46:02Z

lib/components/narrative/narrative-itineraries-header.tsx

+          <ItinerariesHeaderContainer
+            showHeaderText={showHeaderText}
+            style={{
+              alignItems: 'flex-end',


You can add these to ItinerariesHeaderContainer, since it's a styled-component! Better to keep all the styles in the same place.

amy-corson-ibigroup · 2025-12-10T16:52:19Z

lib/components/narrative/narrative-itineraries-header.tsx

-              <StyledIconWrapper
-                className={`${customBatchUiBackground && 'base-color-bg'}`}
+            {onClickExpansionButton && (
+              <button


This button needs to have a title and an aria-label for non-sighted users. You can repurpose the i18n strings for "expand map" and "show results"

Ah thanks for looking out for that; I assume the same value is okay for title and aria-label? That's what I implemented. If not, let me know what the difference is and I can fix

Yes, the same text is good for both! But I would create two variables showResultsText and expandMapText so you're not duplicating code.

amy-corson-ibigroup · 2025-12-10T17:06:31Z

Can we move the zoom buttons to the left hand side? We're still getting some button overlap on smaller screen sizes

Oh, I'm seeing now we have it changed for one environment in the configuration, but I think this needs to be the new default!

alec-georgoff · 2025-12-11T19:06:26Z

Can we move the zoom buttons to the left hand side? We're still getting some button overlap on smaller screen sizes: !

Something about the button isn't quite right to me, especially when it's collapsed... wondering how we feel about a) making the chevron icon a little wider, and/or b) when the itinerary results are collapsed, making the button the base branding color, so it matches the mobile header? idk, just a couple of ideas, I'm not married to either of them but curious what you and a second reviewer might think!

How about this? Made it wider and used the branding color as suggested:

alec-georgoff · 2025-12-16T20:34:40Z

Latest update uses the unicode chevron and tweaks the styling a bit to make it less intrusive:

amy-corson-ibigroup

I like the unicode chevron! thank you for the changes and for your patience! Sorry for taking a few days to review:

if you look at this on taller devices, the duration button is peeking out. I think we'll need a solution where the duration button is conditionally rendered?

The sort results button is blue now?

If we can fix it while we're touching this code that would be awesome but feel free to ignore it and we can fix later, I don't want to keep changing the scope of this PR.

lib/components/narrative/narrative-itineraries-header.tsx

alec-georgoff · 2025-12-19T16:21:01Z

I like the unicode chevron! thank you for the changes and for your patience! Sorry for taking a few days to review:

if you look at this on taller devices, the duration button is peeking out. I think we'll need a solution where the duration button is conditionally rendered?

2. The sort results button is blue now?
If we can fix it while we're touching this code that would be awesome but feel free to ignore it and we can fix later, I don't want to keep changing the scope of this PR.

Good catch on the vertical spacing! I dug into it and realized that we need to be a bit more adaptive in our sizing of the button. I ended up using the viewport height (vh) as the height of the chevron's button. Since our styling was already using a percentage of vertical screen to move the results pane down, using vh allows us to use that same percentage value for the button height.

Regarding the blue sort button, I believe that problem is fixed with the updated configuration styling! Let me know if it persists even with the updated config though.

Move map expansion button to itinerary header

0c51eea

alec-georgoff commented Dec 3, 2025

View reviewed changes

alec-georgoff assigned amy-corson-ibigroup Dec 3, 2025

amy-corson-ibigroup assigned alec-georgoff and unassigned amy-corson-ibigroup Dec 5, 2025

alec-georgoff added 2 commits December 5, 2025 13:59

Prevent scrolling of collapsed header button

df4bc0c

Update to use chevron icon

79f4e6a

alec-georgoff assigned amy-corson-ibigroup and unassigned alec-georgoff Dec 8, 2025

amy-corson-ibigroup requested changes Dec 10, 2025

View reviewed changes

amy-corson-ibigroup assigned alec-georgoff and unassigned amy-corson-ibigroup Dec 10, 2025

alec-georgoff added 6 commits December 10, 2025 13:30

Add title and aria-label to button component

8c48f28

Move styles to ItinerariesHeaderContainer styled component

b053a42

Create TOGGLE_MAP_BUTTON_HEIGHT const and implement

9756696

Merge remote-tracking branch 'origin/dev' into fix-st-mobile-map

a62b0e9

Change default zoom button position to top-left

bcab5e4

Add missing percent sign

c8bd357

Update scaling and color of chevron icon

e096357

alec-georgoff assigned amy-corson-ibigroup and unassigned alec-georgoff Dec 11, 2025

Use unicode chevron and tweak styling

a7b5e57

amy-corson-ibigroup requested changes Dec 18, 2025

View reviewed changes

lib/components/narrative/narrative-itineraries-header.tsx Outdated Show resolved Hide resolved

lib/components/narrative/narrative-itineraries-header.tsx Outdated Show resolved Hide resolved

amy-corson-ibigroup assigned alec-georgoff and unassigned amy-corson-ibigroup Dec 18, 2025

alec-georgoff added 2 commits December 19, 2025 11:10

Update UnicodeChevron to take expanded prop

b8a3746

Update styling to accommodate different vertical screen sizes

788e13d

Move map expansion button to itinerary header #1502

Are you sure you want to change the base?

Move map expansion button to itinerary header #1502

Uh oh!

Conversation

alec-georgoff commented Dec 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amy-corson-ibigroup commented Dec 5, 2025

Uh oh!

alec-georgoff commented Dec 8, 2025

Uh oh!

amy-corson-ibigroup left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amy-corson-ibigroup commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alec-georgoff commented Dec 11, 2025

Uh oh!

alec-georgoff commented Dec 16, 2025

Uh oh!

amy-corson-ibigroup left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

alec-georgoff commented Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amy-corson-ibigroup left a comment •

edited

Loading

amy-corson-ibigroup commented Dec 10, 2025 •

edited

Loading

amy-corson-ibigroup left a comment •

edited

Loading