mirror of
https://github.com/SchildiChat/element-web.git
synced 2024-10-01 01:26:12 -04:00
Make member device info buttons fluid and stackable with flexbox
Buttons with short text stay as they are, buttons with long text don't get overflowed, but just grow and wrap on a new line if needed, still remaining aligned with others (see screenshot in PR comments) Signed-off-by: Andrei Shevchuk <andrei@shevchuk.co>
This commit is contained in:
parent
535e33509b
commit
68dd47aa7b
@ -18,6 +18,13 @@ limitations under the License.
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_textButton {
|
||||
color: $accent-fg-color;
|
||||
@ -26,12 +33,11 @@ limitations under the License.
|
||||
text-align: center;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
width: 95px;
|
||||
border: 0px;
|
||||
font-size: 14px;
|
||||
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
margin: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_deviceId {
|
||||
@ -44,11 +50,6 @@ limitations under the License.
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.mx_MemberDeviceInfo_blacklist,
|
||||
.mx_MemberDeviceInfo_unblacklist {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* "Unblacklist" is too long for a regular button: make it wider and
|
||||
reduce the padding. */
|
||||
.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
|
||||
|
Loading…
Reference in New Issue
Block a user