fix(menu): add default value to inline-size in small screens (VIV-2006)…

… (#2078)

libs/components/src/lib/menu/README.md

@@ -269,6 +269,11 @@ Use the `--menu-max-inline-size` variable to set the menu's inline size.
 
 - Default: `max-content`
 
+<vwc-note connotation="information" icon="info-solid">
+<p>When setting a value to the <code>max-inline-size</code> - make sure the menu is OK in small resolutions as well. </p>
+<p>In mobile, the <code>max-inline-size</code> is <code>300px</code> by default, but can be changed with the css-variable. </p>
+</vwc-note>
+
 ```html preview 150px
 <style>
 	vwc-menu {

libs/components/src/lib/menu/menu.scss

@@ -15,9 +15,16 @@
 	gap: 8px;
 	inline-size: max-content;
 	max-block-size: var(#{variables.$menu-block-size}, 408px);
-	max-inline-size: var(#{variables.$menu-max-inline-size});
 	min-inline-size: var(#{variables.$menu-min-inline-size});
 	padding-block: 8px;
+
+	@media not all and (width >= 600px) {
+		max-inline-size: var(#{variables.$menu-max-inline-size}, 300px);
+	}
+
+	@media (width >= 600px) {
+		max-inline-size: var(#{variables.$menu-max-inline-size});
+	}
 }
 
 ::slotted(a) {

libs/components/src/lib/menu/ui.test.ts

@@ -46,6 +46,44 @@ async function testAbsolutStrategy({ page }: { page: Page }) {
 	);
 }
 
+async function testMobileInlineSize({ page }: { page: Page }) {
+	const template = `
+<style>
+			.wrapper {
+				width: 360px;
+				height: 400px;
+			}
+		</style>
+<div class="wrapper">
+ <vwc-menu open placement="bottom-start" >
+	<vwc-button slot="anchor" label="Menu" appearance="outlined"></vwc-button>
+  <vwc-menu-item text="Menu item 1 with long text that gets ellipsis"></vwc-menu-item>
+  <vwc-menu-item text="Menu item 2 with long text that gets ellipsis"></vwc-menu-item>
+  <vwc-menu-item text="Menu item 3 with long text that gets ellipsis"></vwc-menu-item>
+ </vwc-menu>
+</div>`;
+
+	page.setViewportSize({ width: 360, height: 400 });
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'snapshots/mobile-menu.png',
+		{ maxDiffPixelRatio: 0.01 }
+	);
+}
+
 test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 		<style>
@@ -89,3 +127,4 @@ test('should show the component', async ({ page }: { page: Page }) => {
 });
 
 test('menu with absolute strategy', testAbsolutStrategy);
+test('menu with max-inline-size in mobile', testMobileInlineSize);