From 24cf3d5f05e9b77060baa41bec62747ce9455cd7 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 8 Jun 2020 18:37:36 +0100
Subject: [PATCH] add key to react list and let selector container wrap

---
 .../views/settings/tabs/user/_AppearanceUserSettingsTab.scss  | 4 +++-
 .../views/settings/tabs/user/AppearanceUserSettingsTab.tsx    | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index eb73d2ec85..1ecfd71888 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -50,8 +50,9 @@ limitations under the License.
     > .mx_ThemeSelectors {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
 
-        margin-top: 23px;
+        margin-top: 13px;
 
         > .mx_RadioButton {
             padding: $font-16px;
@@ -61,6 +62,7 @@ limitations under the License.
             flex-shrink: 1;
             flex-grow: 0;
             margin-right: 15px;
+            margin-top: 10px;
         }
 
         > .mx_RadioButton:not([disabled]) {
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
index 9146f4ff20..3d19241f42 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -255,6 +255,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 <div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
                     {orderedThemes.map(theme => {
                         return <StyledRadioButton
+                            key={theme.id}
                             value={theme.id}
                             name={"theme"}
                     disabled={this.state.useSystemTheme}