idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance SearchOverlay layout and responsiveness

Browse Source
This commit is contained in:
Jaime Idolpx 2026-04-14 00:31:32 -04:00
parent 4c2ce166e8
commit 6b0ffb7de2
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/components/SearchOverlay.tsx
View File

@ -87,7 +87,7 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 z-50 backdrop-blur-md bg-black/30" className="fixed inset-0 z-50 backdrop-blur-md bg-black/30 flex items-center justify-center"
onClick={onClose} onClick={onClose}
> >
<motion.div <motion.div
@ -95,10 +95,11 @@ export default function SearchOverlay({ config, setConfig, onClose }: SearchOver
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ y: -50, opacity: 0 }} exit={{ y: -50, opacity: 0 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }} transition={{ type: 'spring', damping: 25, stiffness: 300 }}
className="max-w-2xl mx-auto mt-20 bg-white rounded-xl shadow-2xl overflow-hidden" className="w-full h-full max-w-2xl sm:rounded-xl bg-white shadow-2xl overflow-auto flex flex-col justify-center mx-0 sm:mx-auto my-0 sm:my-20 p-0 sm:p-0"
style={{ maxHeight: '100dvh' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="p-6"> <div className="p-4 sm:p-6 flex-1 flex flex-col">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-medium">Search</h2> <h2 className="text-xl font-medium">Search</h2>
<button onClick={onClose} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg"> <button onClick={onClose} className="p-2 -m-2 hover:bg-neutral-100 rounded-lg">