Update Booking component UI for improved layout and responsiveness. Adjust class names for better styling consistency and ensure elements are properly sized with shrink properties. This enhances the overall user experience in managing availability.
This commit is contained in:
parent
85afc8c840
commit
6bcb6c5414
@ -445,15 +445,15 @@ export default function Booking() {
|
||||
return (
|
||||
<div
|
||||
key={dayNum}
|
||||
className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm max-w-[200px] ${
|
||||
className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-sm whitespace-nowrap ${
|
||||
isDark
|
||||
? "bg-rose-500/10 text-rose-200 border border-rose-500/20"
|
||||
: "bg-rose-50 text-rose-700 border border-rose-200"
|
||||
}`}
|
||||
>
|
||||
<Check className={`w-3.5 h-3.5 shrink-0 ${isDark ? "text-rose-400" : "text-rose-600"}`} />
|
||||
<span className="font-medium">{dayName}</span>
|
||||
<span className={`ml-auto text-sm ${isDark ? "text-rose-300" : "text-rose-600"}`}>
|
||||
<span className="font-medium shrink-0">{dayName}</span>
|
||||
<span className={`text-sm shrink-0 ${isDark ? "text-rose-300" : "text-rose-600"}`}>
|
||||
({new Date(`2000-01-01T${timeRange.startTime}`).toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user