fix flight segment's layout z-index

[arrenleung]

Alaska Airlines Pull Request

Changes the z-index of the layout class to 1 in order to prevent the layover/stopover dot from hovering over the mobile navbar. This change is specifically made for the flight search microsite.

Fixes: # (issue, if applicable)

Summary:

Please summarize the scope of the changes you have submitted, what the intent of the work is and anything that describes the before/after state of the project.

Type of change:

• [x] Revision of an existing capability

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

[CLAassistant]

All committers have signed the CLA.

[gusnaughton]

@blackfalcon do you remember if there's a reason we set this to 2 and not 1? This is causing the flight segment bubbles to appear on top of the header and footer.

[geoffrich]

Are you using the latest flightline on the flight search microsite? #12 should have addressed this.

I took a peek at https://www.alaskaair.com/search/sea/lax/2021-08-14 to repro the issue and the CSS I added in the above PR is not showing up. I would try to update to the latest component before changing the z-index.

[geoffrich]

Screenshot of flight search CSS:

There is no isolation: isolate on auro-flight-segment, which was added in v1.1.1 and should prevent these z-index issues.

[arrenleung]

Ah, it looks like the fs-matrix-flight-result component had an outdated auro-flightline. Thanks for the help @geoffrich!