From a0c90e8280c82568209b7f614f016d2151bdb4db Mon Sep 17 00:00:00 2001
From: Kenny Bondelie <kenny@sprinkletech.net>
Date: Sun, 15 Mar 2026 18:54:37 -0700
Subject: [PATCH] Fix mobile layout: stack mood input and button vertically on
 small screens

The Find Movies button was overlapping the input field on mobile,
cutting off the placeholder text. Now stacks vertically on mobile
and keeps the inline layout on sm+ screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index 627cb71..15af091 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -57,11 +57,11 @@
 
             <!-- Mood Input -->
             <div class="mb-8">
-                <div class="relative">
+                <div class="flex flex-col sm:flex-row gap-2 sm:gap-0 sm:relative">
                     <input type="text" id="mood-input" placeholder="What are you in the mood for?"
-                        class="w-full px-5 py-4 bg-dark-200 border border-gray-700 rounded-xl text-lg focus:outline-none focus:border-indigo-500 text-gray-100 pr-24">
+                        class="w-full px-5 py-4 bg-dark-200 border border-gray-700 rounded-xl text-lg focus:outline-none focus:border-indigo-500 text-gray-100 sm:pr-32">
                     <button id="find-btn"
-                        class="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
+                        class="w-full sm:w-auto sm:absolute sm:right-2 sm:top-1/2 sm:-translate-y-1/2 px-5 py-3 sm:py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
                         Find Movies
                     </button>
                 </div>