Work towards #34244.
Now that we're supporting partial subscriber data, we might need
to fetch the full list of subscribers when opening the subscribers
tab of the edit channel modal.
This commit handles a slow load with a loading spinner while we fetch
the data, and also makes sure to ignore the data if it's received after
it stops being relevant (in case the user has another stream's data open).
This commit updates the left margin for the tab toggler in
streams and groups UI to be equal to the margin for the content
below so that they align correctly.
This changes the vertical padding to be the same top and bottom, instead
of 9px top and 15px bottom, and updates the width to properly account
for the left/right padding.
Note: This footer is currently only used for stream/usergroup creation.
It seems like the only impact of removing `top` here is the bottom
border of the header appears, but we can just remove that directly.
`border-top: none` doesn't seem like it was doing anything here
(the element had no border).
The margin doesn't scale with font size, so it looks
extra weird at small font sizes, and also the text
is already being centered with flex so we don't need
margin.
In a future commit in (#34125) we'll add a classname for the
subheader and use that to scope these rules.
This commit has no changes in CSS rules. It only moves them around.
We need this height to be flexible based on if the subheader has
overflowed into two rows or not, and our method of doing this
(with existing examples in the buddy list and stream list) is to
calculate what the height should be when a window is loaded or
resized.
We also added `flex-grow: 1` to the add group members and add stream
subscribers input. Without that, the typeahead won't open on click,
since there was no space occupied by the input to click on.
This commit makes the following changes to improve the display of long
stream titles in the stream creation and user group settings UI:
- Uses `display: -webkit-box` and `line-clamp` properties to show the
title upto two lines, and end with `...` if it exceeds.
- Updates icon `font-size` to align with text size.
- Updates `margin` and `line-height` to make it visually better.
Since the input-group covered all the available space, tooltip looked
like it is separated from the checkbox label. This commit fixes the
width of input-group to be just wide enough to contain the content
when the setting is disabled so that tooltip is positioned correctly.
Previously we collapsed buttons when the two-panel view was narrow enough
that the buttons started wrapping, but this case for one-panel view with
wrapping buttons was missed.
This simplifies some @container queries and also ensures there's enough
space at larger font-sizes for the save/discard buttons to appear
beside setting section headings without overflowing onto the next line.
Now the left pane is always 40% and the right pane is always 60%.
One effect of this is that the top left buttons in the stream settings
overlay are now always in two rows at 16px (like they already always
were at 20px).
