From 06d263f04a254fcf433d60565eeb748b53cde91a Mon Sep 17 00:00:00 2001
From: Mark Youssef <141061617+mark-youssef-bitwarden@users.noreply.github.com>
Date: Tue, 23 Sep 2025 11:26:18 -0700
Subject: [PATCH] [CL-794] Fix cutoff content on smaller screens (#15644)

* Fix cutoff content on smaller screens

* Fix overlay issue by moving outside main
---
 .../src/layout/layout.component.html          | 38 +++++++++----------
 .../src/navigation/side-nav.component.html    |  2 +-
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/libs/components/src/layout/layout.component.html b/libs/components/src/layout/layout.component.html
index a4ee3f0d8a2..35c6f04911c 100644
--- a/libs/components/src/layout/layout.component.html
+++ b/libs/components/src/layout/layout.component.html
@@ -23,31 +23,27 @@
       [id]="mainContentId"
       tabindex="-1"
       bitScrollLayoutHost
-      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 md:tw-ms-0 tw-ms-16"
+      class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6"
     >
       <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
       <ng-content></ng-content>
-
-      <!-- overlay backdrop for side-nav -->
-      @if (
-        {
-          open: sideNavService.open$ | async,
-        };
-        as data
-      ) {
-        <div
-          class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
-          [ngClass]="[data.open ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0']"
-        >
-          @if (data.open) {
-            <div
-              (click)="sideNavService.toggle()"
-              class="tw-pointer-events-auto tw-size-full"
-            ></div>
-          }
-        </div>
-      }
     </main>
+    <!-- overlay backdrop for side-nav -->
+    @if (
+      {
+        open: sideNavService.open$ | async,
+      };
+      as data
+    ) {
+      <div
+        class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
+        [ngClass]="[data.open ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0']"
+      >
+        @if (data.open) {
+          <div (click)="sideNavService.toggle()" class="tw-pointer-events-auto tw-size-full"></div>
+        }
+      </div>
+    }
   </div>
   <div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-screen md:tw-w-auto">
     <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
diff --git a/libs/components/src/navigation/side-nav.component.html b/libs/components/src/navigation/side-nav.component.html
index 1fdd40b1588..d2e6aeab2bb 100644
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -7,7 +7,7 @@
 ) {
   <nav
     id="bit-side-nav"
-    class="tw-fixed md:tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
+    class="tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-screen tw-flex-col tw-overscroll-none tw-overflow-auto tw-bg-background-alt3 tw-outline-none"
     [ngClass]="{ 'tw-w-60': data.open }"
     [ngStyle]="
       variant() === 'secondary' && {