From d037642f55dd25780e8b61721cbbbdb974d5a11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sosth=C3=A8ne=20Gu=C3=A9don?= <sosthene@guedon.gdn>
Date: Sun, 13 Aug 2023 16:06:28 +0200
Subject: [PATCH] Fix jitter when toggling "adapt to system theme"

This patch makes the border around the "dark" and "light" radio button to always be present.
Previously it was not present when the button were disabled because using the system theme,
which caused it to make the elements larger and made them move when toggling "adapt to system theme"

To keep the same meaning as previously, the border is only colored when the button is activated

Fix #1339
---
 js/src/views/Settings/PreferencesView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/src/views/Settings/PreferencesView.vue b/js/src/views/Settings/PreferencesView.vue
index 259220714..919131972 100644
--- a/js/src/views/Settings/PreferencesView.vue
+++ b/js/src/views/Settings/PreferencesView.vue
@@ -23,8 +23,8 @@
           <fieldset>
             <legend class="sr-only">{{ t("Theme") }}</legend>
             <o-radio
-              :class="{ 'border-mbz-bluegreen border-2': theme === 'light' }"
-              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2"
+              :class="{ 'border-mbz-bluegreen': theme === 'light' }"
+              class="p-4 bg-white text-zinc-800 rounded-md mt-2 mr-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"
@@ -32,8 +32,8 @@
               >{{ t("Light") }}</o-radio
             >
             <o-radio
-              :class="{ 'border-mbz-bluegreen border-2': theme === 'dark' }"
-              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2"
+              :class="{ 'border-mbz-bluegreen': theme === 'dark' }"
+              class="p-4 bg-zinc-800 rounded-md text-white mt-2 ml-2 border-2"
               :disabled="systemTheme"
               v-model="theme"
               name="theme"