Prevent Anchor icon appearing before the heading in Preview mode of comment box from getting cut off partially
What does this MR do and why?
This MR changes the margin-left
property from -20px
to -10px
for all the anchor tags which appears inside heading when seen in Preview mode in comment box. The anchor icon now appear completely on the screen.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Before
After changing margin-left
to -10px
After changing margin-left
to -15px
Related to #500958
Merge request reports
Activity
Thanks for your contribution to GitLab @heysujal!
Did you know about our community forks? Working from there will make your contribution process easier. Please check it out!
- If you need help, page a coach by clicking here or come say hi on Discord.
- When you're ready, request a review by clicking here.
- We welcome AI-generated contributions and offer complimentary access to GitLab Duo! Check out the top of the merge request description to learn more about using AI while contributing.
- To add labels to your merge request, comment
@gitlab-bot label ~"label1" ~"label2"
.
This message was generated automatically. You're welcome to improve it.
added Community contribution workflowin dev labels
assigned to @heysujal
This merge request will be counted as part of the running Hackathon!
Find yourself in the Hackathon Leaderboard or check out the Hackathon page for more information!
This message was generated automatically. You're welcome to improve it.
added Hackathon label
added linked-issue label
added docs-only label
added devopsplan groupproject management sectiondev labels
mentioned in issue gitlab-org/quality/triage-reports#20432 (closed)
mentioned in issue gitlab-org/quality/triage-reports#20449 (closed)
added typefeature label
I am seeking feedback on my suggested fix of adding padding. If the approach sounds good, I can make changes.Changing margin-left to
-10px
property seems to do the job.Edited by Sujal Guptaadded 1 commit
- aa304fca - change margin-left of anchor inside headings in markdown preview
removed docs-only label
Please have a look at above videos and let me know which change looks better. I have initially made change to
-10px
.Edited by Sujal Gupta@gitlab-bot ready
Posted via contributors.gitlab.com.
added workflowready for review label and removed workflowin dev label
Hi Coach @splattael, this Community contribution is ready for review or needs your coaching.
- Do you have capacity and domain expertise to review this? If not, find one or more reviewers and assign to them.
- If you've reviewed it, add the workflowin dev label if these changes need more work before the next review.
- Please ensure the group's Product Manager has validated the linked issue.
This message was generated automatically. You're welcome to improve it.
requested review from @splattael
@gitlab-bot label frontend UX severity4
Thanks for helping us improve the UX of GitLab. Your contribution is appreciated! We have pinged our UX team, so stay tuned for their feedback.
This message was generated automatically. You're welcome to improve it.
requested review from @annabeldunstone
- Resolved by Annabel Dunstone Gray
Thanks for your contribution @heysujal! I think we should scope the change to just the markdown preview, rather than every anchor. And using
-16px
rather than-10px
ensures that the icon doesn't get cut off but also doesn't shift any of the content.Something like this:
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index c01740ac01a8..72759386a4af 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -65,6 +65,10 @@ min-height: 177px; padding: 10px 0; overflow-x: auto; + + a.anchor { + margin-left: -16px !important; + } } .markdown-area {
added 1 commit
- 763de438 - add margin-left to anchor tag in markdown preview
requested review from @annabeldunstone
added workflowin review label and removed workflowready for review label
- Resolved by Sujal Gupta
requested review from @deepika.guliani and removed review request for @splattael
added pipeline:mr-approved label
added pipelinetier-2 label
requested review from @clavimoniere
- Resolved by Sujal Gupta
requested review from @clavimoniere
- Resolved by Chad Lavimoniere