Fix layout issues caused by long fund names in Yahoo Finance chart UI
As a Yahoo Finance user,
I want the UI layout to handle long fund names gracefully,
so that navigation elements do not wrap improperly and the comparison picker remains fully visible and accessible on screen.
Acceptance Criteria:
Long fund names do not cause the navigation bar (nav) to wrap onto multiple lines.
The comparison picker opens fully on screen and does not get cut off or appear offscreen when long names are present.
UI elements automatically adjust or truncate long fund names in a user-friendly way (e.g., ellipsis, tooltip on hover).
The layout remains responsive and accessible on various screen sizes and resolutions.
The fix does not negatively impact other chart functionalities or existing UI elements.
Cross-browser compatibility is ensured (e.g., Chrome, Firefox, Safari).
Notes:
Consider CSS solutions such as flexbox or grid for better layout control.
Test with several long fund names and different screen sizes.
Ensure keyboard and screen reader accessibility for truncated names and tooltips.
Collaborate with UI/UX designers to maintain visual consistency.
