diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx
index 18fb4dc42..babb9d000 100644
--- a/packages/lib/src/layout/ApplicationLayout.tsx
+++ b/packages/lib/src/layout/ApplicationLayout.tsx
@@ -31,7 +31,7 @@ const BodyContainer = styled.div<{ hasSidenav?: boolean }>`
 
   @media (max-width: ${responsiveSizes.medium}rem) {
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: ${({ hasSidenav }) => (hasSidenav ? "auto 1fr" : "1fr")};
   }
 `;
 
diff --git a/packages/lib/src/sidenav/Sidenav.stories.tsx b/packages/lib/src/sidenav/Sidenav.stories.tsx
index 610a40fc3..c6c7b3292 100644
--- a/packages/lib/src/sidenav/Sidenav.stories.tsx
+++ b/packages/lib/src/sidenav/Sidenav.stories.tsx
@@ -563,6 +563,16 @@ export const Responsive: Story = {
   },
 };
 
+export const CollapsedResponsiveSidenav: Story = {
+  render: SidenavInLayout,
+  parameters: {
+    chromatic: { viewports: [540] },
+  },
+  globals: {
+    viewport: { value: "pixel", isRotated: false },
+  },
+};
+
 type Story = StoryObj<typeof DxcSidenav>;
 
 export const Chromatic: Story = {