More IA fix with slop

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -35,8 +35,9 @@ const changeLocale = (lang) => {
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} ▾</button>
 
+  <Transition name="dropdown">
     <div class="dropdown" v-show="dropdownVisible">
       <div class="section">
         <div :class="{'menu-item': true, 'active': locale === loc.code}"
@@ -45,6 +46,7 @@ const changeLocale = (lang) => {
         </div>
       </div>
     </div>
+  </Transition>
 </div>
 </template>
 
@@ -63,8 +65,17 @@ const changeLocale = (lang) => {
     background-color: #30363d;
   }
 }
+/* Dropdown transitions */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .dropdown {
-z-index: 10;
+ z-index: 10;
   position: absolute;
   top: 50px;
   right: 110px;

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -30,8 +30,9 @@ onUnmounted(() => {
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button>
 
+  <Transition name="dropdown">
     <div class="dropdown" v-show="dropdownVisible">
       <div class="two-columns">
           <div class="section">
@@ -82,6 +83,7 @@ onUnmounted(() => {
           </div>
       </div>
     </div>
+  </Transition>
 </div>
 </template>
 
@@ -146,9 +148,18 @@ onUnmounted(() => {
   margin-right: 15px;
 }
 
+/* Dropdown transitions */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 /* Dropdown */
 .dropdown {
-z-index: 10;
+ z-index: 10;
   position: absolute;
   top: 50px;
   right: 0;