Because button sizes are precisely specified in the area, we set
the buttons as flex items that neither to grow or shrink, which
is essential to right-size the button area for the help button.
A 16px conversion at 16px/1em is unnecessary, and there are no
other font-size declarations in the area. So the base font-size
should be inherited as expected, allowing the button icons to
scale.
On smaller screens it is expected that the available space is used
to display much part of the content. 100% width ensures that while
max-width ensures that the dropdown button doesn't become too wide
where there's extra space available.
Using flex here caused overflow which was especially visible for
very long channel names(~60 characters). Even for the shorter
channel names there was slight overflow noticeable in input class
move_messages_edit_topic if left and right spacing was compared.
This commit fixes the issue by removing the flex display.
Poll title was set to 18px which was leading to the title looking
smaller than the options in 20px font size. Removing that explicit
font-size declaration will make the h4 font-size fall back to 1.1em and
thus that title will scale properly to font-size changes. At 16px, the
font-size for the title was 18px initially, now it is 17.6px which
should not be that big of a change.
The majority of the label elements on the billing page are not
associated with a form element and function more as section headers.
Also removes the padding/margin 25px rules for these so that the
rendered page is less fragile to cases where content could overlap,
such as when there was no text before the next expected charge h1
element.
This commit includes the following changes:
- Replace the theme select dropdown in the Preferences
section of the Personal settings with the theme switcher,
similar to the one in the personal menu popover.
- The theme select dropdown in the Default User Settings
section of the Organization settings also follows the same
changes.
Fixes: #32111.
This commit adjusts the focus outline for the "New channel"
input in the Move message(s) and topic modal, preventing
it from extending to the entire modal and limiting it to the
input element only.
Using container query ensures that the media-description element gets
hidden only when the container size is less tha 100px not screen size.
The change is visible for image preview in small screen as action
button takes much of space. Meanwhile in video-preview the description
is still visible as we have much space even in small screen.
Using width 100% with a max-width improves the view for tall screen.
Dynamic max-height is just to ensure that it adjust itself for
much wider screen with very less height.
Proper use of flex properties for consistent layout and spacing
while avoiding use of margin that can result in extra spacing
around first and last child.
We update max_avatars on rerenders based on recent view width
to prevent participant avatars from overflowing their width.
We use resize event to update `--recent-view-max-avatars` which
is checked on `complete_rerender`.
This commit standardizes the naming convention to be used for the UI
components being used in the `/devtools/` storybook-like pages for
testing the UI components.
This commit adds the redesigned banner component to the codebase along
with a storybook-style page in /devtools/banners to view and test the
redesigned banner component.
Any banner using the new redesigned styles, requires two classes,
- First, the base `banner` class which defines the structure and
behavior of the banner.
- Second, a modifier class like `banner-info` which defines the styles
for the particular banner type.
The navbar alert banners also have a custom class `navbar-alert-banner`
which is used to define the specific style and structure for these
banner types.
This commit also makes the `banner`, `action-button` and `icon-button`
components into handlebar templates to maintain consistency in their
usage in the codebase.
The `line-height` and `padding` values are updated, to account for the
previous confusion of calculating these values for a 15px base value,
instead of the required 16px base font value.
The other changes in this commit include the `font-weight` and `gap`
properties, which are modified following the design discussion on CZO.
This commit replaces the use of `scale`, with `clip-path` for showing
the shrinking animation on the active state of action buttons. This
prevents the font and the icon from scaling with the element, which
removes the unwanted jitter during the animation.
The commit also makes necessary changes to the focus outline on the
buttons, to accommodate the use of clip-path and to improve the visuals.
This commit also adds the `transition` property to the action buttons
to smooth out the animations between the element states.
Zulip production suite / ${{ matrix.name }} (zulip/ci:bookworm, --test-custom-db, Debian 12 production install with custom db name and user, bookworm) (push) Has been cancelled
Zulip production suite / ${{ matrix.name }} (zulip/ci:jammy, , Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga, jammy) (push) Has been cancelled
This commit adds a confirm button to the top right corner od the color
picker popover to provide a more intuitive way to exit the popover
after fiddling around with the stream color.
This commit center aligns the icon inside the icon-button across
different button sizes. This also sets the aspect-ratio of icon
buttons to 1:1, to constraint these buttons to a square shape.
