diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 6860f3c29c29c878e28c6643156b9b5012233f94..e94f2e0e6d773770fa500eb58585050343c4977f 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/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!">
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f8710cc1346aba2831c52320c9a1907f9aac4449..fe8c27ae9b6fe76f333631b5a5679e2bba2d1533 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/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;
}
}
}
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index f921b832c0f56f9d5dcb30a8667cb13c3173119a..981b5e4d92b2892ddb75eb27ad70245e9704f4b5 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -68,7 +68,7 @@ def encode_ide_path(path)
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 gl-mr-3 #{options[:extra_class]}"
data = { track_event: 'click_edit', track_label: 'Edit' }
if Feature.enabled?(:web_ide_primary_edit, project.group)
@@ -88,7 +88,7 @@ def edit_blob_button(project = @project, ref = @ref, path = @path, options = {})
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 gl-mr-3'
data = { track_event: 'click_edit_ide', track_label: 'Web IDE' }
unless Feature.enabled?(:web_ide_primary_edit, project.group)
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 7c644013283a33c7e4cacf92a8e93292694ccfda..6d01206a12833622a67f8fb476ce1e61b1252829 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/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
diff --git a/app/views/projects/blob/_header_content.html.haml b/app/views/projects/blob/_header_content.html.haml
index 0f4d9aa638125985ee05a1508de99347c97586d9..b310939c5a361ae8050d1653d4e16f242e410453 100644
--- a/app/views/projects/blob/_header_content.html.haml
+++ b/app/views/projects/blob/_header_content.html.haml
@@ -1,7 +1,7 @@
.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)
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index e9dfda4e92701d891c778c686c3509edef96a486..f732503a23f0ee7021ff48193b8690989e4216b1 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/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.gl-mr-2
#{diff_file.a_mode} → #{diff_file.b_mode}
- if diff_file.stored_externally? && diff_file.external_storage == :lfs
diff --git a/changelogs/unreleased/218666-show-lsf-for-long-name.yml b/changelogs/unreleased/218666-show-lsf-for-long-name.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dff85fca6c576e33fbe892d584db217c0a3de457
--- /dev/null
+++ b/changelogs/unreleased/218666-show-lsf-for-long-name.yml
@@ -0,0 +1,5 @@
+---
+title: Make files header responsive and remove truncate name
+merge_request: 46406
+author:
+type: changed
diff --git a/spec/features/merge_request/user_views_diffs_spec.rb b/spec/features/merge_request/user_views_diffs_spec.rb
index 928755bf5de9970ba7cc0020d171d6316f332a2e..e1865fe2e148f0b4c6871d0efab7f3d66b996958 100644
--- a/spec/features/merge_request/user_views_diffs_spec.rb
+++ b/spec/features/merge_request/user_views_diffs_spec.rb
@@ -61,7 +61,7 @@
end
it 'expands all diffs' do
- first('.js-file-title').click
+ first('.diff-toggle-caret').click
expect(page).to have_button('Expand all')