Migrate commit file view to container queries

Chad Lavimoniererequested to merge
559677-confidential-issue into master

What does this MR do and why?

Migrate commit file view to container queries

Files checked in this migration:

/app/views/projects/commit/diff_files.html.haml
/app/views/projects/diffs/_file.html.haml
/app/helpers/diff_helper.rb
/app/views/projects/_fork_suggestion.html.haml
/app/views/projects/diffs/_content.html.haml
/app/views/projects/diffs/_viewer.html.haml
/app/views/projects/diffs/_render_error.html.haml
/app/assets/javascripts/pages/projects/commit/show/index.js
/app/assets/javascripts/init_diff_stats_dropdown.js
/app/assets/javascripts/vue_shared/components/diff_stats_dropdown.vue
/app/assets/javascripts/diffs/components/diff_stats.vue
/app/views/projects/diffs/_file_header.html.haml

References

  • #559677+

Screenshots or screen recordings

Before After
Screenshot_2025-09-11_at_10.46.28 Screenshot_2025-09-11_at_10.45.25

How to set up and validate locally

  1. Check out this branch
  2. with paneled view on, visit a commit
  3. Open the duo chat panel
  4. resize your viewport so that the panel that contains the commit will be less than 576px wide
  5. The diff file stats and actions (the content on the right end of the file header bar) will disappear when the panel is less than 576px wide, because now it uses a container query

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #559677

Edited by Chad Lavimoniere

Merge request reports