3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: cách các modals hiển thị trên browser điện thoại

Browse Source
This commit is contained in:
3dtours
2026-06-26 09:13:24 +07:00
parent 03ee337e28
commit 6d90a47c24
31 changed files with 789 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/CoordinateSelectModal.tsx
+3 -3
View File
@@ -118,7 +118,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
};
return (
<div className="fixed inset-0 z-[6000] flex items-center justify-center p-4 animate-in fade-in duration-200">
<div className="fixed inset-0 z-[6000] flex items-end sm:items-center justify-center p-0 sm:p-4 animate-in fade-in duration-200">
{/* Backdrop */}
<div
className="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
@@ -126,7 +126,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
/>
{/* Content */}
<div className="relative w-full max-w-2xl h-[550px] bg-white dark:bg-slate-900 rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
<div className="relative w-full h-full sm:w-auto sm:max-w-2xl sm:h-[85vh] bg-white dark:bg-slate-900 rounded-t-2xl sm:rounded-3xl shadow-2xl overflow-hidden flex flex-col border border-gray-100 dark:border-slate-800 animate-in zoom-in-95 duration-200">
{/* Header */}
<div className="p-4 border-b border-gray-100 dark:border-slate-800/80 flex items-center justify-between bg-white dark:bg-slate-900 shrink-0">
<div className="flex items-center gap-2">
@@ -145,7 +145,7 @@ export const CoordinateSelectModal: React.FC<CoordinateSelectModalProps> = ({
</div>
{/* Map Body */}
<div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px]" style={{ zIndex: 10 }}>
<div className="flex-1 bg-gray-50 dark:bg-slate-950 relative min-h-[300px] sm:min-h-0" style={{ zIndex: 10 }}>
{/* Floating Search Panel */}
<div className="absolute top-4 left-4 right-4 sm:right-auto z-[1000] sm:w-80 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-slate-150 dark:border-slate-800 shadow-xl p-2 flex flex-col gap-1.5">