Fix keyboard shortcuts on settings tab being wrapped (#8825)

* Fix keyboard shortcuts being wrapped Setting $spacing-8 gap between the labels and the shortcuts Signed-off-by: Suguru Hirahara <[email protected]> * Add the block margin to the rows, not to the keys Signed-off-by: Suguru Hirahara <[email protected]> * Add the inline margin to the shortcuts, not to the keys Signed-off-by: Suguru Hirahara <[email protected]>
matrix-org · Jun 13, 2022 · 95e8a9e · 95e8a9e
1 parent f10d35c
commit 95e8a9e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/res/css/views/settings/_KeyboardShortcut.scss b/res/css/views/settings/_KeyboardShortcut.scss
@@ -20,17 +20,11 @@ limitations under the License.
         padding: 5px;
         border-radius: 4px;
         background-color: $header-panel-bg-color;
-        margin-right: 5px;
         min-width: 20px;
         text-align: center;
         display: inline-block;
         border: 1px solid $kbd-border-color;
         box-shadow: 0 2px $kbd-border-color;
-        margin-bottom: 4px;
         text-transform: capitalize;
-
-        & + kbd {
-            margin-left: 5px;
-        }
     }
 }
diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.scss
@@ -16,9 +16,25 @@ limitations under the License.
 */
 
 .mx_KeyboardUserSettingsTab .mx_SettingsTab_section {
-    .mx_KeyboardShortcut_shortcutRow {
+    .mx_KeyboardShortcut_shortcutRow,
+    .mx_KeyboardShortcut {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }
+
+    .mx_KeyboardShortcut_shortcutRow {
+        column-gap: $spacing-8;
+        margin-bottom: $spacing-4;
+
+        // TODO: Use flexbox
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+
+        .mx_KeyboardShortcut {
+            flex-wrap: nowrap;
+            column-gap: 5px; // TODO: Use a spacing variable
+        }
+    }
 }