Top nav bar z-index

[twschiller]

The z-index of the top nav is too high. It's above our toasts and also the modal backdrop

Fix top nav z-index relative to

• Modal backdrop
• Toasts

Related PRs:

• Move CSS to CSS Modules + fix option’s page scrolling behavior #2704
• Or maybe this? #2552: blueprints page information hierarchy #2702

Related Code

• http://github.com/pixiebrix/pixiebrix-app/blob/e4c29ef9258bc5d08e0e5bdbacb7fb76abbdd00a/pixiebrix-app/src/layout/Navbar.module.scss#L3-L3

[twschiller]

@fregante I suspect this is a regression from the CSS Module PR?

[fregante]

Fix top nav z-index relative to

• Modal backdrop

Which modal? The Services modal works correctly as its z-index is sky-high

[twschiller]

Here's the z-index craziness:

• http://github.com/pixiebrix/pixiebrix-extension/blob/dc30b02f757302c85b0120eaa80aee2f9fc661b3/src/options/pages/installed/ShareExtensionModal.module.scss#L19-L19
• http://github.com/pixiebrix/pixiebrix-extension/blob/dc30b02f757302c85b0120eaa80aee2f9fc661b3/src/options.scss#L25-L25

I think we made a mistake converting the ShareExtensionModal to a module. The Google File Picker comment is not relevant to the ShareExtensionModal. It comes up with the ServiceEditorModal http://github.com/pixiebrix/pixiebrix-extension/blob/dc30b02f757302c85b0120eaa80aee2f9fc661b3/src/options/pages/services/ServiceEditorModal.tsx#L54-L54

As part of #2749, we're definitely going to want define all the z-indexes as variable: e.g., a variable for backdrop, modal, toast, etc.

[fregante]

Here's the z-index craziness:

Ah indeed, we think we need to bump those values so they're naturally above the site header (whose z-index is defined by Bootstrap)

As part of #2749, we're definitely going to want define all the z-indexes as variable: e.g., a variable for backdrop, modal, toast, etc.

Can we use SCSS variables in JS? Because that's the issue sometimes. Or maybe we should just stop using inline CSS for zIndex (but it's not always possible)

pixiebrix-extension/src/contentScript/notify.tsx

Lines 33 to 34 in 083c50f

	const containerStyle: React.CSSProperties = {
	zIndex: NOTIFICATIONS_Z_INDEX,