Fix SCSS interpolation on MR sticky sidebar height and margin-bottom
What does this MR do and why?
The height
and margin-bottom
properties for the moved MR sticky sidebar weren't being computed from SCSS variables to CSS values.
The sidebar was previously using a negative margin-bottom
to compensate for $content-wrapper-padding
(100px
) at the bottom of the viewport.
The height
property allows the sidebar to be scrolled independently of the viewport at smaller heights (or when sidebar content extends past the viewport height).
SCSS variables need to be interpolated within calc()
blocks for the values to be computed
Before:
@media (min-width: 992px) {
.right-sidebar.right-sidebar-expanded .issuable-sidebar.is-merge-request .issuable-context-form {
height: calc(calc(100vh - calc(var(--header-height, 48px) + calc(var(--system-header-height) + var(--performance-bar-height)) + var(--top-bar-height)) - var(--system-footer-height)) - 76px - var(--mr-review-bar-height) - $content-wrapper-padding);
margin-bottom: calc((var(--header-height, 48px) + $issue-sticky-header-height) * -1);
}
}
After:
@media (min-width: 992px) {
.right-sidebar.right-sidebar-expanded .issuable-sidebar.is-merge-request .issuable-context-form {
height: calc(calc(100vh - calc(var(--header-height, 48px) + calc(var(--system-header-height) + var(--performance-bar-height)) + var(--top-bar-height)) - var(--system-footer-height)) - 72px - var(--mr-review-bar-height));
margin-bottom: calc((100px * -1) + var(--mr-review-bar-height));
}
}
Changes
- Update local
$issue-sticky-header-height
variable to use global$mr-sticky-header-height
variable - Remove
$content-wrapper-padding
from height calculation - Update
margin-bottom
to compensate for bottom padding
Screenshots or screen recordings
Before | After |
---|---|
CleanShot_2023-06-06_at_12.19.09 | CleanShot_2023-06-06_at_14.31.30 |
How to set up and validate locally
- Enable
Feature.enable(:moved_mr_sidebar)
- View MR page e.g. http://127.0.0.1:3000/flightjs/Flight/-/merge_requests/4
- Scroll to bottom of page
- Right sidebar should not scroll up
- Decrease height so sidebar contents are longer than viewport height
- Scroll inside sidebar contents without scrolling viewport
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Merge request reports
Activity
changed milestone to %16.1
added devopsmanage groupfoundations sectiondev severity4 typebug labels
assigned to @sdejonge
Please wait for Reviewer Roulette to suggest a designer for UX review, and then assign them as Reviewer. This helps evenly distribute reviews across UX.
This message was generated automatically. You're welcome to improve it.
- Resolved by Peter Hegman
@annabeldunstone could you please review UX for these styles since you have context of the original fix !122509 (merged)
requested review from @annabeldunstone
2 Warnings You've made some app changes, but didn't add any tests.
That's OK as long as you're refactoring existing code,
but please consider adding any of the maintenancepipelines, maintenancerefactor, maintenanceworkflow, documentation, QA labels.Please add a merge request subtype to this merge request. Reviewer roulette
Changes that require review have been detected!
Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:
Category Reviewer Maintainer frontend Tomáš Bulva (
@tbulva
) (UTC+2, 8 hours behind@sdejonge
)Paul Gascou-Vaillancourt (
@pgascouvaillancourt
) (UTC-4, 14 hours behind@sdejonge
)UX Amelia Bauerly (
@ameliabauerly
) (UTC-7, 17 hours behind@sdejonge
)Maintainer review is optional for UX To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.
To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.
Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.
If needed, you can retry the
danger-review
job that generated this comment.Generated by
Danger- Resolved by Peter Hegman
- Resolved by Peter Hegman
- Resolved by Scott de Jonge
@slashmanov could you please review frontend? Thank you!
requested review from @slashmanov
Bundle size analysis [beta]
This compares changes in bundle size for entry points between the commits a689aeeb and 305a1d6e
Special assetsEntrypoint / Name Size before Size after Diff Diff in percent average 4.14 MB 4.14 MB - 0.0 % mainChunk 2.99 MB 2.99 MB - 0.0 %
Note: We do not have exact data for a689aeeb. So we have used data from: 27f59b50.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
DangerAllure report
allure-report-publisher
generated test report!e2e-test-on-gdk:
test report for 305a1d6eexpand test summary
+-----------------------------------------------------------------------+ | suites summary | +------------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +------------------+--------+--------+---------+-------+-------+--------+ | Govern | 2 | 0 | 0 | 0 | 2 | ✅ | | Plan | 4 | 0 | 0 | 0 | 4 | ✅ | | Create | 8 | 0 | 1 | 0 | 9 | ✅ | | Monitor | 4 | 0 | 0 | 0 | 4 | ✅ | | Data Stores | 2 | 0 | 0 | 1 | 2 | ❗ | | Framework sanity | 0 | 0 | 1 | 0 | 1 | ➖ | | Manage | 1 | 0 | 0 | 0 | 1 | ✅ | +------------------+--------+--------+---------+-------+-------+--------+ | Total | 21 | 0 | 2 | 1 | 23 | ❗ | +------------------+--------+--------+---------+-------+-------+--------+
e2e-review-qa:
test report for 305a1d6eexpand test summary
+-----------------------------------------------------------------------+ | suites summary | +------------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +------------------+--------+--------+---------+-------+-------+--------+ | Plan | 3 | 0 | 1 | 0 | 4 | ✅ | | Manage | 8 | 0 | 3 | 0 | 11 | ✅ | | Monitor | 4 | 0 | 0 | 0 | 4 | ✅ | | Create | 8 | 0 | 1 | 0 | 9 | ✅ | | Data Stores | 2 | 0 | 0 | 1 | 2 | ❗ | | Govern | 2 | 0 | 0 | 0 | 2 | ✅ | | Framework sanity | 0 | 0 | 1 | 0 | 1 | ➖ | +------------------+--------+--------+---------+-------+-------+--------+ | Total | 27 | 0 | 6 | 1 | 33 | ❗ | +------------------+--------+--------+---------+-------+-------+--------+
added 238 commits
-
21ab32b6...6fb52274 - 236 commits from branch
master
- cbe0ca99 - Fix SCSS interpolation on MR sticky sidebar height and margin-bottom
- 305a1d6e - Fix margin-bottom for MR review bar offset
-
21ab32b6...6fb52274 - 236 commits from branch
removed review request for @annabeldunstone
@annabeldunstone
, thanks for approving this merge request.This is the first time the merge request is approved. To ensure full test coverage, a new pipeline will be started shortly.
For more info, please refer to the following links:
added pipeline:mr-approved label
requested review from @peterhegman and removed review request for @slashmanov
enabled an automatic merge when the pipeline for 3f1e8201 succeeds
mentioned in commit 36bcff26
added workflowstaging-canary label
added workflowcanary label and removed workflowstaging-canary label
added workflowstaging label and removed workflowcanary label
added workflowproduction label and removed workflowstaging label
added workflowpost-deploy-db-staging label and removed workflowproduction label
added workflowpost-deploy-db-production label and removed workflowpost-deploy-db-staging label
mentioned in issue gitlab-org/manage/foundations/team-tasks#268
added releasedcandidate label
added releasedpublished label and removed releasedcandidate label