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 <luixxiul@users.noreply.github.com>

* Add the block margin to the rows, not to the keys

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add the inline margin to the shortcuts, not to the keys

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Author: luixxiul

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;
-        }
     }
 }

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
+        }
+    }
 }