fix row styles for icon always to have space

Author: e11sy

codex-ui/src/vue/components/row/Row.vue

@@ -102,6 +102,7 @@ defineProps<{
   }
 
   &__center {
+    height: 20px;
     flex: 1;
     display: flex;
     flex-direction: column;

src/presentation/pages/Settings.vue

@@ -58,12 +58,10 @@
                 <DarkColorShemeIcon v-if="scheme === 'Dark'" />
               </template>
               <template
+                v-if="colorScheme === scheme.toLowerCase()"
                 #right
               >
-                <Icon
-                  name="Check"
-                  :style="colorScheme === scheme.toLowerCase() ? 'opacity: 1;' : 'opacity: 0;'"
-                />
+                <Icon name="Check" />
               </template>
             </Row>
           </Section>
@@ -84,12 +82,10 @@
                 <ThemePreview :theme="theme" />
               </template>
               <template
+                v-if="themeBase === theme.toLowerCase()"
                 #right
               >
-                <Icon
-                  name="Check"
-                  :style="themeBase === theme.toLowerCase() ? 'opacity: 1;' : 'opacity: 0;'"
-                />
+                <Icon name="Check" />
               </template>
             </Row>
           </Section>
@@ -110,12 +106,10 @@
                 <ThemePreview :theme="theme" />
               </template>
               <template
+                v-if="themeAccent === theme.toLowerCase()"
                 #right
               >
-                <Icon
-                  name="Check"
-                  :style="themeAccent === theme.toLowerCase() ? 'opacity: 1;' : 'opacity: 0;'"
-                />
+                <Icon name="Check" />
               </template>
             </Row>
           </Section>