From ad12704c218226b5d831939017867cc2d85c80b5 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Thu, 4 Dec 2025 11:50:19 -0500
Subject: [PATCH] [CL-871] responsive sidebar product switcher (#17780)

* only make switcher sticky when height is larger than 850

* use rem based value for media query

* add comment about why 53rem was chosen
---
 libs/components/src/navigation/side-nav.component.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/navigation/side-nav.component.html b/libs/components/src/navigation/side-nav.component.html
index d2e6aeab2b..0a0d4af3ad 100644
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -23,7 +23,11 @@
     (keydown)="handleKeyDown($event)"
   >
     <ng-content></ng-content>
-    <div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3">
+    <!-- 53rem = ~850px -->
+    <!-- This is a magic number. This number was selected by going to the UI and finding the number that felt the best to me and design. No real rhyme or reason :) -->
+    <div
+      class="[@media(min-height:53rem)]:tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3"
+    >
       <bit-nav-divider></bit-nav-divider>
       @if (data.open) {
         <ng-content select="[slot=footer]"></ng-content>