fix(studio): align PITR calendar dates in the first week (#47806)

## 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 \`<td>\` 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

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>

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() {
         </ChartCard>
       </Chart>
 
+      <Chart isErrored={true}>
+        <ChartCard>
+          <ChartHeader>
+            <ChartTitle tooltip="This is a tooltip">Response Errors</ChartTitle>
+            <ChartActions actions={actions} />
+          </ChartHeader>
+          <ChartContent
+            isEmpty={true}
+            errorState={
+              <ChartEmptyState
+                icon={<CriticalIcon />}
+                title="Some error happened"
+                description="Error happened why trying to fetch data. Please try again later."
+              />
+            }
+            emptyState={
+              <ChartEmptyState
+                icon={<BarChart2 size={20} />}
+                title="No data to show"
+                description="It may take up to 24 hours for data to refresh"
+              />
+            }
+            loadingState={<ChartLoadingState />}
+          >
+            My chart here...
+          </ChartContent>
+        </ChartCard>
+      </Chart>
+
       <Chart>
         <ChartCard>
           <ChartHeader>

apps/design-system/__registry__/index.tsx

@@ -621,6 +621,17 @@ export const Index: Record<string, any> = {
       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",

apps/design-system/content/docs/components/calendar.mdx

@@ -79,3 +79,9 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+### Calendar with disabled days
+
+Shows a calendar with disabled days for selection. The current month starts mid week.
+
+<ComponentPreview name="calendar-disabled-days-demo" />

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<Date | undefined>(earliestDate)
+
+  return (
+    <Calendar
+      mode="single"
+      required={true}
+      selected={date}
+      onSelect={setDate}
+      defaultMonth={latestDate}
+      startMonth={earliestDate}
+      endMonth={latestDate}
+      disabled={[{ before: earliestDate }, { after: latestDate }]}
+    />
+  )
+}

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',

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!',
               }}
             />

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(