Bug: When ftb open, blob page header for .md files is not displaying correctly
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Context
See !217853 (comment 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.
Expected: Current responsive breakpoint for .md file blob header File tree browser File tree browser is closed. Blob header width: 552px
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.
File tree browser is open. Blob header width: 518px.
Implementation plan
generated by duo, verified by a human (me)
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-parentstyles 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.