Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

settings: Fix filter alignment under headings in all settings panels. 

Previously, when resizing the window, the filters/buttons and the
header did not fit on the same row, the filters/buttons were pushed
onto the next row but not put directly below the heading. This
changes the settings_panel_list_header and
add_default_streams_button_container into flex containers and
properly aligns the items below the heading when changing window
size.
Fixes: #30353
This commit is contained in:
Nicklas Steen 2024-11-18 13:49:15 +00:00
parent a8abcf5210
commit 3bf8f3399d
1 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/styles/settings.css
View File

@ -602,8 +602,9 @@ input[type="checkbox"] {
}
#add-custom-profile-field-button {
float: right;
margin-top: 4px;
margin-top: auto;
margin-bottom: 12px;
padding: 4px 14px;
}
#user-notification-settings {
@ -712,7 +713,11 @@ input[type="checkbox"] {
}
.add_default_streams_button_container {
float: right;
display: flex;
flex-wrap: wrap;
margin-top: auto;
margin-bottom: 12px;
gap: 6px;
#show-add-default-streams-modal {
/* We want this button to have the same height as the filter
@ -727,8 +732,6 @@ input[type="checkbox"] {
height: 30px;
min-width: 0;
margin-top: 12px;
margin-right: 6px;
}
}
@ -1993,6 +1996,10 @@ $option_title_width: 180px;
.settings_panel_list_header {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
& h3 {
display: inline-block;
@ -2000,15 +2007,35 @@ $option_title_width: 180px;
.user_filters {
display: flex;
float: right;
flex-wrap: wrap;
margin-top: auto;
margin-bottom: 12px;
gap: 6px;
& .dropdown-widget-button {
height: 30px;
max-width: 160px;
margin-right: 12px;
margin-top: 12px;
}
& input.search {
/* Margins need to be only handled by the container holding the
filters to keep them aligned in .settings_panel_list_header */
margin: 0;
}
}
.add_default_streams_button_container {
& input.search {
/* Margins need to be only handled by the container holding the
filters to keep them aligned in .settings_panel_list_header */
margin: 0;
}
}
.alert-notification {
margin-top: auto;
margin-bottom: 12px;
margin-right: auto;
}
& input.search {
@ -2021,7 +2048,8 @@ $option_title_width: 180px;
float: right;
font-size: 1em;
max-width: 160px;
margin-top: 12px;
margin-top: auto;
margin-bottom: 12px;
}
}