diff --git a/app/components/messages/MessageInput.vue b/app/components/messages/MessageInput.vue
index f14e9c3..4d5c201 100644
--- a/app/components/messages/MessageInput.vue
+++ b/app/components/messages/MessageInput.vue
@@ -372,25 +372,21 @@ const getTypePlaceholder = (type: MessageType): string => {
 
 <style scoped>
 /* Slide up animation for previews */
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.3s ease;
-  overflow: hidden;
+.slide-up-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-up-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
 }
 
-.slide-up-enter-from,
 .slide-up-leave-to {
   opacity: 0;
-  max-height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.slide-up-enter-to,
-.slide-up-leave-from {
-  opacity: 1;
-  max-height: 200px;
+  transform: translateY(10px);
 }
 </style>
diff --git a/app/pages/messages/index.vue b/app/pages/messages/index.vue
index 20c9507..8720ad4 100644
--- a/app/pages/messages/index.vue
+++ b/app/pages/messages/index.vue
@@ -225,8 +225,8 @@
             />
           </div>
 
-          <!-- Input -->
-          <div class="p-4 border-t border-[var(--wa-border)]">
+          <!-- Input - grows when media is selected -->
+          <div class="p-4 border-t border-[var(--wa-border)] transition-all duration-300 ease-out">
             <MessagesMessageInput
               :replying-to="replyingTo"
               @send="handleSendMessage"