Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix buttons alignment of Space list header (#8047)
Browse files Browse the repository at this point in the history
  • Loading branch information
luixxiul authored Mar 14, 2022
1 parent 14807de commit ed6a371
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 15 deletions.
28 changes: 16 additions & 12 deletions res/css/structures/_SpaceHierarchy.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,36 +35,40 @@ limitations under the License.
}

.mx_SpaceHierarchy_listHeader {
display: flex;
min-height: 32px;
display: grid;
justify-content: space-between;
align-items: center;
column-gap: 10px;
min-height: 32px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
margin-bottom: 12px;

> h4 {
.mx_SpaceHierarchy_listHeader_header {
grid-column-start: 1;
font-weight: $font-semi-bold;
margin: 0;
}

.mx_AccessibleButton {
padding: 4px 12px;
font-weight: normal;
.mx_SpaceHierarchy_listHeader_buttons {
grid-column-start: 2;
display: flex;
flex-flow: wrap;
justify-content: flex-end;
row-gap: 12px;
column-gap: 12px;

& + .mx_AccessibleButton {
margin-left: 16px;
.mx_AccessibleButton {
padding: 4px 12px;
font-weight: normal;
}
}

.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px; // to account for the 1px border
}

> span {
margin-left: auto;
}
}

.mx_SpaceHierarchy_error {
Expand Down
8 changes: 5 additions & 3 deletions src/components/structures/SpaceHierarchy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -770,8 +770,10 @@ const SpaceHierarchy = ({

content = <>
<div className="mx_SpaceHierarchy_listHeader">
<h4>{ query.trim() ? _t("Results") : _t("Rooms and spaces") }</h4>
<span>
<h4 className="mx_SpaceHierarchy_listHeader_header">
{ query.trim() ? _t("Results") : _t("Rooms and spaces") }
</h4>
<div className="mx_SpaceHierarchy_listHeader_buttons">
{ additionalButtons }
{ hasPermissions && (
<ManageButtons
Expand All @@ -781,7 +783,7 @@ const SpaceHierarchy = ({
setError={setError}
/>
) }
</span>
</div>
</div>
{ errorText && <div className="mx_SpaceHierarchy_error">
{ errorText }
Expand Down

0 comments on commit ed6a371

Please sign in to comment.