fix: prevent mobile sidebar overlays from shifting chat content

AGENTS.md

@@ -72,6 +72,7 @@ yarn lint-fix
 #### Commit / PR conventions
 
 - Never commit directly to main, always create a feature branch.
+- Never commit unless explicitly requested.
 - Keep PRs small and focused; include tests.
 - Follow the project’s “zero warnings” policy—fix new warnings and avoid introducing any.
 - For UI changes, attach comparison screenshots (before/after) where feasible.

src/components/ChannelList/styling/ChannelList.scss

@@ -13,6 +13,21 @@
   /* Box shadow applied to the component */
   --str-chat__channel-list-box-shadow: none;
 
+  /* Animation duration used when the component enters or exits */
+  --str-chat__channel-list-transition-duration: 180ms;
+
+  /* Animation easing used when the component enters or exits */
+  --str-chat__channel-list-transition-easing: ease;
+
+  /* Horizontal offset used by the sidebar enter/exit transition */
+  --str-chat__channel-list-transition-offset: 8px;
+
+  /* Default desktop width of the channel list. Override to match custom layouts. */
+  --str-chat__channel-list-width: 30%;
+
+  /* Default mobile overlay width of the channel list. Override to match custom layouts. */
+  --str-chat__channel-list-mobile-width: 100%;
+
   /* Top border of the component */
   --str-chat__channel-list-border-block-start: none;
 
@@ -84,8 +99,27 @@
 
 .str-chat__channel-list {
   display: flex;
+  flex: 0 0 var(--str-chat__channel-list-width);
   flex-direction: column;
   height: 100%;
+  max-width: 100%;
+  min-width: 280px;
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    flex-basis var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing),
+    min-width var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing),
+    width var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing),
+    max-width var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing),
+    opacity var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing),
+    transform var(--str-chat__channel-list-transition-duration)
+      var(--str-chat__channel-list-transition-easing);
+  width: var(--str-chat__channel-list-width);
   @include utils.scrollable-y;
   @include utils.component-layer-overrides('channel-list');
 
@@ -141,28 +175,62 @@
 
   /* Mobile: hide when nav closed; when open show as overlay. */
   @media (max-width: 767px) {
-    display: none;
+    box-shadow: var(--str-chat__channel-list-box-shadow);
+    flex-basis: auto;
+    inset-inline-start: 0;
+    max-width: 100%;
+    min-width: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset)));
+    visibility: hidden;
+    width: var(--str-chat__channel-list-mobile-width);
+    z-index: 1;
+    transition:
+      transform var(--str-chat__channel-list-transition-duration)
+        var(--str-chat__channel-list-transition-easing),
+      visibility 0s linear var(--str-chat__channel-list-transition-duration);
+
+    .str-chat__chat-view & {
+      inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
+      width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
+    }
 
     &.str-chat__channel-list--open {
-      display: flex;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      z-index: 1;
-      min-width: 280px;
-      max-width: 100%;
-      box-shadow: var(--str-chat__channel-list-box-shadow);
+      pointer-events: auto;
+      transform: translateX(0);
+      transition-delay: 0s, 0s;
+      visibility: visible;
     }
   }
 
   /* Desktop (≥768px): collapse when nav closed so main content uses space. */
   @media (min-width: 768px) {
+    &.str-chat__channel-list--open {
+      flex-basis: var(--str-chat__channel-list-width);
+      max-width: 100%;
+      min-width: 280px;
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateX(0);
+      width: var(--str-chat__channel-list-width);
+    }
+
     &:not(.str-chat__channel-list--open) {
       flex: 0 0 0;
       width: 0;
       min-width: 0;
       max-width: 0;
+      opacity: 0;
       overflow: hidden;
+      pointer-events: none;
+      transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset)));
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }

src/components/ChannelList/styling/ChannelListHeader.scss

@@ -1,8 +1,14 @@
 .str-chat__channel-list__header {
   display: flex;
   align-items: center;
+  opacity: 1;
   padding: var(--spacing-md);
-  // height: var(--str-chat__channel-header-height);
+  transform: translateX(0);
+  transition:
+    opacity var(--str-chat__channel-list-transition-duration, 180ms)
+      var(--str-chat__channel-list-transition-easing, ease),
+    transform var(--str-chat__channel-list-transition-duration, 180ms)
+      var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 
   .str-chat__channel-list__header__title {
@@ -12,11 +18,23 @@
   }
 
   &.str-chat__channel-list__header--sidebar-collapsed {
-    flex: 0 0 0;
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    overflow: hidden;
-    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(
+      calc(0px - var(--str-chat__channel-list-transition-offset, 8px))
+    );
+  }
+
+  @media (max-width: 767px) {
+    transition: none;
+
+    &.str-chat__channel-list__header--sidebar-collapsed {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
   }
 }

src/components/ChatView/styling/ChatView.scss

@@ -1,6 +1,12 @@
 .str-chat {
   --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
   --str-chat-selector-border-color: var(--border-core-subtle);
+  --str-chat__chat-view-selector-transition-duration: 180ms;
+  --str-chat__chat-view-selector-transition-easing: ease;
+  --str-chat__chat-view-selector-transition-offset: 8px;
+  --str-chat__chat-view-selector-mobile-width: calc(
+    var(--spacing-md) + var(--spacing-md) + var(--spacing-xs) + var(--spacing-xs) + 20px
+  );
 
   --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
   --str-chat-selector-button-color-selected: var(--str-chat__text-color);
@@ -12,6 +18,7 @@
   display: flex;
   width: 100%;
   height: 100%;
+  position: relative;
 
   .str-chat__chat-view__selector {
     display: flex;
@@ -24,11 +31,28 @@
     /* Mobile: hide when nav closed, show when nav open. */
     @media (max-width: 767px) {
       &.str-chat__chat-view__selector--nav-closed {
-        display: none;
+        pointer-events: none;
+        transform: translateX(
+          calc(0px - var(--str-chat__chat-view-selector-transition-offset))
+        );
+        visibility: hidden;
       }
 
+      inset-block: 0;
+      inset-inline-start: 0;
+      position: absolute;
+      transition:
+        transform var(--str-chat__chat-view-selector-transition-duration)
+          var(--str-chat__chat-view-selector-transition-easing),
+        visibility 0s linear var(--str-chat__chat-view-selector-transition-duration);
+      width: var(--str-chat__chat-view-selector-mobile-width);
+      z-index: 2;
+
       &.str-chat__chat-view__selector--nav-open {
-        display: flex;
+        pointer-events: auto;
+        transform: translateX(0);
+        transition-delay: 0s, 0s;
+        visibility: visible;
       }
     }
 
@@ -111,10 +135,14 @@
   .str-chat__chat-view__channels {
     display: flex;
     flex-grow: 1;
+    min-width: 0;
+    position: relative;
   }
 
   .str-chat__chat-view__threads {
     display: flex;
     flex-grow: 1;
+    min-width: 0;
+    position: relative;
   }
 }

src/components/Threads/ThreadList/styling/ThreadList.scss

@@ -19,17 +19,33 @@
 
   /* Mobile: hide when nav closed; when open show as overlay. */
   @media (max-width: 767px) {
-    display: none;
+    inset-inline-start: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transform: translateX(
+      calc(0px - var(--str-chat__channel-list-transition-offset, 8px))
+    );
+    transition:
+      transform var(--str-chat__channel-list-transition-duration, 180ms)
+        var(--str-chat__channel-list-transition-easing, ease),
+      visibility 0s linear var(--str-chat__channel-list-transition-duration, 180ms);
+    visibility: hidden;
+    width: 100%;
+    z-index: 1;
 
     &.str-chat__thread-list-container--open {
-      display: flex;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      z-index: 1;
-      min-width: 280px;
-      max-width: 100%;
       box-shadow: var(--str-chat__thread-list-box-shadow);
+      pointer-events: auto;
+      transform: translateX(0);
+      transition-delay: 0s, 0s;
+      visibility: visible;
+
+      .str-chat__chat-view & {
+        inset-inline-start: var(--str-chat__chat-view-selector-mobile-width, 0px);
+        width: calc(100% - var(--str-chat__chat-view-selector-mobile-width, 0px));
+      }
     }
   }
 

src/components/Threads/ThreadList/styling/ThreadListHeader.scss

@@ -1,8 +1,15 @@
 .str-chat__thread-list__header {
   display: flex;
   align-items: center;
+  opacity: 1;
   padding: var(--spacing-md);
   height: var(--str-chat__channel-header-height);
+  transform: translateX(0);
+  transition:
+    opacity var(--str-chat__channel-list-transition-duration, 180ms)
+      var(--str-chat__channel-list-transition-easing, ease),
+    transform var(--str-chat__channel-list-transition-duration, 180ms)
+      var(--str-chat__channel-list-transition-easing, ease);
   width: 100%;
 
   .str-chat__thread-list__header__title {
@@ -12,15 +19,25 @@
   }
 
   &.str-chat__thread-list__header--sidebar-collapsed {
-    flex: 0 0 0;
-    width: 0;
-    min-width: 0;
-    max-width: 0;
-    overflow: hidden;
-    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(calc(0px - var(--str-chat__channel-list-transition-offset, 8px)));
 
     .str-chat__header-sidebar-toggle {
       // Compact styling when sidebar collapsed
     }
   }
+
+  @media (max-width: 767px) {
+    transition: none;
+
+    &.str-chat__thread-list__header--sidebar-collapsed {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }