feat: improve invoice calendar item display and date picker icon button styling

src/components/ui/calendar.tsx

@@ -100,10 +100,11 @@ function Calendar({
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
+          "relative w-full h-full p-0 text-center group/day aspect-square select-none",
+          props.mode !== "single" && "[&:last-child[data-selected=true]_button]:rounded-r-md",
+          props.mode !== "single" && (props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md"),
           defaultClassNames.day
         ),
         range_start: cn(

src/components/ui/date-picker.tsx

@@ -98,13 +98,13 @@ export function DatePicker({
           <Button
             variant="ghost"
             disabled={disabled}
-            className="absolute top-1/2 right-2 size-6 -translate-y-1/2"
+            className="absolute top-1/2 right-2 size-6 p-0 -translate-y-1/2 text-primary/80 hover:text-primary transition-colors z-20"
           >
-            <CalendarIcon className="size-3.5" />
+            <CalendarIcon className="size-4" />
             <span className="sr-only">Select date</span>
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto overflow-hidden p-0" align="end">
+        <PopoverContent className="w-auto overflow-hidden p-0 rounded-xl" align="end">
           <Calendar
             mode="single"
             selected={date}