Fix #47708: Ensure dropdown selections are visible (DagRuns and TaskInstancesFilter)

[davidfgcorreia]

Summary

The issue identified was that dropdown filters were not fully visible due to a fixed width, which caused truncation and incomplete display of options. Additionally, in the DAG Runs section, the dropdown size was static, limiting usability.

To resolve these issues, I implemented a dynamic sizing mechanism that allows the dropdown to adjust based on its content. Key improvements include:

• Dynamic Sizing in DAG Runs: The dropdown now adjusts its width dynamically instead of using a fixed size, improving responsiveness across different screen sizes.
• Dropdown Width Optimization in TaskInstancesFilter (maxW): Increased from 250px to 450px, ensuring longer filter names are fully displayed.
• Improved Layout for Selected Filters:
  • Implemented flexWrap="wrap" to ensure selected filters are properly displayed, preventing overflow and layout issues.
  • Added paddingY="8px" for better spacing and a more polished appearance.
• Search Bar (SearchBar) Repositioning: Moved the search bar to a more intuitive location within the layout, enhancing overall user experience without removing functionality.

With these improvements, the dropdown filters are now fully visible, dynamically responsive, and more adaptable, providing a smoother and more efficient user experience.

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide (https://github.com/apache/airflow/blob/main/contributing-docs/README.rst)
Here are some useful points:

• Pay attention to the quality of your code (ruff, mypy and type annotations). Our pre-commits will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example DAG that shows how users should use it.
• Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
• Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: [email protected]
  Slack: https://s.apache.org/airflow-slack

[davidfgcorreia]

Here is a video with the demonstration : https://youtu.be/tvCgMuIhpOs

[jscheffl]

Cool, thanks for the improvement!

[boring-cyborg]

Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions.