Yif
ee558c82d7
The page header wraps its action group onto another line when the title and the actions no longer fit together, so the title keeps its width and the actions keep their labels on one line. The information button follows the subtitle text instead of a flex row, which keeps it beside the copy at every width. Cover the header in the plugin-manager browser scenario: the action group stays inline when it fits, moves below when it does not, keeps its labels on one line, stays inside the header, and retains focus across the change.
19 lines
1.6 KiB
Markdown
19 lines
1.6 KiB
Markdown
# Plugin header responsive layout
|
|
|
|
en 1680px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 768px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 520px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 440px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 390px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 430px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
en 1024px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 1680px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 768px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 520px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 440px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 390px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 430px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
zh 1024px: actions single-line and contained; heading separate; information follows subtitle; focus retained
|
|
|
|
Add menu dismisses on Escape and returns focus in both locales.
|