fix(ui5-date-range-picker): remove only portrait mode on calendars when two months are shown

packages/main/src/Calendar.ts

@@ -66,7 +66,6 @@ import {
 	CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 import type { YearRangePickerChangeEventDetail } from "./YearRangePicker.js";
-import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 
 const PHONE_MODE_BREAKPOINT = 640; // px
@@ -779,10 +778,6 @@ class Calendar extends CalendarPart {
 		};
 	}
 
-	get _isCompactMode() {
-		return getEffectiveContentDensity(this) === "compact";
-	}
-
 	get _monthsToShow() {
 		const monthsToShow = this._showTwoMonths && !isPhone() ? 2 : 1;
 		return monthsToShow;

packages/main/src/CalendarHeaderTemplate.tsx

@@ -147,9 +147,8 @@ function renderMiddleButtons(
 }
 
 function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
-	// In portrait or compact mode, show next button only on first calendar
 	// In landscape mode, show next button only on last calendar
-	const isVertical = this._portraitView || this._isCompactMode;
+	const isVertical = this._portraitView;
 	const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);
 	const shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast);
 

packages/main/src/CalendarTemplate.tsx

@@ -8,8 +8,8 @@ import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 export default function CalendarTemplate(this: Calendar) {
 	const showMultipleMonths = this._monthsToShow > 1 && !this._isDayPickerHidden;
-	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView && !this._isCompactMode;
-	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && (this._portraitView || this._isCompactMode);
+	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView;
+	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && this._portraitView;
 
 	return (
 		<>

packages/main/src/themes/Calendar.css

@@ -2,6 +2,12 @@
     display: inline-block;
 }
 
+:host([_show-two-months]) {
+	overflow: auto;
+	max-height: calc(100vh - 3rem);
+}
+
+
 .ui5-cal-root .ui5-calheader {
     display: block;
     height: var(--_ui5_calendar_header_height);

packages/main/src/themes/base/sizes-parameters.css

@@ -182,12 +182,11 @@
 		--_ui5_calendar_header_height: 2rem;
 		--_ui5_calendar_header_arrow_button_width: 2rem;
 		--_ui5_calendar_header_padding: 0;
-		--_ui5_calendar_multiple_layout: column;
 		--_ui5_calendar_multiple_gap: 0.5rem;
-		--_ui5_calendar_multiple_width: var(--_ui5_calendar_width);
+		--_ui5_calendar_multiple_width: calc((var(--_ui5_calendar_width) * 2) + (var(--_ui5_calendar_left_right_padding) * 2));;
 		--_ui5_calendar_overlay_top: 54%;
 		--_ui5_calendar_overlay_width: 100%;
-		--_ui5_calendar_multiple_months_height: calc(2 * var(--_ui5_calendar_height));
+		--_ui5_calendar_multiple_months_height: var(--_ui5_calendar_height);
 
 		/* Calendar Legend */
 		--_ui5-calendar-legend-root-padding: 0.5rem;