Merge pull request #4776 from shvchk/patch-2

Make member device info buttons fluid and stackable with flexbox
element-hq · Aug 10, 2017 · 7529343 · 7529343
2 parents 535e335 + a72fc80
commit 7529343
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
@@ -18,6 +18,12 @@ limitations under the License.
     padding: 10px 0px;
 }
 
+.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
+    padding: 6px 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
 
 .mx_MemberDeviceInfo_textButton {
     color: $accent-fg-color;
@@ -26,12 +32,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 +49,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,