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

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;
+    display: none;
-    opacity: 0;
     /* 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);
 }

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_"