diff --git a/assets/components/common/MobileMenu.vue b/assets/components/common/MobileMenu.vue
index b98675096607..6741a68f6e0f 100644
--- a/assets/components/common/MobileMenu.vue
+++ b/assets/components/common/MobileMenu.vue
@@ -18,8 +18,8 @@
     </div>
 
     <transition name="fade">
-      <div v-show="show" class="h-[calc(100vh-60px)] overflow-auto">
-        <SideMenu />
+      <div v-show="show" class="flex h-[calc(100vh-60px)] overflow-auto">
+        <SideMenu class="flex-1" />
       </div>
     </transition>
   </nav>
@@ -35,17 +35,13 @@ watch(route, () => {
 });
 </script>
 <style scoped lang="postcss">
-li.exited {
-  @apply opacity-50;
-}
-
 .fade-enter-active,
 .fade-leave-active {
   @apply transition-opacity;
 }
 
-.fade-enter-active .menu,
-.fade-leave-active .menu {
+.fade-enter-active > div,
+.fade-leave-active > div {
   @apply transition-transform;
 }
 
@@ -54,9 +50,9 @@ li.exited {
   @apply opacity-0;
 }
 
-.fade-enter-from .menu,
-.fade-leave-to .menu {
-  @apply -translate-y-2;
+.fade-enter-from > div,
+.fade-leave-to > div {
+  @apply -translate-y-10;
 }
 
 .logo {
diff --git a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png
index d2939877d65d..2321c394db96 100644
Binary files a/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png and b/e2e/visual.spec.ts-snapshots/dark-homepage-1-Mobile-Chrome-linux.png differ
diff --git a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png
index ba3e5f3a4de8..80a6881056d6 100644
Binary files a/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png and b/e2e/visual.spec.ts-snapshots/default-homepage-1-Mobile-Chrome-linux.png differ