diff --git a/components/common/AnimateNumber.vue b/components/common/AnimateNumber.vue
index 3d5cffef..6e50ebdc 100644
--- a/components/common/AnimateNumber.vue
+++ b/components/common/AnimateNumber.vue
@@ -5,13 +5,8 @@ defineProps<{
 </script>
 
 <template>
-  <div overflow-hidden h="1.25rem">
-    <div
-      transition="duration-300 transform"
-      :style="{
-        transform: increased ? 'translateY(-50%)' : 'translateY(0%)',
-      }"
-    >
+  <div of-hidden h="1.25rem">
+    <div flex="~ col" transition-transform duration-300 :class="increased ? 'translate-y--1/2' : 'translate-y-0'">
       <slot />
       <slot name="next" />
     </div>
diff --git a/components/status/StatusActionButton.vue b/components/status/StatusActionButton.vue
index 3c241982..0416e7e0 100644
--- a/components/status/StatusActionButton.vue
+++ b/components/status/StatusActionButton.vue
@@ -55,10 +55,10 @@ useCommand({
       </div>
     </CommonTooltip>
 
-    <CommonAnimateNumber :increased="active">
-      <span display-block text-secondary-light text-sm>{{ text }}</span>
+    <CommonAnimateNumber :increased="active" text-sm>
+      <span text-secondary-light>{{ text }}</span>
       <template #next>
-        <span display-block :class="[color]" text-sm>{{ text }}</span>
+        <span :class="[color]">{{ text }}</span>
       </template>
     </CommonAnimateNumber>
   </component>