fix: stabilize Examples page layout and sidebar scroll in Firefox

[julien-deramond]

This PR fixes the sidebar navigation and scrolling behavior in Firefox on the “Examples” page by:

1. Simplifying the layout of the main explore view using flexbox instead of a float-based layout.
2. Removing an extra activeItem.click() call from the hashchange handler that caused redundant scroll animations and misalignment in Firefox.

After this fix:

• Chrome retains its original behavior.
• In Firefox:
  • Vertical scrolling works correctly; sections move naturally without blank gaps.
  • Clicking sidebar items scrolls directly to the correct section (e.g., “Bar”) and keeps the active state in sync.

It might fix apache/echarts#20423

Issue

On Firefox (150.0.1 aarch64 macOS 26.4.1), here's the current User eXperience at https://echarts.apache.org/examples/en/index.html

Screen.Recording.2026-05-07.at.09.58.31.mov

On Firefox (150.0.1 aarch64 macOS 26.4.1), here's the new behavior (run locally with npm run dev):

Screen.Recording.2026-05-07.at.10.00.53.mov

Fix Details

1. Layout: switch from float to flexbox

Previously, the main scroll container #example-explore was:

• Absolutely positioned with overflow-y: auto.
• Contained a left sidebar (#left-container) that used float: left + position: sticky.
• Contained the main content (#explore-container) offset using margin-left.

This combination (absolute + float + sticky) apparently caused Firefox to miscompute the scrollable area: when scrolling down, you could see a large blank gap in the viewport while sections like “Bar” stayed stuck at the bottom instead of scrolling up, even though it worked in Chrome.

The suggested fix:

• makes #example-explore a flex container and remove float.
• lets the content take the remaining space via flex instead of margin-left

Using flexbox here gives a clear, predictable layout for both Firefox and Chrome: the sidebar and content sit side-by-side, the scroll container is unambiguous, and sections scroll normally without blank gaps.

---

2. Remove redundant activeItem.click() on hashchange

In Explore.vue, the hashchange handler used to call activeItem.click(). From my understanding, it meant:

• When a nav item was clicked, vue-scrollactive already initiated a scroll to the target.
• The subsequent hash update triggered onHashChange, which called .click() again, starting a second scroll animation.
• In Firefox, with lazy-loaded thumbnails changing layout mid-scroll, this double-scroll caused the view to end up between sections or snap back to the previous section (“Line” instead of “Bar”).

The fix:

• Removes the activeItem.click() call and let vue-scrollactive handle the initial scroll.
• Keeps onHashChange responsible only for keeping the left nav’s own scroll aligned:

This eliminates redundant scroll animations and prevents Firefox from “over-scrolling” or snapping back to the wrong section after layout changes.