fix(Select): align responsive popover max-width with ComboBox/Input pattern

Use the same max-width pattern as ComboBox and Input:
- If the component width in rem exceeds 40, cap max-width at the component's
  own pixel width (preventing the picker from growing wider than the control)
- Otherwise fall back to the 40rem default cap

This replaces the previous flat 100rem value and matches the established
pattern used in ComboBox.ts and Input.ts.

Updated Cypress tests to reflect the dynamic max-width logic:
- Narrow select (200px) -> expects max-width: 40rem
- Wide select (1000px) -> expects max-width in px matching the component width

Author: EdrilanBerisha

packages/main/cypress/specs/Select.cy.tsx

@@ -1971,11 +1971,11 @@ describe("Select - active/down state", () => {
 });
 
 describe("Select - popover max-width", () => {
-	it("applies default max-width of 100rem to the responsive popover when an option has very long text", () => {
+	it("applies a max-width of 40rem to the responsive popover when the select is narrow and an option has very long text", () => {
 		const longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ".repeat(5);
 
 		cy.mount(
-			<Select>
+			<Select style="width: 200px;">
 				<Option value="desktop" icon="laptop">{longText}</Option>
 				<Option value="short">Short option</Option>
 			</Select>
@@ -1985,32 +1985,33 @@ describe("Select - popover max-width", () => {
 		cy.get("[ui5-select]").realClick();
 		cy.get("[ui5-select]").should("have.attr", "opened");
 
-		// The responsive popover should have max-width capped at 100rem
+		// When the select offsetWidth / remSize <= 40, max-width should be 40rem
 		cy.get("[ui5-select]")
 			.shadow()
 			.find("[ui5-responsive-popover]")
 			.should($el => {
 				const maxWidth = $el[0].style.maxWidth;
-				expect(maxWidth).to.equal("100rem");
+				expect(maxWidth).to.equal("40rem");
 			});
 	});
 
-	it("ensures the popover width does not exceed 100rem style property by default", () => {
+	it("caps max-width to the component's own width in pixels when the select is wider than 40rem", () => {
 		cy.mount(
-			<Select>
+			<Select style="width: 1000px;">
 				<Option value="short">Short</Option>
 			</Select>
 		);
 
 		cy.get("[ui5-select]").realClick();
 		cy.get("[ui5-select]").should("have.attr", "opened");
 
+		// When offsetWidth / remSize > 40, max-width should be the component's width in px
 		cy.get("[ui5-select]")
 			.shadow()
 			.find("[ui5-responsive-popover]")
-			.should($el => {
-				const maxWidth = $el[0].style.maxWidth;
-				expect(maxWidth).to.equal("100rem");
+			.then($popover => {
+				const maxWidth = $popover[0].style.maxWidth;
+				expect(maxWidth).to.match(/^\d+px$/);
 			});
 	});
 });

packages/main/src/Select.ts

@@ -1094,6 +1094,7 @@ class Select extends UI5Element implements IFormInputElement {
 	}
 
 	get styles() {
+		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverHeader: {
 				"display": "block",
@@ -1105,7 +1106,7 @@ class Select extends UI5Element implements IFormInputElement {
 			},
 			responsivePopover: {
 				"min-width": `${this.offsetWidth}px`,
-				"max-width": "100rem",
+				"max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
 			},
 		};
 	}