From a75a3b22b67e9aa3530a723f7b2a4cd8ee31bf67 Mon Sep 17 00:00:00 2001 From: Jordi Enric <37541088+jordienr@users.noreply.github.com> Date: Fri, 10 Jul 2026 12:40:33 +0200 Subject: [PATCH] fix(studio): align PITR calendar dates in the first week (#47806) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What Fixes misaligned day cells in the PITR calendar widget for the first week of the month. ## Why The PITR calendar draws a \`border\` on each day cell via \`classNames.day\`. The day \`\` has no explicit width, so \`box-sizing: border-box\` doesn't apply and the 1px borders add to its size (36px → 38px), while the weekday header cells stay pinned at \`w-9\` (36px). Bordered day cells therefore drift right of their headers, which is most visible in the first partial week where unbordered leading cells sit flush next to the wider bordered ones. ## How Pin each day cell to a fixed \`w-9 box-border\` so the border is drawn inside the 36px box, and let the day button fill the cell (\`w-full\`). Column pitch now matches the weekday headers regardless of border state. Class-only change, no logic touched. Closes FE-3886 ## Summary by CodeRabbit * **Style** * Improved calendar day cell sizing and layout for more consistent rendering. * Ensured day buttons use full-width styling where applicable, while preserving existing hover, border, background, and corner behavior. * **Documentation** * Added documentation for “Calendar with disabled days,” including a new interactive preview. * **New Features** * Introduced a calendar example demonstrating disabled-day behavior with mid-week month start and restricted date selection. --------- Co-authored-by: Joshen Lim Co-authored-by: Ivan Vasilov --- .../default/block/chart-composed-states.tsx | 31 ++++++++++++++++++- apps/design-system/__registry__/index.tsx | 11 +++++++ .../content/docs/components/calendar.mdx | 6 ++++ .../example/calendar-disabled-days-demo.tsx | 25 +++++++++++++++ apps/design-system/registry/examples.ts | 6 ++++ .../Database/Backups/PITR/PITRForm.tsx | 1 + .../ui/src/components/shadcn/ui/calendar.tsx | 1 + 7 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx diff --git a/apps/design-system/__registry__/default/block/chart-composed-states.tsx b/apps/design-system/__registry__/default/block/chart-composed-states.tsx index c4e25d545c2..2d3657cca2c 100644 --- a/apps/design-system/__registry__/default/block/chart-composed-states.tsx +++ b/apps/design-system/__registry__/default/block/chart-composed-states.tsx @@ -1,7 +1,7 @@ 'use client' import { BarChart2, ExternalLink } from 'lucide-react' -import { Badge } from 'ui' +import { Badge, CriticalIcon } from 'ui' import { Chart, ChartActions, @@ -44,6 +44,35 @@ export default function ChartComposedStates() { + + + + Response Errors + + + } + title="Some error happened" + description="Error happened why trying to fetch data. Please try again later." + /> + } + emptyState={ + } + title="No data to show" + description="It may take up to 24 hours for data to refresh" + /> + } + loadingState={} + > + My chart here... + + + + diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx index 0e0dce2ff27..1ea214369aa 100644 --- a/apps/design-system/__registry__/index.tsx +++ b/apps/design-system/__registry__/index.tsx @@ -621,6 +621,17 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, + "calendar-disabled-days-demo": { + name: "calendar-disabled-days-demo", + type: "components:example", + registryDependencies: ["calendar","form","popover"], + component: React.lazy(() => import("@/registry/default/example/calendar-disabled-days-demo")), + source: "", + files: ["registry/default/example/calendar-disabled-days-demo.tsx"], + category: "undefined", + subcategory: "undefined", + chunks: [] + }, "single-value-field-array-demo": { name: "single-value-field-array-demo", type: "components:example", diff --git a/apps/design-system/content/docs/components/calendar.mdx b/apps/design-system/content/docs/components/calendar.mdx index 9b1d4187cbb..dff3e95d183 100644 --- a/apps/design-system/content/docs/components/calendar.mdx +++ b/apps/design-system/content/docs/components/calendar.mdx @@ -79,3 +79,9 @@ You can use the `` component to build a date picker. See the [Date Pic ### Form + +### Calendar with disabled days + +Shows a calendar with disabled days for selection. The current month starts mid week. + + diff --git a/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx b/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx new file mode 100644 index 00000000000..f428f871cb2 --- /dev/null +++ b/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx @@ -0,0 +1,25 @@ +'use client' + +import * as React from 'react' +import { Calendar } from 'ui' + +// The dates are specifically chosen to show a month which starts mid week. +const latestDate = new Date(2026, 6, 10) +const earliestDate = new Date(2026, 6, 7) + +export default function CalendarMidWeekDemo() { + const [date, setDate] = React.useState(earliestDate) + + return ( + + ) +} diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts index 161841ca9ca..7e05ca4755f 100644 --- a/apps/design-system/registry/examples.ts +++ b/apps/design-system/registry/examples.ts @@ -277,6 +277,12 @@ export const examples: Registry = [ registryDependencies: ['calendar', 'form', 'popover'], files: ['example/calendar-form.tsx'], }, + { + name: 'calendar-disabled-days-demo', + type: 'components:example', + registryDependencies: ['calendar', 'form', 'popover'], + files: ['example/calendar-disabled-days-demo.tsx'], + }, { name: 'single-value-field-array-demo', type: 'components:example', diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx index 2d5943c2461..7ec3086fc3d 100644 --- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx +++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx @@ -143,6 +143,7 @@ export function PITRForm({ '[&:not(:has(:disabled))]:border [&:not(:has(:disabled))]:border-stronger not-last:border-r-0 [&:not(:has(:disabled))]:bg-overlay-hover', 'rounded-none' ), + day_button: 'w-full rounded-none', selected: 'bg-brand-500!', }} /> diff --git a/packages/ui/src/components/shadcn/ui/calendar.tsx b/packages/ui/src/components/shadcn/ui/calendar.tsx index ff2d8dda136..ced618435f5 100644 --- a/packages/ui/src/components/shadcn/ui/calendar.tsx +++ b/packages/ui/src/components/shadcn/ui/calendar.tsx @@ -71,6 +71,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C day: cn( 'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md', 'last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20', + 'w-9 box-border', day ), day_button: cn(