Improve visibility of the "+X others" button in the calendar view

Adjust z-index and styling for the "+X others" button and debug text in CalendarGrid.tsx to ensure proper display and visibility within the calendar grid.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/0M7RANA
This commit is contained in:
michaelschal committed 2025-08-18 14:07:14 +00:00
1 parent fc154ba491
commit 50365c3e8e
1 file changed
+13 -7
+13 -7
View File
@@ -128,7 +128,7 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
} }
return ( return (
<div className="space-y-1.5"> <div className="space-y-1.5 relative z-20">
{/* Éléments visibles */} {/* Éléments visibles */}
{visibleItems.map((item, index) => ( {visibleItems.map((item, index) => (
<CalendarItem <CalendarItem
@@ -139,21 +139,27 @@ function DayItemsContainer({ dayOrders, dayDeliveries, onItemClick }: { dayOrder
/> />
))} ))}
{/* Badge "+X autres" avec modal moderne */} {/* Badge "+X autres" avec modal moderne - TOUJOURS VISIBLE */}
{hiddenCount > 0 && (
<div className="w-full bg-red-500 border-4 border-red-800 p-2 text-white font-black text-center z-50 relative" style={{display: 'block !important', position: 'relative', zIndex: 9999}}>
DEBUG: {hiddenCount} éléments cachés - BOUTON DOIT APPARAÎTRE
</div>
)}
{hiddenCount > 0 && ( {hiddenCount > 0 && (
<Dialog open={isOpen} onOpenChange={setIsOpen}> <Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full h-6 text-xs bg-orange-200 hover:bg-orange-300 border-orange-400 text-orange-900 font-bold shadow-lg transition-all duration-150 border-2" className="w-full h-8 text-sm bg-red-600 hover:bg-red-700 border-red-800 text-white font-bold shadow-lg transition-all duration-150 border-4 relative z-50"
style={{display: 'block !important', position: 'relative', zIndex: 9999, backgroundColor: 'red', color: 'white'}}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsOpen(true); setIsOpen(true);
}} }}
> >
<MoreHorizontal className="w-3 h-3 mr-1" /> <MoreHorizontal className="w-4 h-4 mr-2" />
+{hiddenCount} autres +{hiddenCount} autres (DEBUG)
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-hidden"> <DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-hidden">
@@ -429,7 +435,7 @@ export default function CalendarGrid({
} ${!isCurrentMonth ? 'opacity-50' : ''}`} } ${!isCurrentMonth ? 'opacity-50' : ''}`}
onClick={() => onDateClick(date)} onClick={() => onDateClick(date)}
> >
<div className="p-3 h-full flex flex-col"> <div className="p-3 h-full flex flex-col relative">
{/* Numéro du jour avec design moderne */} {/* Numéro du jour avec design moderne */}
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<span className={`text-sm font-bold tracking-tight ${ <span className={`text-sm font-bold tracking-tight ${
@@ -449,7 +455,7 @@ export default function CalendarGrid({
</div> </div>
{/* Orders and Deliveries avec design moderne */} {/* Orders and Deliveries avec design moderne */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-visible relative z-10">
<DayItemsContainer <DayItemsContainer
dayOrders={dayOrders} dayOrders={dayOrders}
dayDeliveries={dayDeliveries} dayDeliveries={dayDeliveries}