This commit improves the responsiveness of normal banners by adopting a
flexbox layout for the label and action buttons. This change better
accommodates varying text lengths and button counts in the banners, due
to the natural flowy nature of flexboxes.
The key logic shift involves using `flex-basis` to manage layout
transitions: the label and the group of action buttons now wrap to
separate lines when the label's width is less than 60% of the banner
query container's width (60cqw).
This commit also updates the CSS for navbar banners to align with the
new flexbox layout between the label and the group of action buttons,
while also ensuring that the layout behavior of these banners remains
consistent with the previous implementation.
As noted in the comment, focus in the recipient row is
better handled by event handlers elsewhere.
This change also allows us to avoid a race condition
when determining focus is deferred (as is the case
with the auto-opened compose box on DMs).
This commit fixes a bug on iPad/Safari that caused
the entire viewport to scroll wildly when navigating
to lengthy DM conversations.
Co-Authored-By: Aman Agrawal <amanagr@zulip.com>
When copying svg from other places e.g. lucide, class names are also
copied over. These classes are not defined in our css and thus have no
effect whether they are present or not. But if the svg has the class
property, unplugin-icon will not override that class property and apply
the defaultClass we have defined in astro.config.mjs. We need that class
for our icons to look as desired.
Inbox can suddenly scroll to top due to a rerender when user
is trying to scroll down. A possible caues for this is
`move_focus_to_visible_area` being triggered on scroll but the
element located using:
```
document.elementFromPoint(inbox_center_x, inbox_row_below_filters);
```
being out of view. To fix it, we try to locate the element in the
same animation frame. This will remove the possibility of element
being out of view when we try to set focus to it.
We already had a lint rule for this, but we did not disallow setting it
from the style side. This was breaking the icons changed in this commit
in our new astro help center.
We already had a lint rule for this, but we did not disallow setting it
from the style side. This was breaking the icons changed in this commit
in our new astro help center.
This gives us more control, for example `show()` was adding
`display: inline-block;` to channels after unhiding them
which was overriding other code (added for channel folders
in future commits) that was trying to hide the channels.
This is a follow-up commit to 021d6cb169,
and moves the logic for blurring the topic filter input when the escape
is pressed from `clear_topic_search` to the `web/src/hotkey.js` module
for better code readability, and to be in adherence with the comment
in `web/src/hotkey.js` which states the logic for handling the escape
key interaction.
This commit replaces the `border` property with `outline` for input
elements, since the `outline` property is more suitable for focus
indicators. This change also removes the need for extra padding
adjustments due to the border's impact on layout.
After narrowing to a long unread message, the message gets marked
as read and can be collapsed when rerender happens since the
cutoff of read message is different.
Fixed by tracking which messages were unread during initial
render and using the unread cutoff for them until user narrows
again.
When the contenteditable div in the topic list filter is empty, the
browser adds a <br> element to it, which interferes with the ":empty"
selector in the CSS — responsible for showing the placeholder and hiding
the clear button in the input field. Hence, we detect this case of an
empty contenteditable div and clear the content of the div to ensure
that the CSS styles are applied correctly.
