Improve file header on mobile (#19945) - File headers can become quite width, so ensure the file size is not being wrapped into itself(width + padding-right) and allow the overflow to be scrolled(overflow-x).

Changes

2 changed files (+4/-2)

• templates/repo/view_file.tmpl
  • @@ -1,6 +1,6 @@
    <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content"> <h4 class="file-header ui top attached header df ac sb"> - <div class="file-header-left df ac"> + <div class="file-header-left df ac pr-4"> {{if .ReadmeInList}} {{svg "octicon-book" 16 "mr-3"}} <strong>{{.FileName}}</strong>
• web_src/less/_repository.less
  • @@ -3048,9 +3048,10 @@ td.blob-excerpt {
    } .file-header { + align-items: center; display: flex; justify-content: space-between; - align-items: center; + overflow-x: scroll; padding: 8px 12px !important; }
  • @@ -3062,6 +3063,7 @@ td.blob-excerpt {
    .file-info-entry { display: flex; align-items: center; + width: max-content; } .file-info-entry + .file-info-entry {