[bug]: Calendar & Date Picker render incorrectly on chromium browsers

[jimmyjliu]

Describe the bug

Issue

Depending on the browser being used, either the calendar or calendar popover is being rendered incorrectly. This issue appears to be affecting chromium browsers only from my research.

The calendar appears to have more than extra padding, the back and forward button are to the right of the month, and overlap. Further more, coloring for date selection appears to be incorrect especially for dark mode which is mentioned in this issue.

Other Observations

• This only happening in "prod" for me, opening the calendar on localhost looks fine.
• Upon refreshing (crtl/cmd + r) the "correct" calendar layout flashes before "shifting" into the bugged version (chromium browsers)
• The calendar looks correct on the iOS chrome mobile app (I believe this is because iOS chrome uses WebKit)
• Issue is occurring on both MacOS and Windows
• My lead on the issue that is causing this is either Tailwind4 compatibility issues or react-day-picker compatibility issues.

Images

Images attached below of the shadcn homepage calendar:

Arc Browser (bugged)

Arc Browser (bugged)

Chrome (bugged)

Firefox (no bug)

Safari (no bug)

Localhost (no bug)

Affected component/components

Calendar, Date Picker

How to reproduce

• Visit ui.shadcn.com on various browsers and observe the calendar being rendered differently depending on the browser.
• Chromium browsers seem to be having issues with the calendar
• Try refreshing the page (crtl/cmd +r) and notice that the correct version of the calendar flashes for a second

Codesandbox/StackBlitz link

No response

Logs

System Info

Machine:
MacOS Sequoia 15.3.2 (24D81) 

Arc Browser:
Version 1.89.0 (60953)

Chrome:
Version 135.0.7049.85 (Official Build) (arm64)

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[jsdev-robin]

use this for latest version

"use client";

import * as React from "react";
import { DayPicker, getDefaultClassNames } from "react-day-picker";

import { cn } from "@/lib/utils";
import { buttonVariants } from "./button";

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  const defaultClassNames = getDefaultClassNames();
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: `relative flex ${defaultClassNames.month}`,
        month_caption: `relative mx-10 flex h-7 items-center justify-center ${defaultClassNames.month_caption}`,
        weekdays: cn("flex flex-row", classNames?.weekdays),
        weekday: cn(
          "w-8 text-sm font-normal text-muted-foreground",
          classNames?.weekday
        ),
        month: cn("w-full", classNames?.month),

        caption_label: cn(
          "truncate text-sm font-medium",
          classNames?.caption_label
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 [&_svg]:fill-foreground",
          classNames?.button_next
        ),
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 [&_svg]:fill-foreground",
          classNames?.button_previous
        ),
        nav: cn("flex items-start", classNames?.nav),
        month_grid: cn("mx-auto mt-4", classNames?.month_grid),
        week: cn("mt-2 flex w-max items-start", classNames?.week),
        day: cn(
          "flex size-8 flex-1 items-center justify-center p-0 text-sm",
          classNames?.day
        ),
        day_button: cn(
          "size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100",
          classNames?.day_button
        ),
        range_start: cn(
          "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground day-range-start rounded-s-md",
          classNames?.range_start
        ),
        range_middle: cn(
          "bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground",
          classNames?.range_middle
        ),
        range_end: cn(
          "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground day-range-end rounded-e-md",
          classNames?.range_end
        ),
        selected: cn(
          "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
          classNames?.selected
        ),
        today: cn(
          "[&>button]:bg-accent [&>button]:text-accent-foreground",
          classNames?.today
        ),
        outside: cn(
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
          classNames?.outside
        ),
        disabled: cn("text-muted-foreground opacity-50", classNames?.disabled),
        hidden: cn("invisible flex-1", classNames?.hidden),
        ...classNames,
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };

[CarlosZiegler]

Thanks @jsdev-robin ! Before your version I got this rendered calendar :