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'.
The "Dense mode" checkbox is renamed to "Compact mode" and is used
to toggle between changing the font-size and line-height settings
between 14/122 and 16/140 configurations.
In an interleaved view when composing a message we fade messages
which the user is not replying to, to reduce the chance they send
a message to a recipient they didn't intend to.
Also, it reduces the visual/cognitive processing required
to figure out where their message is going to go.
But, it's not necessarily clear to users that what the
fading means, so this commit adds a one-time compose banner
to explain what's going on the first time this comes up.
Fixes part of #29076.
In a non interleaved view when composing a message to another
conversation we fade messages which the user is not replying to,
to reduce the chance they send a message to a recipient they didn't
intend to. Also, it reduces the visual/cognitive processing required
to figure out where their message is going to go.
But, it's not necessarily clear to users that what the
fading means, so this commit adds a one-time compose banner
to explain what's going on the first time this comes up.
Fixes part of #29076.
Earlier in search suggestion, has: operator returned two different
suggestion string which were `messages with one or more links` and
`messages that contain links`.
This commit changes this to a consistent suggestion string.
Fixes: zulip#30908
All the buttons in settings have become rounded but these were still
square with no border-radius. Added the `rounded` class for them to have
the standard border-radius.
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 extends the work in #29302 to support the new
"channel" operator, which is synonymous to the "stream" operator
in transforming stream-topic links to the #**stream>topic** syntax.
This commit removes the unnecessary conditionality that used
to check if the channel and topic of the filter operands in the
"_possible_unread_message_ids" method while checking for
"can_bucket_by("channel", "topic", "with")".
This conditionality is unnecessary essentially because the code path
is executed only when "requires_adjustment_for_moved_with_target"
is false, which happens only after the narrow containing the "with"
operator is adjusted to the correct narrow. Else, it remains true.
Previously, when "adjusted_terms_if_moved" was called for non stream
messages, it used to return "null" for adjusted terms. This is true
for some extent since the non stream messages can not be moved.
However, in case of narrow containing "with" operator, this would
be buggy since there, we want the narrow terms to be adjusted
according to the "with" operand to point to the current narrow,
rather than returning null.
This commit updates the method to return null only if the "raw_terms"
dont contain "with" operator. Else, adjust the "raw_terms" according
to the message.
The commit creates a `server_message.ts` module which
will home our `zod` schema for the messages received
from server. We can then import the schema to parse
the data in needed modules at the API boundaries.
This will also help us write better tests.
This change help us stay consistent with usergroup section by providing
unique IDs for each section. Before we have classes for the section
elements, but now instead of adding unique classes to each
section element we add IDs, that make more sense.
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.
A `min-width` is applied to the popover hotkey hints to ensure that they
are nearly square when only one character is present. This `min-width`
was previously using rem units, which did not scale with the font size
of the popover font.
This commit changes the `min-width` to use `em` units, which will scale
with the font size of the popover hotkeys.
Fixes#30674.
When having a bigger translation string, it was noticed that Add channel
button had no horizontal padding. But this wasn't true for a shorter
string. The button was using `min-width` as a proxy for padding. When
the width of the button went beyond the minimum 100px, the padding
disappeared.
`.new-style` properties will apply here for the standard button
styling, where the standard horizontal padding is important for the fix.
But we can't use the vertical padding of that class since we want the
button to align with the filter to the right of it which is smaller than
a standard button, so we set the vertical padding to 0 and give the
button a height of 30px. This height is used at multiple places to be
the same as the search filter, e.g. roles dropdown in users tab.
We've also changed the margin from 11px to 12px to be the same as the
filter on the right.
This commit makes the selectors for CSS applied to users
and bots table more specific since the classes used
before are generic and can be used at other places
as well.
This commit makes the selector used to apply CSS to
file name column in uploaded files table more specific
as the class name used before is generic and can be
used at other places as well.
Before this, settings_tab.hbs was being used to test the `{{#tr}}`
syntax for tagging strings for translation. That was introduced in
82b5d9304b, when the template in question
was small enough to mock.
There are smaller templates than `user_notification_settings` but since
none of them are used as a partial in another template, we can't use
them for this test. This is because we can't test partial block
handling part of the tr tag in templates.js with those templates. Since
`user_notification_settings` has only 1 partial, it will atleast make it
easier for us to know which arguments to pass to the template; in
comparison to `settings_template` where it was hard to determine which
arguments were supposed to be passed to the template.
I've also renamed the test to not say `tr_tag` since it confused me with
the HTML <tr> tag when trying to read the test.
Fixes https://github.com/zulip/zulip/pull/30824#discussion_r1677204395
All 3 properties of `.small` were being overriden by
`#lightbox_overlay .media-actions .button` and the class is no longer
needed there.
The other selector still uses rem, so it might be good to revisit this
and see how 14px/16px scaling currently works on those buttons.
Preparatory commit for #30895.
For buttons in the compose box using `.small`, all properties except
min-width were already being overriden in compose.css. So we added
`min-width: inherit` to compose.css and remove the `small` class.
Preparatory commit for #30895.
It's likely that service is undefined which results in
error while loading the template. We should check if the
service and service.config_data is defined or not to avoid
throwing errors.
With the redesign of all popovers completed, we have transitioned away
from the legacy Bootstrap-based popover system. As a result, the
Bootstrap `nav nav-list` classes are now obsolete and no longer used
in the codebase.
This commit, a part of the efforts to clean up the legacy Bootstrap CSS,
removes these unused classes and any related CSS workarounds.
Fixes#26990.
This is a prep commit for removing `nav nav-list` classes from all
popovers.
The send later modal, although not being a popover specifically, was the
last place in the code still using `nav nav-list` classes.
We used to just drop moved messages from the list of messages to
update if we didn't have them cached. So, if the user is in the
narrow where messages were moved to, user will not see the moved
message if they were not cached locally.
To fix this, we re-render the narrow after fetching messages from
the server.
We don't want to use `fast_track_current_msg_list_to_anchor` here
since that function assumes that current rendered state of the
message list is correct which is not the case here.
ClipboardJS attaches event listener to the object when an
instance is created. We don't need to add an additional onClick
event listener to invoke it's functionality.
Fixes#30776.
`.advanced-settings-status` was being used at a few places for User list
status, that's why it's been replaced with
`.information-settings-status`.
This was introduced in 87635b9e32 and kept
getting renamed over time and did not get deleted. Other statuses'
`.hide()` got deleted over time. I'm not sure why we were using the hide
in the first place, but manual testing shows no behaviour change when
removing it.
We've renamed `get_all_preferences` to
`information_section_checkbox_group`. We've also converted it from a
function into a dictionary since it doesn't contain any page_params
variables anymore. This is a preparatory commit for adding a new
`Information section` as part of a layout change for this page.
`high_contrast_mode` was part of the checkbox group obtained by calling
`get_all_preferences`. For the new layout change, it will not be a part
of that group and this is a preparatory commit seperating it out from
that group. We will also rename that checkbox group in future commits.
These values were only a part of `DisplaySettings` type objects. We're
moving them out of these type of objects to be a standalone object of
its own. This will make it easier to reference in the next few commits
when those `DisplaySettings` objects would be broken down into different
sections.
We've excluded the new function from coverage since there's not much to
be tested there and similar settings functions do the same.
I'm not actually sure if this is possible; it's been copy/pasted from
the channel/topic code path, but even with that one, it seems like the
topic being `undefined` is impossible (that's not how operators work),
and the channel being undefined might be something that should fail in
`Filter` initialization, not here.
Adds server and web app support for processing the new `with`
search operator.
Fixes part of #21505.
Co-authored-by: roanster007 <rohan.gudimetla07@gmail.com>
Co-authored-by: Tim Abbott <tabbott@zulip.com>
While using the pill in `stream_create`, it was noticed that deactivated
users were also part of the user_ids returned by the user_group_pill,
which we do not want to do.
This pill is used in two areas: compose box and stream create/edit.
This commit will only affect stream create/edit since compose box was
just using the typeahead data from user_group_pill and nothing else.
Stream and user pill handle inactive users already, so no change is
needed there.
Fixes#30690.
Before this, we were adding all users to subscriber list without adding
any pill. But, since we want pills to be the source of truth for adding
the subscribers, we will just add the `role:everyone` pill from now on
whenever `Add all users` is clicked.
While we can just directly call `pill_widget.appendValue` in
`stream_create_subscribers`, it's better to expose an API from
`add_subscribers_pill` and use that. This lets us control how appending
an item would work for subscriber pill in a single place.
We list all the members of a group including recursive subgroup members
in the user group popover.
We also add another change in this commit to show `Everyone` if the
group name is `role:everyone` by using
`user_groups.get_display_group_name`.
For system groups, the directive is that we should use the description
as the display name. But in case of `role:everyone`, the description is
`Admins, moderators, members and guests`, while for the
`user_group_pill`, we want to display a simpler and succinct message:
`Everyone`. We've only hardcoded this for user_group_pill since we don't
want to display the name as `Everyone` anywhere else yet.
We've also exposed a method called `get_display_group_name` which will
be used in later commits to get the group display name.
While the support to include all members of a subgroup is needed only in
the `stream_create` context for now, we have added the support for
subgroups to `user_group_pill` for all cases. We have done this because
that is still going to be the correct behaviour if we add similar
support to other pill inputs.
In terms of calculating and populating the recursive member list, it was
decided not to do it when initializing the user_groups data. One reason
for that was it would introduce a lot more complexity when adding or
removing members from any of the subgroups to keep the recursive member
list updated. Keeping in line with the general pattern of calculating
recursive subgroups on the fly too, it was decided to calculate the
recursive list of members on the fly too.
Also changes the `get_group_ids` tests to make sure that subgroup ids
are not part of the result of `get_group_ids`. Since it is used to
calculated taken_groups, we don't want to filter out subgroups as part
of taken_groups and their typeahead should still be visible.
This function goes through all subgroups recursively and returns the
resultant set of the members of those subgroups in addition to the
members of our target_group.
This function is required in order to add the `everyone` pill to create
channel flow.
For the tests written in this commit, it uses the same pattern as the
`get_recursive_subgroups` test.
`is_user_in_group` could have been technically refactored to use
`get_recursive_group_members`, but since the former returns early for
direct members, I've let it be for now.
Transforming valid stream/topic urls to the #**stream>topic**
syntax.
- A valid url contains a stream and optionally a topic
but nothing else, and in that order.
It must belong to the same origin as the Zulip server.
The stream id present in the pasted url should
correspond to an actual stream in the current
server.
- `near` links are not transformed.
- Use-mention distinction is respected by
not transforming a valid url if pasted using
`Ctrl+Shift+V`.
- No transformation occurs inside a code block.
- On pressing `Ctrl+Z` after pasting,
the actual pasted link is restored.
- No transformation occurs if the url is pasted over an
existing url in a markdown link syntax.
- No transformation occurs if the stream or topic name
contained in the pasted url is known to produce broken
stream/topic syntax links (as per #30071).
Fixes#29136
Earlier in right sidebar user count, it would show less user count
when a bot was present as a recipient in the conversation. Since the
sidebar shows active human users only, user count should not
consider bots in the conversation.
This commit fixes the behaviour by adding all the subtracted bots
in from user count.
This commit updates the `max-width` of popovers to relative length units
to allow the UI to scale with the font-size.
The `max-width` of `97vw` still applies to the popover, and ensures
that the UI does not overflow the viewport.
The extra undefined parameter appears to be a bug introduced in
5142f1279a45d00320904b369b092f0c9c116b90; when the show_as_overlay
parmater was dropped, the other callers to show_user_card_popover did
not have their extra argument removed.
This had the effect of not setting initial keyboard focus when opening
the popover.
- Adds focus outline to the custom profile field links.
- Replaces the grey outline of the copy and status buttons with the
blue one used across the popover options.
- Adds hover state styling to the focus state styling for the copy
buttons.
Previously, the tooltip for the status clear button was scoped to only
the personal menu popover. This commit moves that logic to `tippyjs.ts`
and adds support for the status clear button in the user card popover.
As a follow-up to the user card popover redesign, this commit removes
the unused code and styles from the user card popover.
- Removed tooltip logic for user name and user type, since we now
display them in full without any ellipses.
- Removed unused css whose class names are no longer used in the
user card popover.
- Removed additional styling needed to handle font awesome and zulip
custom icons, used in the older design.
This commit aligns the user info, which contains the user's full name
and type, to the vertical center of the user card popover's header.
With this, the user info is aligned in the center of the popover header
for short names, and then for the longer names, the user info eventually
aligns to the top and the rest of the content are pushed down.
Using the new color palette defined in the previous commit, this commit
updates the hover and active colors of the copy button in the user card
popover.
This also adds a background to the copy icon on hover and active states.
This commit adds the new Zulip color palette, as css custom properties
to the app_variables.css file. Defining it in the app_variables.css file
allows us to visualize the colors in the editor's autocomplete dropdown
when we use these color values for defining other component based css
variables.
Since hex color values are used in defining the color palette, we
disable the `color-no-hex` stylelint rule for that part of the file.
Previously, when the email was successfully copied via the email copy
button, the email in the user card popover was replaced with a "Email
copied!" message.
This commit replaces this behavior with a more subtle approach, where
only the tooltip of the email copy button changes to "Copied!".
This commit extends the user card popover redesign to the case where
the guest is not allowed access to view some of the other users'
profiles due to a change in the
"Who can view all other users in the organization" permission.
Fixes#27338.
The clear status icon was not properly aligned with the text in the user
card popover, due to additional padding on the icon. The reason for this
padding was to ensure correct focus ring offset, so to fix this issue,
without breaking the focus ring, this commit sets the `outline-offset`
to `0`.
As part of the popover menu redesign, this commit redesigns the user
card popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Before this, in the onclick event for
`#direct-messages-section-header.zoom-in`, we were filtering out the
class for the direct messages filter, and not activating a narrow on
trying to input on the filter. This was fragile, so we've added an
onclick listener to the direct messages filter which will do nothing
else than stopping the event propagation upto direct messages section
header.
Fixes https://github.com/zulip/zulip/pull/30332#discussion_r1669198527.
`$container` was not mounted when `show` called on mobile, likely
due to slower processing on mobile compared to web, so we ensure
$container is mounted to fix the `show` call having no effect.
This was due to reference being hidden by keyboard or scrolled
offscreen. We fix it by showing the dropdown even if the reference
is hidden for mobile devices.
This commit adds right padding, approximately equal to the
size of the sorting arrow, to the table headers which show
sorting arrows to make sure that arrows are visible clearly
at different font sizes and in different text languages.
We do not allow wrapping text randomly for user role values,
but since bot owner names can be long we do not want to do
that for bot owner column. So, this commit removes the
user_role class which is responsible for adding the required
CSS rule for role values.
This commit adds minimum width property for different columns
such that the columns do not get too small for narrow screens
and the tables can be scrolled horizontally to view the content.
There are some columns where the text is not user dependent
and we know how long the text can be like user role, bot type
and custom profile field type. In such cases, we can just avoid
wrapping the text randomly.
This commit removes width or min-width properties set for
different table columns so that the column width can adjust
themselves based on the text in different font sizes.
We still have the width property set on "actions" column
though to keep it at the right when a table has only 2/3
columns.
Further commits would be added to handle wrapping of
text in some columns and also to make sure that sort
arrows are visible correctly.
This commit adds "progressive-table-wrapper" class so that
the width property is correctly set and UI is correct for
narrow screens. Also, other properties added by that class
are fine.
This commit adds code to show only system groups in the dropdowns
for group permission settings in production for now. We continue
showing user defined groups for the settings that allow them in
development environment.
"can_mention_group" setting can be set to user defined groups
because some of the realms already do that in production.
information_density.initialize uses timerender.stringify_time, and
thus requires timerender.initialize to have been called first.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Updates strings in the user invite modal to use invitation as the
noun/adjective in strings, instead of invite.
Also use "…" rather than three "." characters for ellipses.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.
Fixes: #20620.
On reactivate or deactivate, we add appropriate class through JQuery.
But that class only remains there until sort, on sort any of these added
classes will be removed. We did not face the problem of un-greying for
active users page, because deactivated_users class was added to the HTML
always if `is_active` was false for the user.
In this commit, we rename `reactivated_user` to `active-user` and this
class will be present for all active users, even on the active users
table. For the deactivated users table, we will have scoped css that
will grey out the row with `active-user` class.
Fixed#29894.
We were using `is_active` to determine whether to show that column or
not. In case of deactivated table, on reactivating a user, `is_active`
will become true for that user, but we still don't want to show that
column and mess up our layout. Same would happen in the active users
table when a user was deactivated and the `is_active` would become
false. It is better to control the column to be shown on a per-table
basis and we introduced `display_last_active_column` to control that.
Co-authored-by: shubham-padia <shubham@zulip.com>
We were trying scroll the highlighted element but it also scrolls
the parent elements leading to scrolling of the help doc.
We don't need to scroll here at all actually since focused element
is scrolled to be visible by default. Tested in chrome, firefox
and safari on mac.
Three events i.e. 'stream create', 'subscription add', and
'message' event are received by client on channel creation.
Earlier, we were narrowing to channel while processing the
'stream create' event. This was resulting in fetching messages
for that narrow even before adding subscription. This resulted
in a bug where "You subscribed to" bookend was visible in the
message feed after the "channel events" message.
This commit updates the logic to narrow ONLY after adding
subscription i.e. while processing "subscription add" event.
Note: A channel creator who is not going to subscribe to the
channel themselves is NOT narrowed to the channel view.
This fixes the incorrect behavior.
Fixes#30691.
We've removed the pencil icon and renamed the button to `Change your
password`. We've also removed the `.small` and `.btn-link` classes.
We also changed the `Password` label to use the `.settings-field-label`
class, same as the other labels for settings.
We removed the pencil icon, `.btn-link` and `.small` classes.
We also changed the `Email` label to use the `.settings-field-label`
class, same as the other labels for settings.
We've removed the pencil icon and removed the `.small` class from the
button.
This setting button is being used in two places: Changing your personal
language and changing the org-wide language for emails. That is why
we have used the `Change the language` generic tooltip instead of
`Change your language` tooltip.
`.change_password_button` and `#pw_change_link` were unused.
I've not checked for any other unused classes in this page, only
the password field. This was noticed when trying to make a layout
change for the password field and the change was moved to a preparatory
commit for the same.
This commit adds a link to the "Personal" tab of the channel settings
modal from the "Channel settings" link in the channel actions popover
when the user doesn't have the permission to change the channel
permissions.
Fixes#30529.
This enables the stream popover for spectators, by unhiding the triple
vertical dots button in the stream sidebar row.
In the spectators' version of the popover, we only show the
"Copy link to channel" option.
Fixes part of #30529.
Now that the channel name in the left sidebar links to the topmost
topic, we add a new menu option that lets us copy the channel feed link
to the clipboard.
Fixes part of #30529.
This commit reorganizes the channel actions popover to group related
actions together.
As noted by Alya Abbott in CZO, the logic behind the grouping is as
follows:
* The top section is things you might do as part of your workflow for
using Zulip.
* The second section is for managing the channel itself.
* "Change color" is kept independently in the last section because of
how the color picker takes over a big chunk of the menu when opened.
Fixes part of #30529.
There was a bug when updating stream privacy with message list
not narrowed to a stream as 'narrow_state.stream_sub().stream_id',
added in 933195f7a5, tried to access stream_id field even when
`narrow_state.stream_sub()` returned undefined.
Modified the `Select a channel below or change topic name.`
instruction in `move topics/move messages` modal.
It's not necessary and can be confusing when user does not
have permissions to change the channel and topic name.
1) On the `Move topic` modal, dropped the line
2) On the `Move messages` modal, replaced the
line with `Move messages to:`
Fixes#30055.
Previously, when enter was pressed in the move messages
modal, it used to trigger page reload because the enter
event of the modal was not handled.
This commit fixes it by adding the "form_id" field while
launching the dialog_widget.
Fixes#29655
As part of the popover menu redesign, this redesigns the compose send
options popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes#25117.
As part of the popover menu redesign, this commit redesigns the user
group info popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
User circles indicating their presence are now synced across
all the places they appear, except for:
- navbar_personal_menu_popover - since the status
there will never change.
- typeahead_ist_item - because it is short-lived.
Fixes#30536
In 30d15d58fb, we made the
change to redirect to the newly created stream interleaved
view instead of "stream events" topic of that stream.
The comment related to it was not updated accordingly.
This commit updates the comment.
This commit separates the checking of whether the cursor is
at markdown link marker into its own function, which will be
used in #29136 to decide whether to format pasted urls or not.
This commit changes the width of tabs in stream and
group settings to be set as per the text inside it
with the previous width being set as minimum width
to avoid tabs being too small.
Fixes#30672.
This commit changes the width of tabs in bots panel
to be set as per the text inside it with the previous
width being set as minimum width to avoid tabs being
too small.
This commit updates the dropdown menu width to be set such that
the menu is wide enough to have options in a single line.
This change is only for group-based setting dropdowns in
organization, stream and group settigs.
Fixes#30673.
We now do not restrict the width of dropdown widget buttons
so that the width can be increased when the font size increases
and also if the option selected is long due to langauge.
We have similar behavior for the select element except that
the width of select element is set according to the longest
option while for dropdown widgets the button width is set
as per the current selected value.
This change is only for group-based setting dropdowns in
organization, stream and group settigs.
This commit hides invalid terms, since we don't want to be suggesting
invalid options to the user. We had already hidden invalid has and is
in the past, but this will also hide things like invalid channels or
user suggestions.
In the future it would be helpful to do two followups:
(1) Update the text for invalid is and has in search_description.hbs
since it looks a bit strange (though not introduced here). This
only shows up if you typed an invalid is/has and then start
typing a term beside it, so it's not very likely to happen.
(2) Don't auto-highlight the first typeahead result when there are
no valid suggestions for the last text term. This seems hard
to implement, so I'm leaving that out for now.
This supports adding users to DM pills by simply typing
a user's name in the text input directly after a complete
dm pill. It only works for DM pills at the end of search
input.
Clicking the X button removes a user from its user pill
container, and if that user was the last user left in the
container, then the whole container is also removed.
When the user has selected e.g. "dm:" from the typeahead, we want
to keep this as text, and let them type the search term in full
before it's pill-ified.
Most search suggestions are determined using the "last" search
input term, and the "rest" of the terms. Previously the "last"
term was whatever was at the end of the search query, and we
didn't differentiate between a completed term or an in-progress
term.
Now that there are search pills, we can differentiate between
completed and in-progress search terms, which clarifies some of
the search suggestion logic, and which we'll need to support
group pills and adding users to existing group pills.
Previously, search pill overflow was broken (sticking out of the
search box to the right) and now the search bar extends vertically to
allow pills to wrap when there are too many pills for one line.
There's still a bug when opening the search bar where the input
isn't selected. But I'm not worrying too much about that because
that text is about to be replaced with pills.
This is needed for us to support "search for..."
(i.e. operand = "search") terms being displayed
as text instead of search pills, once we convert
search to search pills.
This is useful for complicated typeaheads that have custom logic
for setting their element's contents after an item is selected.
Specifically, we're adding this to support a feature of search
pills, where selecting "Direct messages with" will add the text
"dm:" in the search bar and then trigger a lookup, and in
contrast selecting "Search for foo" will add "foo" in the search
bar and *not* trigger a lookup. In both cases, we won't want
to set the input element's text to the empty string, and we'll
want custom control over which situations to hide after select.
These two options make that possible.
See #26803 for more context on when this was introduced for
search pills, and this conversation on CZO for the conversation
that led to this decision:
https://chat.zulip.org/#narrow/stream/6-frontend/topic/search.20pills/near/1726228
- Make more succinct; don't over-describe UI the user can't see yet.
- Remove links (there are help links in view descriptions now).
- Explain where topics come from.
At widths under 400px, buttons in the popover were running off the edge,
which is fixed by removing the dividers between them.
For the new info density, buttons in the original row, even despite
removing the dividers, were still not fitting, so their width has been
slightly reduced.
Instead of showing ellipsis if the content of the tab switcher is
more than the width, we now allow it to take more width to show
full text.
If we don't have enough space to show the full text to show on
small screen sizes, we use ellipsis for overflowing text.
Increased sidebar width by 5px to accomodate full tab switcher
at both 14px and 16px font sizes.
These `background-color` and `cursor` rules are not needed here as the
`.dropdown-widget-button` base class already defines these properties
for `:disabled` pseudo-selector and there is no need to repeat here
again.
This is a follow up to previous commit
fe0a068ee5. We want
`.dropdown-widget-button` dropdowns to look same as `select` dropdowns.
This commit fixes opacity for all `.dropdown-widget-button`, which then
makes repetition in `settings.css` unnecessary.