FIX aspect ratios for HTML plots on mobile devices

[Copilot]

Plots in the HTML interface lacked fixed aspect ratios, causing distortion and poor readability on mobile devices. Additionally, on mobile portrait screens, plots were not utilizing the full vertical space.

Changes

CSS (benchopt/plotting/html/static/hover_index.css)

• Mobile Portrait (<768px, vertical): 3:4 aspect ratio (taller) to fill vertical space, 400px min / 70vh max height
• Mobile Landscape (<768px, horizontal): 4:3 aspect ratio (wider) for better viewing, 300px min / 80vh max height
• Desktop (≥768px): Auto aspect ratio, 600px min height for scatter plots
• Orientation-aware media queries ensure optimal aspect ratios for portrait vs landscape modes
• Conditional selectors avoid nesting conflicts:
  • #scatter_plot_container for scatter plots
  • #plot_container.js-plotly-plot for bar/boxplot (when Plotly adds class)

JavaScript (benchopt/plotting/html/static/result.js)

• Replaced manual width/height calculations with autosize: true for all chart types
• Removed device-specific sizing logic; CSS now controls dimensions
• Fixed missing const declaration

Technical Details

HTML structure has nested containers:

<div id="plot_container">
    <div id="scatter_plot_container"></div>  <!-- scatter only -->
    <div id="legend_container">...</div>
</div>

Scatter plots render into the nested container; bar/boxplot render into parent. CSS targets each appropriately to prevent double aspect-ratio constraints.

The orientation-aware approach uses:

• @media (max-width: 767px) and (orientation: portrait) for vertical mobile screens
• @media (max-width: 767px) and (orientation: landscape) for horizontal mobile screens
• @media (min-width: 768px) for desktop screens

Checks before merging PR

• [ ] added documentation for any new feature
• [ ] added unit test
• [ ] edited the what's new (if applicable)

Original prompt

The plots should have a fixed aspect ratio in the html interface, for better readability on mobile devices

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Etyl]

@copilot When using a mobile vertical screen, the page is not taking the whole vertical space

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 83.62%. Comparing base (c80dc1d) to head (83a8819).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #867   +/-   ##
=======================================
  Coverage   83.62%   83.62%           
=======================================
  Files          48       48           
  Lines        3542     3542           
=======================================
  Hits         2962     2962           
  Misses        580      580           

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

@copilot When using a mobile vertical screen, the page is not taking the whole vertical space

Fixed in 83a8819. The issue was that the 4:3 aspect ratio on mobile portrait screens made plots too wide, leaving unused vertical space.

Solution: Added orientation-aware media queries:

• Portrait mode: 3:4 aspect ratio (taller) to better fill vertical space
• Landscape mode: 4:3 aspect ratio (wider) for better viewing
• Desktop: Auto aspect ratio (no constraints)

This ensures plots utilize the full available vertical space on portrait mobile screens while maintaining proper proportions in landscape and desktop views.