Make files header responsive

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/218666

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -213,7 +213,7 @@ export default {
     class="js-file-title file-title file-title-flex-parent"
     @click.self="handleToggleFile"
   >
-    <div class="file-header-content gl-display-flex gl-align-items-center gl-pr-0!">
+    <div class="file-header-content">
       <gl-icon
         v-if="collapsible"
         ref="collapseIcon"
@@ -226,7 +226,7 @@ export default {
       <a
         ref="titleWrapper"
         :v-once="!viewDiffsFileByFile"
-        class="gl-mr-2 gl-text-decoration-none! gl-text-truncate"
+        class="gl-mr-2 gl-text-decoration-none! gl-word-break-all"
         :href="titleLink"
         @click="handleFileNameClick"
       >
@@ -280,12 +280,12 @@ export default {
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span v-if="isUsingLfs" class="label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
+      <span v-if="isUsingLfs" class="badge label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
     </div>
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-flex align-items-center flex-wrap"
+      class="file-actions d-flex align-items-center gl-ml-auto gl-align-self-start"
     >
       <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
       <gl-button-group class="gl-pt-0!">

app/assets/stylesheets/framework/files.scss

@@ -45,11 +45,6 @@
     }
 
     .file-actions {
-      position: absolute;
-      top: 5px;
-      right: 15px;
-      margin-left: auto;
-
       .btn:not(.btn-icon) {
         padding: 0 10px;
         font-size: 13px;
@@ -342,30 +337,14 @@ span.idiff {
     padding: $gl-padding-8 $gl-padding;
     margin: 0;
     border-radius: $border-radius-default $border-radius-default 0 0;
-  }
-
-  .file-header-content {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 30px;
-    position: relative;
-    width: auto;
-
-    @media (max-width: map-get($grid-breakpoints, sm)-1) {
-      width: 100%;
-    }
-  }
 
-  .file-holder & {
-    .file-actions {
-      position: static;
+    @include media-breakpoint-up(md) {
+      flex-wrap: nowrap;
     }
   }
 
-  .btn-clipboard {
-    position: absolute;
-    right: 0;
+  .file-header-content {
+    padding-right: 30px;
   }
 
   a {
@@ -384,15 +363,11 @@ span.idiff {
     z-index: 2;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     display: block;
 
     .file-actions {
-      white-space: normal;
-
-      .btn-group {
-        padding-top: 5px;
-      }
+      margin-top: 5px;
     }
   }
 }

app/helpers/blob_helper.rb

@@ -68,7 +68,7 @@ module BlobHelper
   def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
     return unless blob = readable_blob(options, path, project, ref)
 
-    common_classes = "btn btn-primary js-edit-blob ml-2 #{options[:extra_class]}"
+    common_classes = "btn btn-primary js-edit-blob mr-2 #{options[:extra_class]}"
     data = { track_event: 'click_edit', track_label: 'Edit' }
 
     if Feature.enabled?(:web_ide_primary_edit, project.group)
@@ -88,7 +88,7 @@ module BlobHelper
   def ide_edit_button(project = @project, ref = @ref, path = @path, blob:)
     return unless blob
 
-    common_classes = 'btn btn-primary ide-edit-button ml-2'
+    common_classes = 'btn btn-primary ide-edit-button mr-2'
     data = { track_event: 'click_edit_ide', track_label: 'Web IDE' }
 
     unless Feature.enabled?(:web_ide_primary_edit, project.group)

app/views/projects/blob/_header.html.haml

@@ -2,7 +2,7 @@
 .js-file-title.file-title-flex-parent
   = render 'projects/blob/header_content', blob: blob
 
-  .file-actions<
+  .file-actions.gl-display-flex.gl-flex-fill-1.gl-align-self-start.gl-md-justify-content-end<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
     - if Feature.enabled?(:consolidated_edit_button, @project)
       = render 'shared/web_ide_button', blob: blob

app/views/projects/blob/_header_content.html.haml

 .file-header-content
   = blob_icon blob.mode, blob.name
 
-  %strong.file-title-name{ data: { qa_selector: 'file_name_content' } }
+  %strong.file-title-name.gl-word-break-all{ data: { qa_selector: 'file_name_content' } }
     = blob.name
 
   = copy_file_path_button(blob.path)

app/views/projects/diffs/_file_header.html.haml

@@ -18,13 +18,13 @@
 
     - if diff_file.renamed_file?
       - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-      %strong.file-title-name.has-tooltip{ data: { title: diff_file.old_path, container: 'body' } }
+      %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.old_path, container: 'body' } }
         = old_path
       →
-      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } }
+      %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.new_path, container: 'body' } }
         = new_path
     - else
-      %strong.file-title-name.has-tooltip{ data: { title: diff_file.file_path, container: 'body' } }
+      %strong.file-title-name.has-tooltip.gl-word-break-all{ data: { title: diff_file.file_path, container: 'body' } }
         = diff_file.file_path
 
       - if diff_file.deleted_file?
@@ -33,7 +33,7 @@
   = copy_file_path_button(diff_file.file_path)
 
   - if diff_file.mode_changed?
-    %small
+    %small.mr-1
       #{diff_file.a_mode} → #{diff_file.b_mode}
 
   - if diff_file.stored_externally? && diff_file.external_storage == :lfs

changelogs/unreleased/218666-show-lsf-for-long-name.yml

+---
+title: Make files header responsive and remove truncate name
+merge_request: 46406
+author:
+type: changed

spec/features/merge_request/user_views_diffs_spec.rb

@@ -61,7 +61,7 @@ RSpec.describe 'User views diffs', :js do
   end
 
   it 'expands all diffs' do
-    first('.js-file-title').click
+    first('.diff-toggle-caret').click
 
     expect(page).to have_button('Expand all')