The textarea in Settings/User Profile was overflowing in
smaller width devices.
This commit fixes that issue by adding appropriate media queries.
Fixes part of #16817.
This reverts commit 34ada11448.
That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).
Signed-off-by: Anders Kaseorg <anders@zulip.com>
We change the text. This is an attempt to make the text space occupied by
the col header of last message timestamp smaller so that
it doesn't overflow to next line in some languages.
Also, add some extra padding.
On safari, after search box wraps to next line on smaller widths,
it is not visible due to some flex box default property difference
between chrome and safari. We fix this by resetting default
property.
We need to increase a bit of spacing around text in rows at <750px
because row height is reduced after hiding avatars. We use
padding instead of line height so that this plays nice when text
is wrapped.
Note more padding is also required for >750px now because text
can be wrapped now and take more width than avatars.
Since All messages narrow is no longer home page for webapp,
we change its icon to align-left which also shows a concept of
interleaved topics / messages.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.
Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.
Keyboard shortcuts that apply on messages have also been disabled.
The remaining shortcuts that apply to a narrow are still accessible
here.
This issue adds the appropriate padding to the
copy_generate_invite_link class. This fixes the copy link icon which
seemed to be shifted when clicked.
Fixes#16868
This commits gives a right margin to the stream description
so that it does not collide with the icon on its right and
also become better visually appealing.
When interacting with popovers in the night theme using the keyboard
UI (e.g. the `i` menu for a message), the background color was
incorrectly white, resulting from the bootstrap `nav > li > a:focus`
rule. We had already fixed this for `nav > li > a:hover`; we just
need to add `nav > li > a:focus` to the relevant block of CSS rules as
well.
Replaces #17195 and #17353.
Rewritten to use a cleaner solution by tabbott.
Usually we increase the opacity of an interactable icon on hover, but the search-icon at the top of the
right sidebar was missing the behavior.
Co-authored-by: ritik <ritikcn05@gmail.com>
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px. Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph. See #12113 for background.
However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two. We fix this by going with a 0px
margin-top instead.
This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.
And it looks good in all cases.
Fixes#17284.
The code blocks and response blocks had small and unreadable font,
because they were using the bootstrap defaults without adjustment for
the size of content on the rest of the page. Fixes part of
zulip#15967.
Previously, the data type of responses wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in API Documentation.
Fixes part of #15967.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px. Use only the *_min bounds for consistency.
This requires queries with strict inequalities to express upper
bounds (width < md_min). Fortunately, that functionality is provided
by range context queries. Unfortunately, those are not supported in
all browsers. Fortunately, we can compile them away using
postcss-media-minmax. Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug. Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:
https://github.com/postcss/postcss-media-minmax/pull/28
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Since the bots list breaks at 625px with left col of settings
hidden and at 850px with left col of settings visible
without this media query,
having this media query trigger at 991px shouldn't produce
any problems.
This media query aligns filter buttons on tablets. Since tablets
range are usually less than 991px in width, this breakpoint makes
more sense. Also, the filter buttons looks nice between 1033px
and 991px.
Instead of adjusting the width of settings container at
1130px, we adjust it at 991px which is the standard for smaller
screens. Adjusting it 1200px(xl) didn't make sense, so the
next reasonable breakpoint was used.
Suyash Vardhan Mathur
Riken Shah
Anders Kaseorg
Aman Agrawal
Signior-X
aryanshridhar
Tim Abbott
Megamind
Ganesh Pawar
m-e-l-u-h-a-n