fix(DatePicker): prevent scrunching of predefined lists (#895)

Author: hoorayimhelping

.changeset/chatty-terms-remain.md

@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Explicitly sets box-sizing: content-box on predefined date picker lists. This prevents them for being pushed to too small a size when the app they're in uses a different box sizing model"

src/components/DatePicker/Common.tsx

@@ -26,6 +26,7 @@ import {
   weekdayFormatter,
 } from './utils';
 import { getMonthNames, DAYS, MONTHS, YEARS, DAYS_IN_WEEK } from '@/utils/date';
+import { Dropdown } from '@/components/Dropdown';
 
 const explicitWidth = '250px';
 const TXT_ON_MONTH_SELECT = 'Month';
@@ -499,6 +500,11 @@ export const DateTableCell = styled.td<{
   }
 `;
 
+export const StyledDropdownItem = styled(Dropdown.Item)`
+  box-sizing: content-box;
+  min-height: 24px;
+`;
+
 export type Body = ReturnType<typeof useCalendar>['body'];
 
 interface CalendarRendererProps {

src/components/DatePicker/DateRangePicker.tsx

@@ -12,7 +12,13 @@ import {
 import { isSameDate, UseCalendarOptions } from '@h6s/calendar';
 import { styled } from 'styled-components';
 import { Dropdown } from '@/components/Dropdown';
-import { Body, CalendarRenderer, DateRangePickerInput, DateTableCell } from './Common';
+import {
+  Body,
+  CalendarRenderer,
+  DateRangePickerInput,
+  DateTableCell,
+  StyledDropdownItem,
+} from './Common';
 import { Container } from '@/components/Container';
 import { Panel } from '@/components/Panel';
 import { Icon } from '@/components/Icon';
@@ -55,10 +61,6 @@ const StyledCalendarRenderer = styled(CalendarRenderer)`
   min-height: 221px;
 `;
 
-const StyledDropdownItem = styled(Dropdown.Item)`
-  min-height: 24px;
-`;
-
 // max-height of 210px allows the scrollable container to be a reasonble height that matches the calendar
 const ScrollableContainer = styled(Container)`
   max-height: 210px;

src/components/DatePicker/DateTimeRangePicker.tsx

@@ -17,6 +17,7 @@ import {
   CalendarRenderer,
   DateTimeRangePickerInput,
   DateTableCell,
+  StyledDropdownItem,
 } from './Common';
 import { Container } from '../Container/Container';
 import { Panel } from '../Panel/Panel';
@@ -68,10 +69,6 @@ const StyledTriggerList = styled(Tabs.TriggersList)`
   justify-content: space-around;
 `;
 
-const StyledDropdownItem = styled(Dropdown.Item)`
-  min-height: 24px;
-`;
-
 // max-height of 210px allows the scrollable container to be a reasonble height that matches the calendar
 const ScrollableContainer = styled(Container)`
   max-height: 210px;