<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Work on this issue](https://contributors.gitlab.com/manage-issue?action=work&projectId=278964&issueIid=585460) - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=585460) </details> <!--IssueSummary end--> ## Context See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/217853#note_2993585462 > **follow-up bug (non-blocking for release)** in blob pages for .md files, resizing the content area produces an a misalignment of elements in the blob header. Resize the viewport, or the file tree browser, so that the blob header width is 518 - 553px wide to see this issue. > > <table> > <tr> > <th>Expected: Current responsive breakpoint for .md file blob header</th> > <th>File tree browser</th> > </tr> > <tr> > <td> > > File tree browser is **closed**. Blob header width: 552px > > {width="208" height="274"}{width="207" height="272"} > </td> > <td> > > File tree browser is **open**. Blob header width: 553px. Blob header elements look misaligned, and are not following the same breakpoint rules when the file tree browser is open vs. closed. > > {width="845" height="582"} > > {width="846" height="582"} > > File tree browser is open. Blob header width: 518px. > > {width="809" height="587"} > </td> > </tr> > </table> > ## Implementation plan _generated by duo, verified by a human (me) :tm:_ The key file is **`app/assets/javascripts/blob/components/blob_header.vue`**. ### The Bug The issue is about the blob header's responsive layout for `.md` files breaking when the file tree browser (FTB) is open. The header uses a container query breakpoint class `@md/panel:gl-mb-0` to control when the filepath and file actions wrap vs. display inline. When the FTB is open, it reduces the blob header's available width, but the container query breakpoints don't adjust properly, causing misaligned elements at widths between \~518-553px. ### What to Fix The responsive breakpoint `@md/panel` in the template (line with `class="gl-mb-3 gl-flex gl-gap-3 @md/panel:gl-mb-0"`) and potentially the parent `file-title-flex-parent` CSS need to be adjusted so the layout responds correctly to the narrower content area when the FTB is open. You may also need to check the SCSS for `.file-title-flex-parent` in the stylesheets: - **Primary file**: `app/assets/javascripts/blob/components/blob_header.vue` - the container query breakpoint class needs adjustment - **Related CSS**: Check `app/assets/stylesheets/` for `.file-title-flex-parent` styles that may define the container and its breakpoint behavior The fix would involve adjusting the container query breakpoint threshold so the header elements wrap/stack correctly at the narrower widths caused by the FTB being open. ## Contact Person @ms.mondrian @jerasmus