feat(condensed): add condensed view to Overlays & Layering components

[garrity-miepub]

Summary

Add condensed view support (data-slot attributes + condensed CSS overrides) to all Overlays & Layering components.

Components Updated

Component	Data-Slots	Notes
BookingDialog	26	Includes FloatingInput, ServiceSelect, ConsentSwitch, InlineBookingForm, QuickBookCard sub-components
CookieConsent	9	CookieConsentBanner + CompactCookieBanner
Modal	6	Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter
RejectionModal	5	Composes Modal; rejection-modal-info, warning, reasons, reason, details
SetupServiceModal	6	Service form: error, description, price, toggles, toggle (×3), inventory
Tooltip	1	Portaled tooltip content container

Additional Fixes

• ConsentSwitch toggle geometry: Removed border-2 border-transparent eating internal space, added items-center, fixed translate values for proper unchecked/checked inset positioning
• ConsentSwitch accessibility: Added aria-describedby linking to description paragraph when present
• Modal body font-size: Added explicit font-size to modal-body condensed CSS (was inheriting 16px browser default)

Pattern

• data-slot="component-part" attributes on JSX elements
• body.condensed [data-slot='x'] { ... !important; } rules in src/styles/condensed-view.css
• !important required because Tailwind CSS 4's @layer utilities lowers specificity

[Copilot]

Pull request overview

Adds condensed-density styling hooks to the BookingDialog component suite by introducing data-slot attributes and corresponding condensed CSS overrides, and refines ConsentSwitch toggle geometry to better match the shared Switch component.

Changes:

• Added data-slot attributes across BookingDialog-related subcomponents (DialogOverlay, BookingDialog, FloatingInput, ServiceSelect, ConsentSwitch, InlineBookingForm, QuickBookCard).
• Added condensed-mode CSS overrides in condensed-view.css to reduce spacing, font sizes, and control dimensions for these components.
• Updated ConsentSwitch toggle/thumb classes and condensed translations to align with proven Switch geometry.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/styles/condensed-view.css	Adds condensed overrides targeting new BookingDialog data-slot hooks.
src/components/BookingDialog/BookingDialog.tsx	Adds data-slot hooks across subcomponents and adjusts ConsentSwitch toggle geometry.

Comments suppressed due to low confidence (2)

src/components/BookingDialog/BookingDialog.tsx:405

• DialogOverlay renders a custom modal container but doesn’t currently implement common dialog accessibility behaviors used elsewhere in the repo (e.g., Escape-to-close and focus trapping/initial focus). Consider either reusing the shared Modal component (which already handles useEscapeKey + focus trap), or add equivalent Escape handling and focus management here so keyboard users aren’t stranded behind the overlay.

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      <div className="flex min-h-full items-center justify-center p-4">
        {/* Backdrop */}
        <div
          className="fixed inset-0 bg-black/50 transition-opacity"
          onClick={onClose}
          aria-hidden="true"
        />

        {/* Dialog Content */}
        <div
          className={cn(
            'bg-card relative w-full max-w-lg transform rounded-2xl shadow-2xl transition-all',
            className
          )}
          role="dialog"
          aria-modal="true"
          aria-labelledby={titleId}
          data-slot="dialog-overlay"
        >
          {children}
        </div>
      </div>
    </div>

src/components/BookingDialog/BookingDialog.tsx:196

• ServiceSelect’s trigger button toggles a popup list but is missing basic ARIA state wiring (e.g., aria-expanded and an aria-controls reference to the dropdown). Adding these (and giving the popup an appropriate role/id) will improve screen reader output and align better with how interactive popovers are typically exposed.

      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        data-slot="service-select-trigger"
        className={cn(
          'w-full rounded-lg border px-4 py-3 text-left transition-colors',
          'bg-background',
          'focus:ring-2 focus:outline-none',
          error
            ? 'border-destructive focus:ring-destructive/20'
            : 'border-input focus:border-primary-500 focus:ring-primary-500/20'
        )}
      >

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	cf8dff9
Status:	✅  Deploy successful!
Preview URL:	https://5600c64d.ui-6d0.pages.dev
Branch Preview URL:	https://feature-condensed-view-overl.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (4)

src/components/Modal/Modal.tsx:272

• ModalHeader sets data-slot but then spreads {...props} after it, which allows consumers to override/remove the slot hook (e.g. passing data-slot via props), breaking condensed-view selectors. Consider spreading props before data-slot, or explicitly stripping data-slot from ...props so the slot hook remains stable.

const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="modal-header"
      className={cn(
        'flex shrink-0 items-center justify-between',
        'border-border border-b px-6 py-4',
        className
      )}
      {...props}
    />

src/components/Modal/Modal.tsx:300

• Same stability concern for ModalTitle: data-slot is set but {...props} is spread after, so a consumer-provided data-slot can override it and break condensed-view targeting. Consider moving {...props} before data-slot (or stripping data-slot from props).

const ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(
  ({ className, children, ...props }, ref) => {
    const { modalId } = useModalContext();
    return (
      <h2
        ref={ref}
        id={`${modalId}-title`}
        data-slot="modal-title"
        className={cn(
          'text-lg leading-none font-semibold tracking-tight',
          className
        )}
        {...props}
      >

src/components/Modal/Modal.tsx:347

• Same stability concern for ModalClose: data-slot is set but {...props} is spread after, so a consumer-provided data-slot can override it and break condensed-view targeting. Consider moving {...props} before data-slot (or stripping data-slot from props).

    return (
      <button
        ref={ref}
        type="button"
        onClick={handleClick}
        data-slot="modal-close"
        className={cn(
          'inline-flex h-8 w-8 items-center justify-center rounded-lg',
          'text-muted-foreground hover:text-foreground',
          'hover:bg-muted transition-colors',
          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',
          className
        )}
        aria-label="Close"
        {...props}
      >

src/components/Modal/Modal.tsx:398

• Same stability concern for ModalFooter: data-slot is set but {...props} is spread after, so a consumer-provided data-slot can override it and break condensed-view targeting. Consider moving {...props} before data-slot (or stripping data-slot from props).

const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-slot="modal-footer"
      className={cn(
        'flex shrink-0 items-center justify-end gap-3',
        'border-border border-t px-6 py-4',
        className
      )}
      {...props}
    />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.