fix: add fixed heights for date picker and table header (month and bu…

…ttons) (#26932)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.scss

@@ -1,4 +1,5 @@
 .LemonCalendar {
+    --lemon-calendar-month-height: 305px;
     --lemon-calendar-row-gap: 2px;
     --lemon-calendar-day-width: 40px;
     --lemon-calendar-today-radius: 2px;
@@ -7,6 +8,9 @@
     // Tricky: needs to match the equivalent height button from LemonButton.scss
     --lemon-calendar-time-button-height: 2.3125rem;
 
+    // Force height for month so when swtiching to longer months, the height doesn't change
+    height: var(--lemon-calendar-month-height);
+
     .LemonCalendar__month {
         width: 100%;
     }
@@ -23,6 +27,10 @@
     }
 
     .LemonCalendar__month tr {
+        &.LemonCalendar__month-header {
+            height: var(--lemon-calendar-time-button-height);
+        }
+
         .LemonButton {
             &.rounded-none {
                 border-radius: 0;

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendar.tsx

@@ -81,7 +81,7 @@ export const LemonCalendar = forwardRef(function LemonCalendar(
                 return (
                     <table className="LemonCalendar__month" key={month} data-attr="lemon-calendar-month">
                         <thead>
-                            <tr>
+                            <tr className="LemonCalendar__month-header">
                                 <th className="relative">
                                     {showLeftMonth && (
                                         <LemonButton

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx

@@ -68,3 +68,6 @@ Minute.args = { granularity: 'minute' }
 
 export const WithTimeToggle: Story = BasicTemplate.bind({})
 WithTimeToggle.args = { showTimeToggle: true }
+
+export const WithTimeToggleAndMultipleMonths: Story = BasicTemplate.bind({})
+WithTimeToggleAndMultipleMonths.args = { showTimeToggle: true, months: 3 }