From 95e8a9e419ece4d7d7e6cbc143067c9517232261 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Mon, 13 Jun 2022 14:12:48 +0000 Subject: [PATCH] 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 * Add the block margin to the rows, not to the keys Signed-off-by: Suguru Hirahara * Add the inline margin to the shortcuts, not to the keys Signed-off-by: Suguru Hirahara --- res/css/views/settings/_KeyboardShortcut.scss | 6 ------ .../tabs/user/_KeyboardUserSettingsTab.scss | 18 +++++++++++++++++- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/res/css/views/settings/_KeyboardShortcut.scss b/res/css/views/settings/_KeyboardShortcut.scss index d3ca6cc943..721d5fd8fe 100644 --- 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 index 1ba3a8599b..4fe4d175df 100644 --- 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 + } + } }