Previously animated images were automatically played in the
message feed of the web app.
Now that we have still thumbnails available for them, we can add a new
personal setting, "web_animate_image_previews", which controls how the
animated images would be played in the web app message feed -- always
played, on hover, or only in the image viewer.
Fixes#31016.
This commit increases right padding for the th elements in recent
views table to make sure that the sorting arrow is visible correctly
for various screen width and font sizes. This change is similar to
what we did for tables in settings UI.
When rendering a spoiler block that includes a datetime format,
the dropdown button was pushed out of view on smaller devices.
This happened because the time tag was overflowing past
the spoiler blocks width.
This commit intends to fix this problem by adding a `white-space`
attribute to the rendered time tags which will stop it from
overflowing.
Fixes#30641.
We now set max-width on the pill value for stream creator pill
to make sure that the pill does not get too long for long names
and the full name can anyways be seen by clicking on the pill.
Fixes part of #30918.
We don't need `align-self: baseline;` for `fa-envelope` set in
`message_view_header` since this is a different icon and it appears
better without it like other icons.
We also don't need the explicit font-size for switching b/w 14px and
16px mode since `zulip-icon` class takes care of that by default.
We had to specify margin-bottom as 10px separately for
`modal_password_input`, `password_visibility_toggle` and
`settings-forgot-password` classes. We've added a div that encapsulates
all these 3 elements which are meant to be in the same row and gives it
a common margin-bottom.
This is a refactor commit.
We've removed the unused parent div. We've also removed the class that
was only being used in that div from zulip.css. We've attached a class
to the anchor element now and it has the same name as the class we
removed.
Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711.
The eye icon to show and hide password was misaligned in the 16px info
density mode. But since the icon was using absolute positioning to style
the icon, we took this chance to refactor the element to use flexbox.
We've renamed the `password-div` to `settings-password-div` for settings
specific styling. The eye icon was only broken in settings, and since
the settings and the login/signup stuff the same class was used at is
quite different from each other, it might be better to have two
different classes. The other `password-div` has not been refactored, it
might be better refactored in its own PR along with other similar
elements to use flexbox.
Fixes#30895.
The root font-size for the app has always been 16px, and it remains the
same when switching between 14px and 16px mode. This leads to
`.small` buttons looking relatively smaller to their surroundings in
16px mode. So, if we use a unit that changes when switching between
modes, we will have to multiple that value by (16/14) so that we don't
change the existing behaviour for the 14px mode and make things smaller.
This commit only affects `.small` buttons, the same named class is used
in other places but does not use rem unit there and therefore does not
require any changes.
The original plan was to use em instead of rem and multiply it by
(16/14 * 0.8), but since em depends on the parent element, there was a
case in the poll button widget where 1em was equal to 16px in the dense
14px mode. While, the right thing to do might have been some refactor to
make it work as desired, the safest thing to do right now might be to
use the --base-font-size-px variable directly for the 9.0 release.
Fixes#30920.
Before this, the buttons remained the same when switching 14px vs 16px
mode because rem was used as the unit and we are not changing the root
font-size for either of the 14px or 16px mode. Root font-size is 16px in
both cases.
We've removed 0.875 out of the 0.875rem for the font-size of the buttons
since 0.875rem is equal to 14px. It has been replaced with the base font
size variable.
We've removed the rem values for padding and border-radius and written
the pixel values directly taking in account 1 rem = 16px. We don't scale
the padding and border when switching b/w 14px and 16px mode, so we
should not do that here too. While keeping the rem around would be the
same as the current pixel value in either of the modes, removing the rem
is still better since we've concluded here that we don't need to scale
the padding and border-size b/w modes.
Since we access email through pills,to improve the
visibility on a narrow screen, if the screen width
goes below 'lg_min' or 992px drop the email column from users,
deactivated users, bots, channels, groups using a new classname
'settings-email-column'.
This commit overrides the margin-top set on the stream lock icon at the
top-level in `app_components.css`, since we don't need to pull up this
icon for the stream actions popover header.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size. This helps with the multi-
line popover options which we want to break evenly across different
sizes.
The `max-width` of `97vw` still applies to all popovers, and ensures
that the UI does not overflow the viewport.
