Fix Animation Consistency & UX

src/app/components/dropdown/dropdown.scss

@@ -56,7 +56,7 @@ $default_animation_duration: 0.2s;
   .chevron {
     width: 24px; height: 24px;
     flex-shrink: 0;
-    transition: transform var(--dropdown-duration) $animation_timing;
+    transition: transform var(--animation-duration) $animation_timing;
     user-select: none;
 
     &.open {
@@ -92,8 +92,16 @@ $default_animation_duration: 0.2s;
   }
 
   @keyframes slideIn {
-    from { opacity: 0; transform: translateY(-8px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      transform: translateY(-8px);
+      pointer-events: none;
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      pointer-events: auto;
+      opacity: 1;
+    }
   }
 }
 
@@ -105,6 +113,7 @@ $default_animation_duration: 0.2s;
   position: relative;
   align-content: center;
   transition: background-color var(--animation-duration) $animation_timing;
+  font-size: 16px;
 
   &:hover, &.focused {
     background-color: $hover_bg;