HTML/CSS inconsistent comment forms on Issuable (Issue and Merge Request)
Summary
Comment forms on Issuable (namely Issue and Merge Request) are inconsistent in terms of their CSS selectors.
Steps to reproduce
Access to the following Issuable pages and then scroll to the bottom on mobile (or on responsive mode/mobile simulator):
- https://gitlab.com/gitlab-org/gitlab-ce/issues/1
- https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/1
What is the current bug behavior?
- | Issue | Merge Request |
---|---|---|
common (ancestors) | html.with-performance-bar > body.ui_indigo > div.layout-page.page-gutter.page-with-contextual-sidebar.right-sidebar-collapsed.page-with-icon-sidebar > div.content-wrapper > div.container-fluid.container-limited.limit-container-width > div#content-body.content |
html.with-performance-bar > body.ui_indigo > div.layout-page.page-gutter.page-with-contextual-sidebar.right-sidebar-collapsed.page-with-icon-sidebar > div.content-wrapper > div.container-fluid.container-limited.limit-container-width > div#content-body.content |
1 | - | div.merge-request |
2 | div.issue-details.issuable-details |
div.merge-request-details.issuable-details |
3 | - | div#diff-notes-app.tab-content |
4 | - | div#notes.notes.tab-pane.voting_notes.active |
5 | - | div.row |
6 | - | section.col-md-12 |
7 | section.issuable-discussion |
div.issuable-discussion.js-vue-notes-event |
8 | section.js-vue-notes-event |
- |
(9) | div#notes |
div#notes |
10 | div |
- |
(11) | ul.notes.notes-form.timeline |
ul.notes.notes-form.timeline |
(12) | li.timeline-entry |
li.timeline-entry |
(13) | div.timeline-entry-inner |
div.timeline-entry-inner |
(14) | div.timeline-content.timeline-content-form |
div.timeline-content.timeline-content-form |
15 | form.new-note.common-note-form.gfm-form.js-main-target-form |
form.new-note.js-quick-submit.common-note-form.gfm-form.js-main-target-form |
16 | - | div.discussion-form-container |
17 | div.md-area.js-vue-markdown-field.gfm-form |
div.md-area |
Note: the numbers in parenthesis denote the exactly same line of code.
Screenshots
Cases | Screenshot(s) |
---|---|
Issue (PC) | |
MR (PC) | |
Issue (mobile) | |
MR (mobile) |
What is the expected correct behavior?
The width of Issue/MR comment forms should be the same.
Output of checks
This CSS bug happens on GitLab.com.
Possible fixes
We can unify these HTML structures into a single CSS selector.
Edited by Takuya Noguchi