[#271] Lowered sticky header below Drupal administration z-index band. - #272
Conversation
AlexSkrypnyk
added
A1
📝 WalkthroughWalkthroughThe sticky header’s base z-index is lowered below Drupal administration layers and raised to the flyout tier when mobile navigation expands. Behat gains computed z-index assertions and scenarios covering desktop administration chrome and mobile navigation stacking. ChangesHeader stacking behavior
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Admin as Site administrator
participant FeatureContext
participant Browser as Browser DOM
Admin->>FeatureContext: Run admin navigation scenario
FeatureContext->>Browser: Visit page and configure viewport
FeatureContext->>Browser: Trigger mobile navigation when required
FeatureContext->>Browser: Read computed z-index values
Browser-->>FeatureContext: Return stacking values
FeatureContext-->>Admin: Assert stacking order
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.14.1)web/themes/custom/drevops/components/03-organisms/header/header.scssConfigurationError: Could not find " web/themes/custom/drevops/components/variables.components.scssConfigurationError: Could not find " Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/behat/bootstrap/FeatureContext.php`:
- Around line 171-176: Rename the elementAssertStacksAbove parameter
$other_selector to $otherSelector and update all references within the method,
including the z-index lookup, exception message, and formatting arguments.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 489bc065-ab6d-445c-b8d8-261abc46ea2f
📒 Files selected for processing (4)
tests/behat/bootstrap/FeatureContext.phptests/behat/features/admin_navigation.featureweb/themes/custom/drevops/components/03-organisms/header/header.scssweb/themes/custom/drevops/components/variables.components.scss
|
Code coverage (threshold: 80%) Per-class coverage |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #272 +/- ##
========================================
Coverage 89.16% 89.16%
========================================
Files 15 15
Lines 203 203
========================================
Hits 181 181
Misses 22 22 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
AlexSkrypnyk
added
the
Needs review
2 participants
Closes #271
Checklist before requesting a review
[#123] Verb in past tense.#271added to descriptionChangedsectionChanged
$ct-header-sticky-zindexfrom500to400inweb/themes/custom/drevops/components/variables.components.scss, moving the sticky site header below the entire z-index band Drupal reserves for administration chrome (navigation top bar490through tooltip801), so admin overlays and the popups they open are never trapped underneath it.&:has([data-flyout-expanded])rule to.ct-header--stickyinweb/themes/custom/drevops/components/03-organisms/header/header.scssthat lifts the header to$ct-flyout-zindexwhile the mobile navigation flyout is open, because the flyout panel is a descendant of the header and is capped by the header's own stacking context.Then the element :selector should stack above the element :other_selectorand a protectedelementZindex()helper totests/behat/bootstrap/FeatureContext.php, comparing computed z-index via the existingelementExecuteJshelper and rejecting a non-numeric value instead of silently treating it as zero. Wired inResponsiveTraitfor viewport resizing.@api @javascriptscenarios totests/behat/features/admin_navigation.feature: the administration top bar stacks above the sticky header, and, with the mobile navigation open at 390x844, the header stacks above the top bar.Screenshots
Before / After
Summary by CodeRabbit