Header: Investigate and implement responsive subtitle design

[alundgard]

The exhibit subtitle appears in Spotlight. It is specified by users and currently has no character limits on the input field.

• The former Spotlight header design could fit a subtitle ~135 characters in length.
• The Spotlight application rejects (redirects to status page) around 215 input characters.
• Current known exhibit subtitles range from 0 to 85 characters.

Desired behavior

• Auto-scale the subtitle font-size responsive to its length so that it fits within the available header space, in-line with the menu options. Subtitles with short-to-moderate length should appear at a default font size. Subtitles exceeding the available header space should shrink to fit the available space.
• The subtitle should also have a minimum font-size (~16px) so that it won't continue shrinking beyond legibility.
• Currently, the subtitle isn't displayed for narrow viewports. If possible, we would like to display the subtitle for narrow viewports.
• For narrow viewports, if the subtitle length exceeds the available space when displayed at the minimum subtitle font-size, then text-wrap the subtitle.
• Consider enforcing a max character limit on the subtitle input field to avoid redirecting to the status page.

Example: https://exhibits-stage.stanford.edu/header-redesign-test-exhibit/.

Current

Goal

Design

The base header component can be found in “DLSS Components” Figma File: https://www.figma.com/design/K1syTsalaB1nlRftgOi0Pw/DLSS-Components?node-id=742-922&t=hezVZDhbDPM3h5IU-4.