Migrate find_file interface to container queries

Chad Lavimoniererequested to merge
559700-confidential-issue into master

What does this MR do and why?

Migrate find_file interface to container queries

Files checked in this migration:

/app/views/projects/find_file/show.html.haml
/app/assets/stylesheets/page_bundles/tree.scss
/app/assets/javascripts/pages/projects/find_file/ref_switcher/index.js
/app/assets/javascripts/search/under_topbar/index.js
/app/assets/javascripts/ref/components/ref_selector.vue
/app/assets/javascripts/vue_shared/components/badges/protected_badge.vue

References

Screenshots or screen recordings

Before After
Screenshot_2025-09-11_at_11.24.50 Screenshot_2025-09-11_at_11.24.33

How to set up and validate locally

The migrated find_file interface is only accessible by visiting its URL directly.

  1. Check out this branch
  2. In the GDK, visit http://gdk.test:3000/flightjs/Flight/-/find_file/master
  3. Open the chat panel and resize your viewport so that the main panel will be les than 576px wide
  4. You will see that the main panel content adapts the same layout that it would have previously when the viewport was less than 576px wide

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 #559700

Merge request reports