kbondelie/movie-night
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile layout: stack mood input and button vertically on small screens

Browse Source 
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>
This commit is contained in:
Kenny Bondelie
2026-03-15 18:54:37 -07:00
parent c4889cd189
commit a0c90e8280
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/index.html
+3 -3
View File
@@ -57,11 +57,11 @@
<!-- Mood Input --> <!-- Mood Input -->
<div class="mb-8"> <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?" <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" <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 Find Movies
</button> </button>
</div> </div>