fix(components): fix date picker layout in submenu (#1793)

* fix(components): fix date picker layout in submenu

* add story

* changeset

* undo screenshot change 🤦‍♂️

Author: apucacao

.changeset/giant-spies-fry.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+fix date picker layout in submenus

packages/components/src/styles/Popover.module.css

@@ -36,16 +36,14 @@
 		stroke-width: 1px;
 	}
 
-	&[data-trigger='DialogTrigger'] {
-		padding: var(--lp-spacing-300);
-	}
-
-	&[data-trigger='ComboBoxDialog'] {
+	&[data-trigger='DialogTrigger'],
+	&[data-trigger='ComboBoxDialog'],
+	&[data-trigger='SubmenuTrigger'] {
 		padding: var(--lp-spacing-300);
 	}
 
 	&:is([data-trigger='DatePicker'], [data-trigger='DateRangePicker']) {
-		padding: var(--lp-spacing-600);
+		padding: var(--lp-spacing-300);
 	}
 
 	&[data-placement='top'] {

packages/components/stories/DatePicker.stories.tsx

@@ -16,6 +16,7 @@ import { Group } from '../src/Group';
 import { Heading } from '../src/Heading';
 import { IconButton } from '../src/IconButton';
 import { Label } from '../src/Label';
+import { Menu, MenuItem, MenuTrigger, SubmenuTrigger } from '../src/Menu';
 import { Popover } from '../src/Popover';
 
 const meta: Meta<typeof DatePicker> = {
@@ -139,3 +140,45 @@ export const InForms: Story = {
 		await expect(await within(body).findByRole('application'));
 	},
 };
+
+export const InSubmenu: Story = {
+	args: {
+		children: (
+			<MenuTrigger>
+				<Button>Select</Button>
+				<Popover>
+					<Menu>
+						<SubmenuTrigger>
+							<MenuItem id="calendar">Choose custom date</MenuItem>
+							<Popover>
+								<Dialog>
+									<Calendar>
+										<header>
+											<IconButton
+												slot="previous"
+												icon="chevron-left"
+												aria-label="previous"
+												size="small"
+												variant="minimal"
+											/>
+											<Heading />
+											<IconButton
+												slot="next"
+												icon="chevron-right"
+												aria-label="next"
+												size="small"
+												variant="minimal"
+											/>
+										</header>
+										<CalendarGrid>{(date) => <CalendarCell date={date} />}</CalendarGrid>
+									</Calendar>
+								</Dialog>
+							</Popover>
+						</SubmenuTrigger>
+					</Menu>
+				</Popover>
+			</MenuTrigger>
+		),
+		defaultValue: parseDate('2025-01-01'),
+	},
+};