From 4f9a0321b54055bc198c838d2089684ff8623d7f Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 29 Mar 2026 18:22:16 +0530
Subject: [PATCH] Collapsible Room List - Prevent any interaction with the
 separator when the panel is expanded (#32910)

* Use display:none to hide separator

Instead of using zero width and zero opacity. This will prevent any
interaction with the separator.

* Update snapshot
---
 .../src/resize/separator/SeparatorView.module.css         | 8 +++-----
 .../separator/__snapshots__/SeparatorView.test.tsx.snap   | 4 ----
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/shared-components/src/resize/separator/SeparatorView.module.css b/packages/shared-components/src/resize/separator/SeparatorView.module.css
index a6cd8d5bf1..17eaae0fce 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.module.css
+++ b/packages/shared-components/src/resize/separator/SeparatorView.module.css
@@ -6,11 +6,8 @@
  */
 
 .separator {
-    display: flex;
-    align-items: center;
     /* Hide the separator by default */
-    width: 0px;
-    opacity: 0;
+    display: none;
     /* Necessary to avoid weird focus outlines (doubled on one side, absent on one side etc...) */
     outline-offset: -2px;
 }
@@ -22,7 +19,8 @@
 
 .visible {
     /* Show the separator when the left panel is collapsed */
-    opacity: 100%;
+    display: flex;
+    align-items: center;
     width: 12px;
     border-right: 1px solid var(--cpd-color-bg-subtle-primary);
 }
diff --git a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
index 85a950b5f8..87da66003c 100644
--- a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
@@ -188,12 +188,8 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
         </div>
       </div>
       <div
-        aria-controls="_r_9_"
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
-        aria-valuemax="96.618"
-        aria-valuemin="0"
-        aria-valuenow="48.309"
         class="separator Separator"
         data-separator="inactive"
         data-testid="_r_a_"