From bd5edfc2993c93bd77f42dcd30d38b57eeb50481 Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Thu, 25 Sep 2025 21:25:35 +0530
Subject: [PATCH] feat: Resizable contextualbars out of feature preview
 (#37022)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>
---
 .changeset/happy-carpets-draw.md              |    7 +
 .../__snapshots__/UserInfo.spec.tsx.snap      | 1614 +++++++++--------
 .../AppLogsFilterContextualBar.stories.tsx    |    2 +-
 .../AppLogsFilterContextualBar.spec.tsx.snap  |  695 +++----
 .../CannedResponseList.stories.tsx            |    9 +-
 .../CannedResponseList.spec.tsx.snap          |   60 +-
 .../InviteUsers/InviteUsers.stories.tsx       |    4 +-
 .../__snapshots__/InviteUsers.spec.tsx.snap   | 1122 +++++++-----
 .../__snapshots__/RoomMembers.spec.tsx.snap   | 1016 ++++++-----
 .../resizable-contextual-bar.png              |  Bin 4776 -> 0 bytes
 apps/meteor/tests/e2e/feature-preview.spec.ts |    1 -
 .../e2e/page-objects/omnichannel-units.ts     |    4 +-
 packages/i18n/src/locales/en.i18n.json        |    2 -
 packages/i18n/src/locales/nb.i18n.json        |    2 -
 packages/i18n/src/locales/nn.i18n.json        |    2 -
 packages/i18n/src/locales/pt-BR.i18n.json     |    2 -
 packages/i18n/src/locales/sv.i18n.json        |    2 -
 .../Contextualbar/ContextualbarDialog.tsx     |   14 +-
 .../src/hooks/useFeaturePreviewList.ts        |   11 +-
 .../CallHistoryContextualbar.spec.tsx.snap    |  880 +++++----
 20 files changed, 3045 insertions(+), 2404 deletions(-)
 create mode 100644 .changeset/happy-carpets-draw.md
 delete mode 100644 apps/meteor/public/images/featurePreview/resizable-contextual-bar.png

diff --git a/.changeset/happy-carpets-draw.md b/.changeset/happy-carpets-draw.md
new file mode 100644
index 00000000000..f59a1a06c7b
--- /dev/null
+++ b/.changeset/happy-carpets-draw.md
@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': major
+'@rocket.chat/i18n': major
+'@rocket.chat/meteor': major
+---
+
+Promotes Resizable Contextualbars from preview state to stable.
diff --git a/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
index ad214a8b86b..e051c389655 100644
--- a/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
+++ b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
@@ -8,250 +8,292 @@ exports[`renders Default without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-label="User Info"
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-7xswp3"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
+        aria-label="User Info"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-183xqln"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-13kmycs"
-                >
-                  <figure
-                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
-                  >
-                    <img
-                      alt=""
-                      aria-hidden="true"
-                      class="rcx-avatar__element rcx-avatar__element--x332"
-                      data-username="guilherme.gazzo"
-                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
-                      title="guilherme.gazzo"
-                    />
-                  </figure>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-902tla"
-                  >
-                    <svg
-                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
-                      fill="none"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        class="rcx-status-bullet rcx-status-bullet--offline"
-                        cx="6"
-                        cy="6"
-                        r="5"
-                        stroke-width="2"
-                      />
-                    </svg>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-dredvr"
-                      title="guilherme.gazzo"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-13kmycs"
                   >
-                    <div
-                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    <figure
+                      class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
                     >
                       <img
-                        alt="🛴"
-                        class="emojione"
-                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
-                        title=":scooter:"
+                        alt=""
+                        aria-hidden="true"
+                        class="rcx-avatar__element rcx-avatar__element--x332"
+                        data-username="guilherme.gazzo"
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                        title="guilherme.gazzo"
                       />
-                       currently working on User Card
-                    </div>
+                    </figure>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-902tla"
                     >
-                      Nickname
+                      <svg
+                        class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                        fill="none"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          class="rcx-status-bullet rcx-status-bullet--offline"
+                          cx="6"
+                          cy="6"
+                          r="5"
+                          stroke-width="2"
+                        />
+                      </svg>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-dredvr"
+                        title="guilherme.gazzo"
+                      >
+                        guilherme.gazzo
+                      </div>
                     </div>
                     <div
                       class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
                     >
-                      gazzo
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        <img
+                          alt="🛴"
+                          class="emojione"
+                          src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                          title=":scooter:"
+                        />
+                         currently working on User Card
+                      </div>
                     </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Roles
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Nickname
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        gazzo
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <span
-                        class="rcx-box rcx-box--full rcx-css-1sut473"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        Roles
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      >
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-1sut473"
                         >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              admin
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                admin
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
-                        >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              user
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                user
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Username
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
-                      data-qa="UserInfoUserName"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Bio
+                          </div>
+                        </span>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Username
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                        data-qa="UserInfoUserName"
                       >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        guilherme.gazzo
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Email
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Bio
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <a
-                        class="rcx-box rcx-box--full rcx-css-1te28na"
-                        href="mailto:rocketchat@rocket.chat"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        rocketchat@rocket.chat
-                      </a>
-                      <span
-                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                        Email
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
                       >
+                        <a
+                          class="rcx-box rcx-box--full rcx-css-1te28na"
+                          href="mailto:rocketchat@rocket.chat"
+                        >
+                          rocketchat@rocket.chat
+                        </a>
                         <span
-                          class="rcx-tag__inner"
+                          class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
                         >
-                          Not_verified
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Not_verified
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
+        </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
+      </div>
     </div>
     <span
       data-focus-scope-end="true"
@@ -269,269 +311,311 @@ exports[`renders InvitedUser without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-label="User Info"
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-7xswp3"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
+        aria-label="User Info"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-183xqln"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-13kmycs"
-                >
-                  <figure
-                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
-                  >
-                    <img
-                      alt=""
-                      aria-hidden="true"
-                      class="rcx-avatar__element rcx-avatar__element--x332"
-                      data-username="guilherme.gazzo"
-                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
-                      title="guilherme.gazzo"
-                    />
-                  </figure>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-902tla"
-                  >
-                    <svg
-                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
-                      fill="none"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        class="rcx-status-bullet rcx-status-bullet--offline"
-                        cx="6"
-                        cy="6"
-                        r="5"
-                        stroke-width="2"
-                      />
-                    </svg>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-dredvr"
-                      title="guilherme.gazzo"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-13kmycs"
                   >
-                    <div
-                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    <figure
+                      class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
                     >
                       <img
-                        alt="🛴"
-                        class="emojione"
-                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
-                        title=":scooter:"
+                        alt=""
+                        aria-hidden="true"
+                        class="rcx-avatar__element rcx-avatar__element--x332"
+                        data-username="guilherme.gazzo"
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                        title="guilherme.gazzo"
                       />
-                       currently working on User Card
-                    </div>
+                    </figure>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-902tla"
                     >
-                      Nickname
+                      <svg
+                        class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                        fill="none"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          class="rcx-status-bullet rcx-status-bullet--offline"
+                          cx="6"
+                          cy="6"
+                          r="5"
+                          stroke-width="2"
+                        />
+                      </svg>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-dredvr"
+                        title="guilherme.gazzo"
+                      >
+                        guilherme.gazzo
+                      </div>
                     </div>
                     <div
                       class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
                     >
-                      gazzo
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        <img
+                          alt="🛴"
+                          class="emojione"
+                          src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                          title=":scooter:"
+                        />
+                         currently working on User Card
+                      </div>
                     </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Roles
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Nickname
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        gazzo
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <span
-                        class="rcx-box rcx-box--full rcx-css-1sut473"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        Roles
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      >
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-1sut473"
                         >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              admin
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                admin
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
-                        >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              user
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                user
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Username
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
-                      data-qa="UserInfoUserName"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Bio
+                          </div>
+                        </span>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        Username
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                        data-qa="UserInfoUserName"
+                      >
+                        guilherme.gazzo
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Email
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Bio
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <a
-                        class="rcx-box rcx-box--full rcx-css-1te28na"
-                        href="mailto:rocketchat@rocket.chat"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        rocketchat@rocket.chat
-                      </a>
-                      <span
-                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                        Email
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
                       >
+                        <a
+                          class="rcx-box rcx-box--full rcx-css-1te28na"
+                          href="mailto:rocketchat@rocket.chat"
+                        >
+                          rocketchat@rocket.chat
+                        </a>
                         <span
-                          class="rcx-tag__inner"
+                          class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
                         >
-                          Not_verified
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Not_verified
+                          </span>
                         </span>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Invitation_date
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      January 1, 2025
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Invitation_date
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        January 1, 2025
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <span
-      data-focus-scope-end="true"
-      hidden=""
-    />
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
+        </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
+      </div>
+    </div>
+    <span
+      data-focus-scope-end="true"
+      hidden=""
+    />
   </div>
 </body>
 `;
@@ -544,310 +628,352 @@ exports[`renders WithABACAttributes without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-label="User Info"
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-7xswp3"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
+        aria-label="User Info"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-183xqln"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-13kmycs"
-                >
-                  <figure
-                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
-                  >
-                    <img
-                      alt=""
-                      aria-hidden="true"
-                      class="rcx-avatar__element rcx-avatar__element--x332"
-                      data-username="guilherme.gazzo"
-                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
-                      title="guilherme.gazzo"
-                    />
-                  </figure>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-902tla"
-                  >
-                    <svg
-                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
-                      fill="none"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        class="rcx-status-bullet rcx-status-bullet--offline"
-                        cx="6"
-                        cy="6"
-                        r="5"
-                        stroke-width="2"
-                      />
-                    </svg>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-dredvr"
-                      title="guilherme.gazzo"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-13kmycs"
                   >
-                    <div
-                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    <figure
+                      class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
                     >
                       <img
-                        alt="🛴"
-                        class="emojione"
-                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
-                        title=":scooter:"
+                        alt=""
+                        aria-hidden="true"
+                        class="rcx-avatar__element rcx-avatar__element--x332"
+                        data-username="guilherme.gazzo"
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                        title="guilherme.gazzo"
                       />
-                       currently working on User Card
-                    </div>
+                    </figure>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-902tla"
                     >
-                      Nickname
+                      <svg
+                        class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                        fill="none"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          class="rcx-status-bullet rcx-status-bullet--offline"
+                          cx="6"
+                          cy="6"
+                          r="5"
+                          stroke-width="2"
+                        />
+                      </svg>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-dredvr"
+                        title="guilherme.gazzo"
+                      >
+                        guilherme.gazzo
+                      </div>
                     </div>
                     <div
                       class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
                     >
-                      gazzo
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        <img
+                          alt="🛴"
+                          class="emojione"
+                          src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                          title=":scooter:"
+                        />
+                         currently working on User Card
+                      </div>
                     </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Roles
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Nickname
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        gazzo
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <span
-                        class="rcx-box rcx-box--full rcx-css-1sut473"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        Roles
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      >
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-1sut473"
                         >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              admin
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                admin
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
-                        >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              user
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                user
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Username
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
-                      data-qa="UserInfoUserName"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Bio
+                          </div>
+                        </span>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        Username
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                        data-qa="UserInfoUserName"
+                      >
+                        guilherme.gazzo
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Email
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Bio
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <a
-                        class="rcx-box rcx-box--full rcx-css-1te28na"
-                        href="mailto:rocketchat@rocket.chat"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        rocketchat@rocket.chat
-                      </a>
-                      <span
-                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                        Email
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
                       >
+                        <a
+                          class="rcx-box rcx-box--full rcx-css-1te28na"
+                          href="mailto:rocketchat@rocket.chat"
+                        >
+                          rocketchat@rocket.chat
+                        </a>
                         <span
-                          class="rcx-tag__inner"
+                          class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
                         >
-                          Not_verified
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Not_verified
+                          </span>
                         </span>
-                      </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      ABAC_Attributes
-                      <i
-                        aria-hidden="true"
-                        class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-ffrv0l"
-                        title="ABAC_Attributes_description"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        
-                      </i>
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
-                    >
+                        ABAC_Attributes
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-ffrv0l"
+                          title="ABAC_Attributes_description"
+                        >
+                          
+                        </i>
+                      </div>
                       <div
-                        class="rcx-box rcx-box--full rcx-css-iitt21"
+                        class="rcx-box rcx-box--full rcx-css-9vcs0o"
                       >
-                        <span
-                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-iitt21"
                         >
                           <span
-                            class="rcx-tag__inner"
+                            class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
                           >
-                            Top Secret
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              Top Secret
+                            </span>
                           </span>
-                        </span>
-                        <span
-                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
-                        >
                           <span
-                            class="rcx-tag__inner"
+                            class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
                           >
-                            Confidential
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              Confidential
+                            </span>
                           </span>
-                        </span>
-                        <span
-                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
-                        >
                           <span
-                            class="rcx-tag__inner"
+                            class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
                           >
-                            Top Secret
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              Top Secret
+                            </span>
                           </span>
-                        </span>
-                        <span
-                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
-                        >
                           <span
-                            class="rcx-tag__inner"
+                            class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
                           >
-                            Confidential
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              Confidential
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
+        </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
+      </div>
     </div>
     <span
       data-focus-scope-end="true"
@@ -865,264 +991,306 @@ exports[`renders WithVoiceCallExtension without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-label="User Info"
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-7xswp3"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
+        aria-label="User Info"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-183xqln"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-13kmycs"
-                >
-                  <figure
-                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
-                  >
-                    <img
-                      alt=""
-                      aria-hidden="true"
-                      class="rcx-avatar__element rcx-avatar__element--x332"
-                      data-username="guilherme.gazzo"
-                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
-                      title="guilherme.gazzo"
-                    />
-                  </figure>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-902tla"
+                    class="rcx-box rcx-box--full rcx-css-13kmycs"
                   >
-                    <svg
-                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
-                      fill="none"
-                      height="12"
-                      viewBox="0 0 12 12"
-                      width="12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <circle
-                        class="rcx-status-bullet rcx-status-bullet--offline"
-                        cx="6"
-                        cy="6"
-                        r="5"
-                        stroke-width="2"
-                      />
-                    </svg>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-dredvr"
-                      title="guilherme.gazzo"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    <figure
+                      class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
                     >
                       <img
-                        alt="🛴"
-                        class="emojione"
-                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
-                        title=":scooter:"
+                        alt=""
+                        aria-hidden="true"
+                        class="rcx-avatar__element rcx-avatar__element--x332"
+                        data-username="guilherme.gazzo"
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                        title="guilherme.gazzo"
                       />
-                       currently working on User Card
-                    </div>
+                    </figure>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-902tla"
                     >
-                      Nickname
+                      <svg
+                        class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                        fill="none"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        width="12"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          class="rcx-status-bullet rcx-status-bullet--offline"
+                          cx="6"
+                          cy="6"
+                          r="5"
+                          stroke-width="2"
+                        />
+                      </svg>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-dredvr"
+                        title="guilherme.gazzo"
+                      >
+                        guilherme.gazzo
+                      </div>
                     </div>
                     <div
                       class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
                     >
-                      gazzo
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        <img
+                          alt="🛴"
+                          class="emojione"
+                          src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                          title=":scooter:"
+                        />
+                         currently working on User Card
+                      </div>
                     </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Roles
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Nickname
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        gazzo
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <span
-                        class="rcx-box rcx-box--full rcx-css-1sut473"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        Roles
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                      >
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-1sut473"
                         >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              admin
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                admin
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                        <div
-                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
-                        >
-                          <span
-                            class="rcx-box rcx-box--full rcx-tag "
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1i2tyln"
                           >
                             <span
-                              class="rcx-tag__inner"
+                              class="rcx-box rcx-box--full rcx-tag "
                             >
-                              user
+                              <span
+                                class="rcx-tag__inner"
+                              >
+                                user
+                              </span>
                             </span>
-                          </span>
-                        </div>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Username
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
-                      data-qa="UserInfoUserName"
-                    >
-                      guilherme.gazzo
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Bio
+                          </div>
+                        </span>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Username
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                        data-qa="UserInfoUserName"
                       >
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        guilherme.gazzo
                       </div>
                     </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      Email
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Bio
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                        >
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                        </div>
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      <a
-                        class="rcx-box rcx-box--full rcx-css-1te28na"
-                        href="mailto:rocketchat@rocket.chat"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
                       >
-                        rocketchat@rocket.chat
-                      </a>
-                      <span
-                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                        Email
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-m9tmgj"
                       >
+                        <a
+                          class="rcx-box rcx-box--full rcx-css-1te28na"
+                          href="mailto:rocketchat@rocket.chat"
+                        >
+                          rocketchat@rocket.chat
+                        </a>
                         <span
-                          class="rcx-tag__inner"
+                          class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
                         >
-                          Not_verified
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Not_verified
+                          </span>
                         </span>
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1jagyun"
-                  >
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                    >
-                      Voice_call_extension
+                      </div>
                     </div>
                     <div
-                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      class="rcx-box rcx-box--full rcx-css-1jagyun"
                     >
-                      1234567890
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                      >
+                        Voice_call_extension
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                      >
+                        1234567890
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
+        </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
+      </div>
     </div>
     <span
       data-focus-scope-end="true"
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
index 29e6cefc2be..4838833d819 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.stories.tsx
@@ -33,7 +33,7 @@ export default {
 
 			return (
 				<FormProvider {...methods}>
-					<Contextualbar height='100vh'>{fn()}</Contextualbar>
+					<Contextualbar height='100vh'> {fn()}</Contextualbar>
 				</FormProvider>
 			);
 		},
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap
index f7c52f61ac3..7bb7a19170e 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/__snapshots__/AppLogsFilterContextualBar.spec.tsx.snap
@@ -6,400 +6,443 @@ exports[`renders AppLogsItem without crashing 1`] = `
     <div
       class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
     >
+       
       <span
         data-focus-scope-start="true"
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-            >
-              
-            </i>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
-            >
-              Filters
-            </div>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                class="rcx-box rcx-box--full rcx-icon--name-customize rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
               >
-                
+                
               </i>
-            </button>
+              <div
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
+              >
+                Filters
+              </div>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-1svuzur"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-            data-overlayscrollbars="host"
+            class="rcx-box rcx-box--full rcx-css-1svuzur"
           >
             <div
-              class="os-size-observer"
+              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              data-overlayscrollbars="host"
             >
               <div
-                class="os-size-observer-listener"
-              />
-            </div>
-            <div
-              class=""
-              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-              tabindex="-1"
-            >
-              <form
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="os-size-observer"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
+                  class="os-size-observer-listener"
+                />
+              </div>
+              <div
+                class=""
+                data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+                style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+                tabindex="-1"
+              >
+                <form
+                  class="rcx-box rcx-box--full rcx-css-iag4sp"
                 >
-                  <label
-                    class="rcx-box rcx-box--full rcx-label"
-                    for="timeFilter"
-                    id="timeFilterLabel"
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
                   >
-                    Time
-                  </label>
-                  <button
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-labelledby="react-aria-:r8: timeFilterLabel"
-                    class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-                    id="timeFilter"
-                    type="button"
+                    <label
+                      class="rcx-box rcx-box--full rcx-label"
+                      for="timeFilter"
+                      id="timeFilterLabel"
+                    >
+                      Time
+                    </label>
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-labelledby="react-aria-:r8: timeFilterLabel"
+                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                      id="timeFilter"
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            name="timeFilter"
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="all"
+                            >
+                              all
+                            </option>
+                            <option
+                              value="today"
+                            >
+                              today
+                            </option>
+                            <option
+                              value="last5Minutes"
+                            >
+                              last5Minutes
+                            </option>
+                            <option
+                              value="last15Minutes"
+                            >
+                              last15Minutes
+                            </option>
+                            <option
+                              value="last30Minutes"
+                            >
+                              last30Minutes
+                            </option>
+                            <option
+                              value="last1Hour"
+                            >
+                              last1Hour
+                            </option>
+                            <option
+                              value="thisWeek"
+                            >
+                              thisWeek
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-11g6st8"
+                        id="react-aria-:r8:"
+                      />
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                      >
+                        
+                      </i>
+                    </button>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
                   >
+                    <label
+                      class="rcx-box rcx-box--full rcx-label"
+                      for="timeFilter"
+                    >
+                      Logs_from
+                    </label>
                     <div
-                      aria-hidden="true"
-                      data-a11y-ignore="aria-hidden-focus"
-                      data-react-aria-prevent-focus="true"
-                      data-testid="hidden-select-container"
-                      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      class="rcx-box rcx-box--full rcx-css-omrq7i"
                     >
-                      <label>
-                        <select
-                          name="timeFilter"
-                          tabindex="-1"
+                      <label
+                        class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
+                      >
+                        <input
+                          aria-label="Start_Date"
+                          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
+                          name="startDate"
+                          size="1"
+                          type="date"
+                          value=""
+                        />
+                        <span
+                          class="rcx-box rcx-box--full rcx-input-box__addon"
                         >
-                          <option />
-                          <option
-                            value="all"
+                          <i
+                            aria-hidden="true"
+                            class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
                           >
-                            all
-                          </option>
-                          <option
-                            value="today"
-                          >
-                            today
-                          </option>
-                          <option
-                            value="last5Minutes"
-                          >
-                            last5Minutes
-                          </option>
-                          <option
-                            value="last15Minutes"
-                          >
-                            last15Minutes
-                          </option>
-                          <option
-                            value="last30Minutes"
-                          >
-                            last30Minutes
-                          </option>
-                          <option
-                            value="last1Hour"
-                          >
-                            last1Hour
-                          </option>
-                          <option
-                            value="thisWeek"
+                            
+                          </i>
+                        </span>
+                      </label>
+                      <label
+                        class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
+                      >
+                        <input
+                          aria-label="Start_Time"
+                          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
+                          name="startTime"
+                          size="1"
+                          type="time"
+                          value=""
+                        />
+                        <span
+                          class="rcx-box rcx-box--full rcx-input-box__addon"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
                           >
-                            thisWeek
-                          </option>
-                        </select>
+                            
+                          </i>
+                        </span>
                       </label>
                     </div>
-                    <span
-                      class="rcx-box rcx-box--full rcx-css-11g6st8"
-                      id="react-aria-:r8:"
-                    />
-                    <i
-                      aria-hidden="true"
-                      class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
-                    >
-                      
-                    </i>
-                  </button>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
-                >
-                  <label
-                    class="rcx-box rcx-box--full rcx-label"
-                    for="timeFilter"
-                  >
-                    Logs_from
-                  </label>
+                  </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-omrq7i"
+                    class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
                   >
                     <label
-                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
+                      class="rcx-box rcx-box--full rcx-label"
+                      for="timeFilter"
                     >
-                      <input
-                        aria-label="Start_Date"
-                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
-                        name="startDate"
-                        size="1"
-                        type="date"
-                        value=""
-                      />
-                      <span
-                        class="rcx-box rcx-box--full rcx-input-box__addon"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
-                        >
-                          
-                        </i>
-                      </span>
+                      Until
                     </label>
-                    <label
-                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-omrq7i"
                     >
-                      <input
-                        aria-label="Start_Time"
-                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
-                        name="startTime"
-                        size="1"
-                        type="time"
-                        value=""
-                      />
-                      <span
-                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                      <label
+                        class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
+                        <input
+                          aria-label="End_Date"
+                          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
+                          name="endDate"
+                          size="1"
+                          type="date"
+                          value=""
+                        />
+                        <span
+                          class="rcx-box rcx-box--full rcx-input-box__addon"
                         >
-                          
-                        </i>
-                      </span>
-                    </label>
+                          <i
+                            aria-hidden="true"
+                            class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
+                          >
+                            
+                          </i>
+                        </span>
+                      </label>
+                      <label
+                        class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
+                      >
+                        <input
+                          aria-label="End_Time"
+                          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
+                          name="endTime"
+                          size="1"
+                          type="time"
+                          value=""
+                        />
+                        <span
+                          class="rcx-box rcx-box--full rcx-input-box__addon"
+                        >
+                          <i
+                            aria-hidden="true"
+                            class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
+                          >
+                            
+                          </i>
+                        </span>
+                      </label>
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
-                >
-                  <label
-                    class="rcx-box rcx-box--full rcx-label"
-                    for="timeFilter"
-                  >
-                    Until
-                  </label>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-omrq7i"
+                    class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
                   >
                     <label
-                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-sdt442"
+                      class="rcx-box rcx-box--full rcx-label"
+                      for="instanceFilter"
+                      id="instanceFilterLabel"
                     >
-                      <input
-                        aria-label="End_Date"
-                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
-                        name="endDate"
-                        size="1"
-                        type="date"
-                        value=""
-                      />
-                      <span
-                        class="rcx-box rcx-box--full rcx-input-box__addon"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
-                        >
-                          
-                        </i>
-                      </span>
+                      Instance
                     </label>
-                    <label
-                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper rcx-css-nc7kyx"
+                    <div
+                      aria-busy="true"
+                      aria-labelledby="instanceFilterLabel"
+                      class="rcx-box rcx-box--full rcx-skeleton__input"
                     >
-                      <input
-                        aria-label="End_Time"
-                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
-                        name="endTime"
-                        size="1"
-                        type="time"
-                        value=""
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
                       />
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
+                  >
+                    <label
+                      class="rcx-box rcx-box--full rcx-label"
+                      for="severityFilter"
+                      id="severityFilterLabel"
+                    >
+                      Severity
+                    </label>
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-label="Severity"
+                      aria-labelledby="react-aria-:rg: react-aria-:rb: severityFilterLabel"
+                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                      id="severityFilter"
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            name="severity"
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="all"
+                            >
+                              all
+                            </option>
+                            <option
+                              value="0"
+                            >
+                              0
+                            </option>
+                            <option
+                              value="1"
+                            >
+                              1
+                            </option>
+                            <option
+                              value="2"
+                            >
+                              2
+                            </option>
+                          </select>
+                        </label>
+                      </div>
                       <span
-                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                        class="rcx-box rcx-box--full rcx-css-e3nij6"
+                        id="react-aria-:rg:"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
-                        >
-                          
-                        </i>
+                        All
                       </span>
-                    </label>
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                      >
+                        
+                      </i>
+                    </button>
                   </div>
-                </div>
+                </form>
+              </div>
+              <div
+                class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+              >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
+                  class="os-scrollbar-track"
                 >
-                  <label
-                    class="rcx-box rcx-box--full rcx-label"
-                    for="instanceFilter"
-                    id="instanceFilterLabel"
-                  >
-                    Instance
-                  </label>
                   <div
-                    aria-busy="true"
-                    aria-labelledby="instanceFilterLabel"
-                    class="rcx-box rcx-box--full rcx-skeleton__input"
-                  >
-                    <span
-                      class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
-                    />
-                  </div>
+                    class="os-scrollbar-handle"
+                  />
                 </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-1jggbrp rcx-css-1hr7rzd"
-                >
-                  <label
-                    class="rcx-box rcx-box--full rcx-label"
-                    for="severityFilter"
-                    id="severityFilterLabel"
-                  >
-                    Severity
-                  </label>
-                  <button
-                    aria-expanded="false"
-                    aria-haspopup="listbox"
-                    aria-label="Severity"
-                    aria-labelledby="react-aria-:rg: react-aria-:rb: severityFilterLabel"
-                    class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-                    id="severityFilter"
-                    type="button"
-                  >
-                    <div
-                      aria-hidden="true"
-                      data-a11y-ignore="aria-hidden-focus"
-                      data-react-aria-prevent-focus="true"
-                      data-testid="hidden-select-container"
-                      style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-                    >
-                      <label>
-                        <select
-                          name="severity"
-                          tabindex="-1"
-                        >
-                          <option />
-                          <option
-                            value="all"
-                          >
-                            all
-                          </option>
-                          <option
-                            value="0"
-                          >
-                            0
-                          </option>
-                          <option
-                            value="1"
-                          >
-                            1
-                          </option>
-                          <option
-                            value="2"
-                          >
-                            2
-                          </option>
-                        </select>
-                      </label>
-                    </div>
-                    <span
-                      class="rcx-box rcx-box--full rcx-css-e3nij6"
-                      id="react-aria-:rg:"
-                    >
-                      All
-                    </span>
-                    <i
-                      aria-hidden="true"
-                      class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
-                    >
-                      
-                    </i>
-                  </button>
-                </div>
-              </form>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
+              </div>
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
             </div>
-            <div
-              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-css-m843eh"
+          >
+            <button
+              aria-label="Clear_filters"
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
+              type="button"
             >
-              <div
-                class="os-scrollbar-track"
+              <span
+                class="rcx-button--content"
               >
-                <div
-                  class="os-scrollbar-handle"
-                />
-              </div>
-            </div>
+                Clear_filters
+              </span>
+            </button>
           </div>
         </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-m843eh"
-        >
-          <button
-            aria-label="Clear_filters"
-            class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-css-1qcz93u"
-            type="button"
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
           >
-            <span
-              class="rcx-button--content"
-            >
-              Clear_filters
-            </span>
-          </button>
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
         </div>
       </div>
       <span
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx
index 5b7b091b8fb..538123afda8 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.stories.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@rocket.chat/fuselage';
 import { Contextualbar } from '@rocket.chat/ui-client';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryFn } from '@storybook/react';
@@ -75,10 +74,4 @@ Default.args = {
 	itemCount: 3,
 	loadMoreItems: action('loadMoreItems'),
 };
-Default.decorators = [
-	(fn) => (
-		<Box h='600px'>
-			<Contextualbar>{fn()}</Contextualbar>
-		</Box>
-	),
-];
+Default.decorators = [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>];
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap
index ac9d0ba0cf0..96e616ad0f7 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/__snapshots__/CannedResponseList.spec.tsx.snap
@@ -4,18 +4,18 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
 <body>
   <div>
     <div
-      class="rcx-box rcx-box--full rcx-css-1kmfepv"
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
     >
+      <span
+        data-focus-scope-start="true"
+        hidden=""
+      />
       <div
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-wuv6pi"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
-        <span
-          data-focus-scope-start="true"
-          hidden=""
-        />
         <div
           aria-labelledby="contextualbarTitle"
-          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
           role="dialog"
           tabindex="-1"
         >
@@ -157,11 +157,49 @@ exports[`CannedResponseList Storybook Stories renders Default without crashing 1
             </div>
           </div>
         </div>
-        <span
-          data-focus-scope-end="true"
-          hidden=""
-        />
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
+      <span
+        data-focus-scope-end="true"
+        hidden=""
+      />
     </div>
   </div>
 </body>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
index 10d3feaa5e6..67af7834aeb 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.tsx
@@ -1,5 +1,5 @@
+import { Box } from '@rocket.chat/fuselage';
 import { mockAppRoot } from '@rocket.chat/mock-providers';
-import { Contextualbar } from '@rocket.chat/ui-client';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import InviteUsers from './InviteUsers';
@@ -15,7 +15,7 @@ export default {
 		actions: { argTypesRegex: '^on.*' },
 	},
 	decorators: [
-		(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>,
+		(fn) => <Box height='100vh'>{fn()}</Box>,
 		mockAppRoot()
 			.withTranslations('en', 'core', {
 				'Edit_Invite': 'Edit invite',
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
index 59f928a4931..97583be453a 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/__snapshots__/InviteUsers.spec.tsx.snap
@@ -4,148 +4,190 @@ exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <div
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
+      class="rcx-box rcx-box--full rcx-css-llf9s1"
     >
       <span
         data-focus-scope-start="true"
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              title="Back"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
-              >
-                ⦉
-              </i>
-            </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
-              Invite users
-            </div>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                title="Back"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+                >
+                  ⦉
+                </i>
+              </button>
+              <div
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                
-              </i>
-            </button>
+                Invite users
+              </div>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-1svuzur"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-            data-overlayscrollbars="host"
+            class="rcx-box rcx-box--full rcx-css-1svuzur"
           >
             <div
-              class="os-size-observer"
+              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              data-overlayscrollbars="host"
             >
               <div
-                class="os-size-observer-listener"
-              />
-            </div>
-            <div
-              class=""
-              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-              tabindex="-1"
-            >
+                class="os-size-observer"
+              >
+                <div
+                  class="os-size-observer-listener"
+                />
+              </div>
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class=""
+                data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+                style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+                tabindex="-1"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
+                  class="rcx-box rcx-box--full rcx-css-iag4sp"
                 >
-                  <label
-                    class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
-                    for=":r1:"
-                  >
-                    Invite link
-                  </label>
-                  <span
-                    class="rcx-box rcx-box--full rcx-field__row"
+                  <div
+                    class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
                   >
                     <label
-                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+                      class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
+                      for=":r1:"
                     >
-                      <input
-                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
-                        id=":r1:"
-                        size="1"
-                        type="url"
-                        value="https://go.rocket.chat/invite?host=open.rocket.chat&path=invite%2F5sBs3a"
-                      />
-                      <span
-                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                      Invite link
+                    </label>
+                    <span
+                      class="rcx-box rcx-box--full rcx-field__row"
+                    >
+                      <label
+                        class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
                       >
-                        <i
-                          aria-hidden="true"
-                          class="rcx-box rcx-box--full rcx-icon--name-copy rcx-icon rcx-css-1g87xs3"
+                        <input
+                          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-url rcx-input-box"
+                          id=":r1:"
+                          size="1"
+                          type="url"
+                          value="https://go.rocket.chat/invite?host=open.rocket.chat&path=invite%2F5sBs3a"
+                        />
+                        <span
+                          class="rcx-box rcx-box--full rcx-input-box__addon"
                         >
-                          
-                        </i>
-                      </span>
-                    </label>
-                  </span>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-i0xim0"
-                  >
-                    Expire on February 4, 2020 4:45 PM.
+                          <i
+                            aria-hidden="true"
+                            class="rcx-box rcx-box--full rcx-icon--name-copy rcx-icon rcx-css-1g87xs3"
+                          >
+                            
+                          </i>
+                        </span>
+                      </label>
+                    </span>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-i0xim0"
+                    >
+                      Expire on February 4, 2020 4:45 PM.
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -160,280 +202,322 @@ exports[`renders InviteEdit without crashing 1`] = `
 <body>
   <div>
     <div
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
+      class="rcx-box rcx-box--full rcx-css-llf9s1"
     >
       <span
         data-focus-scope-start="true"
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              title="Back"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
-              >
-                ⦉
-              </i>
-            </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
-              Invite users
-            </div>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                title="Back"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+                >
+                  ⦉
+                </i>
+              </button>
+              <div
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                
-              </i>
-            </button>
+                Invite users
+              </div>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-1svuzur"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-            data-overlayscrollbars="host"
+            class="rcx-box rcx-box--full rcx-css-1svuzur"
           >
             <div
-              class="os-size-observer"
+              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              data-overlayscrollbars="host"
             >
               <div
-                class="os-size-observer-listener"
-              />
-            </div>
-            <div
-              class=""
-              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-              tabindex="-1"
-            >
+                class="os-size-observer"
+              >
+                <div
+                  class="os-size-observer-listener"
+                />
+              </div>
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class=""
+                data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+                style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+                tabindex="-1"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
+                  class="rcx-box rcx-box--full rcx-css-iag4sp"
                 >
-                  <label
-                    class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
-                    for=":r3:"
-                  >
-                    Expiration (Days)
-                  </label>
-                  <span
-                    class="rcx-box rcx-box--full rcx-field__row"
+                  <div
+                    class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
                   >
-                    <button
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-labelledby="react-aria-:rc:"
-                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-                      id=":r3:"
-                      type="button"
+                    <label
+                      class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
+                      for=":r3:"
                     >
-                      <div
-                        aria-hidden="true"
-                        data-a11y-ignore="aria-hidden-focus"
-                        data-react-aria-prevent-focus="true"
-                        data-testid="hidden-select-container"
-                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      Expiration (Days)
+                    </label>
+                    <span
+                      class="rcx-box rcx-box--full rcx-field__row"
+                    >
+                      <button
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-labelledby="react-aria-:rc:"
+                        class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                        id=":r3:"
+                        type="button"
                       >
-                        <label>
-                          <select
-                            name="days"
-                            tabindex="-1"
-                          >
-                            <option />
-                            <option
-                              value="1"
-                            >
-                              1
-                            </option>
-                            <option
-                              value="7"
-                            >
-                              7
-                            </option>
-                            <option
-                              value="15"
-                            >
-                              15
-                            </option>
-                            <option
-                              value="30"
-                            >
-                              30
-                            </option>
-                            <option
-                              value="0"
+                        <div
+                          aria-hidden="true"
+                          data-a11y-ignore="aria-hidden-focus"
+                          data-react-aria-prevent-focus="true"
+                          data-testid="hidden-select-container"
+                          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                        >
+                          <label>
+                            <select
+                              name="days"
+                              tabindex="-1"
                             >
-                              0
-                            </option>
-                          </select>
-                        </label>
-                      </div>
-                      <span
-                        class="rcx-box rcx-box--full rcx-css-e3nij6"
-                        id="react-aria-:rc:"
-                      >
-                        1
-                      </span>
-                      <i
-                        aria-hidden="true"
-                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
-                      >
-                        
-                      </i>
-                    </button>
-                  </span>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
-                >
-                  <label
-                    class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
-                    for=":r4:"
+                              <option />
+                              <option
+                                value="1"
+                              >
+                                1
+                              </option>
+                              <option
+                                value="7"
+                              >
+                                7
+                              </option>
+                              <option
+                                value="15"
+                              >
+                                15
+                              </option>
+                              <option
+                                value="30"
+                              >
+                                30
+                              </option>
+                              <option
+                                value="0"
+                              >
+                                0
+                              </option>
+                            </select>
+                          </label>
+                        </div>
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-e3nij6"
+                          id="react-aria-:rc:"
+                        >
+                          1
+                        </span>
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                        >
+                          
+                        </i>
+                      </button>
+                    </span>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-field rcx-css-1fuhgt0"
                   >
-                    Max number of uses
-                  </label>
-                  <span
-                    class="rcx-box rcx-box--full rcx-field__row"
+                    <label
+                      class="rcx-box rcx-box--full rcx-field__label rcx-label rcx-css-irxdij"
+                      for=":r4:"
+                    >
+                      Max number of uses
+                    </label>
+                    <span
+                      class="rcx-box rcx-box--full rcx-field__row"
+                    >
+                      <button
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-labelledby="react-aria-:rk:"
+                        class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                        id=":r4:"
+                        type="button"
+                      >
+                        <div
+                          aria-hidden="true"
+                          data-a11y-ignore="aria-hidden-focus"
+                          data-react-aria-prevent-focus="true"
+                          data-testid="hidden-select-container"
+                          style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                        >
+                          <label>
+                            <select
+                              name="maxUses"
+                              tabindex="-1"
+                            >
+                              <option />
+                              <option
+                                value="5"
+                              >
+                                5
+                              </option>
+                              <option
+                                value="10"
+                              >
+                                10
+                              </option>
+                              <option
+                                value="25"
+                              >
+                                25
+                              </option>
+                              <option
+                                value="50"
+                              >
+                                50
+                              </option>
+                              <option
+                                value="100"
+                              >
+                                100
+                              </option>
+                              <option
+                                value="0"
+                              >
+                                0
+                              </option>
+                            </select>
+                          </label>
+                        </div>
+                        <span
+                          class="rcx-box rcx-box--full rcx-css-e3nij6"
+                          id="react-aria-:rk:"
+                        >
+                          5
+                        </span>
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                        >
+                          
+                        </i>
+                      </button>
+                    </span>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-31obua"
                   >
                     <button
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-labelledby="react-aria-:rk:"
-                      class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-                      id=":r4:"
+                      class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+                      disabled=""
                       type="button"
                     >
-                      <div
-                        aria-hidden="true"
-                        data-a11y-ignore="aria-hidden-focus"
-                        data-react-aria-prevent-focus="true"
-                        data-testid="hidden-select-container"
-                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-                      >
-                        <label>
-                          <select
-                            name="maxUses"
-                            tabindex="-1"
-                          >
-                            <option />
-                            <option
-                              value="5"
-                            >
-                              5
-                            </option>
-                            <option
-                              value="10"
-                            >
-                              10
-                            </option>
-                            <option
-                              value="25"
-                            >
-                              25
-                            </option>
-                            <option
-                              value="50"
-                            >
-                              50
-                            </option>
-                            <option
-                              value="100"
-                            >
-                              100
-                            </option>
-                            <option
-                              value="0"
-                            >
-                              0
-                            </option>
-                          </select>
-                        </label>
-                      </div>
                       <span
-                        class="rcx-box rcx-box--full rcx-css-e3nij6"
-                        id="react-aria-:rk:"
+                        class="rcx-button--content"
                       >
-                        5
+                        Generate_New_Link
                       </span>
-                      <i
-                        aria-hidden="true"
-                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
-                      >
-                        
-                      </i>
                     </button>
-                  </span>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-31obua"
-                >
-                  <button
-                    class="rcx-box rcx-box--full rcx-button--primary rcx-button"
-                    disabled=""
-                    type="button"
-                  >
-                    <span
-                      class="rcx-button--content"
-                    >
-                      Generate_New_Link
-                    </span>
-                  </button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -448,131 +532,173 @@ exports[`renders InviteError without crashing 1`] = `
 <body>
   <div>
     <div
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
+      class="rcx-box rcx-box--full rcx-css-llf9s1"
     >
       <span
         data-focus-scope-start="true"
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              title="Back"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
-              >
-                ⦉
-              </i>
-            </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
-              Invite users
-            </div>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                title="Back"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+                >
+                  ⦉
+                </i>
+              </button>
+              <div
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                
-              </i>
-            </button>
+                Invite users
+              </div>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-1svuzur"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-            data-overlayscrollbars="host"
+            class="rcx-box rcx-box--full rcx-css-1svuzur"
           >
             <div
-              class="os-size-observer"
+              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              data-overlayscrollbars="host"
             >
               <div
-                class="os-size-observer-listener"
-              />
-            </div>
-            <div
-              class=""
-              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-              tabindex="-1"
-            >
+                class="os-size-observer"
+              >
+                <div
+                  class="os-size-observer-listener"
+                />
+              </div>
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class=""
+                data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+                style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+                tabindex="-1"
               >
-                <section
-                  class="rcx-box rcx-box--full rcx-callout rcx-callout--danger rcx-css-1jggbrp rcx-css-1fuhgt0"
+                <div
+                  class="rcx-box rcx-box--full rcx-css-iag4sp"
                 >
-                  <i
-                    aria-hidden="true"
-                    class="rcx-box rcx-box--full rcx-icon--name-ban rcx-icon rcx-callout__icon rcx-css-4pvxx3"
-                  >
-                    
-                  </i>
-                  <div
-                    class="rcx-box rcx-box--full rcx-callout__wrapper"
+                  <section
+                    class="rcx-box rcx-box--full rcx-callout rcx-callout--danger rcx-css-1jggbrp rcx-css-1fuhgt0"
                   >
+                    <i
+                      aria-hidden="true"
+                      class="rcx-box rcx-box--full rcx-icon--name-ban rcx-icon rcx-callout__icon rcx-css-4pvxx3"
+                    >
+                      
+                    </i>
                     <div
-                      class="rcx-box rcx-box--full rcx-callout__wrapper-content"
+                      class="rcx-box rcx-box--full rcx-callout__wrapper"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-callout__content"
+                        class="rcx-box rcx-box--full rcx-callout__wrapper-content"
                       >
-                        Error: Error message
+                        <div
+                          class="rcx-box rcx-box--full rcx-callout__content"
+                        >
+                          Error: Error message
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </section>
+                  </section>
+                </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -587,111 +713,153 @@ exports[`renders InviteLoading without crashing 1`] = `
 <body>
   <div>
     <div
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-yefw2m"
+      class="rcx-box rcx-box--full rcx-css-llf9s1"
     >
       <span
         data-focus-scope-start="true"
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <button
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              title="Back"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
-              >
-                ⦉
-              </i>
-            </button>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
-              Invite users
-            </div>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                title="Back"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+                >
+                  ⦉
+                </i>
+              </button>
+              <div
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                
-              </i>
-            </button>
+                Invite users
+              </div>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-x7bl3q rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-css-1svuzur"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-            data-overlayscrollbars="host"
+            class="rcx-box rcx-box--full rcx-css-1svuzur"
           >
             <div
-              class="os-size-observer"
-            >
-              <div
-                class="os-size-observer-listener"
-              />
-            </div>
-            <div
-              class=""
-              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-              tabindex="-1"
+              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              data-overlayscrollbars="host"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-iag4sp"
+                class="os-size-observer"
               >
-                <span
-                  class="rcx-skeleton rcx-skeleton--text rcx-css-1jggbrp rcx-css-1qcz93u"
+                <div
+                  class="os-size-observer-listener"
                 />
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class=""
+                data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+                style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+                tabindex="-1"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="rcx-box rcx-box--full rcx-css-iag4sp"
+                >
+                  <span
+                    class="rcx-skeleton rcx-skeleton--text rcx-css-1jggbrp rcx-css-1qcz93u"
+                  />
+                </div>
               </div>
-            </div>
-            <div
-              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-            >
               <div
-                class="os-scrollbar-track"
+                class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
               >
                 <div
-                  class="os-scrollbar-handle"
-                />
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
+              </div>
+              <div
+                class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+                style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+              >
+                <div
+                  class="os-scrollbar-track"
+                >
+                  <div
+                    class="os-scrollbar-handle"
+                  />
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap b/apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap
index 4b9a90d9891..bbb800cc4f0 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/__snapshots__/RoomMembers.spec.tsx.snap
@@ -11,154 +11,196 @@ exports[`renders Default without crashing 1`] = `
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-            >
-              
-            </i>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
-            >
-              Members
-            </div>
-          </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
-        >
-          <label
-            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-          >
-            <input
-              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-              placeholder="Search_by_username"
-              size="1"
-              type="text"
-              value="filter"
-            />
-            <span
-              class="rcx-box rcx-box--full rcx-input-box__addon"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
               >
-                
+                
               </i>
-            </span>
-          </label>
-          <div
-            class="rcx-box rcx-box--full rcx-css-l1qvi5"
-          >
-            <button
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="react-aria-:r8:"
-              class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-              type="button"
-            >
               <div
-                aria-hidden="true"
-                data-a11y-ignore="aria-hidden-focus"
-                data-react-aria-prevent-focus="true"
-                data-testid="hidden-select-container"
-                style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                <label>
-                  <select
-                    tabindex="-1"
-                  >
-                    <option />
-                    <option
-                      value="online"
-                    >
-                      online
-                    </option>
-                    <option
-                      value="all"
-                    >
-                      all
-                    </option>
-                  </select>
-                </label>
+                Members
               </div>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                placeholder="Search_by_username"
+                size="1"
+                type="text"
+                value="filter"
+              />
               <span
-                class="rcx-box rcx-box--full rcx-css-e3nij6"
-                id="react-aria-:r8:"
+                class="rcx-box rcx-box--full rcx-input-box__addon"
               >
-                Online
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
               </span>
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-:r8:"
+                class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="online"
+                      >
+                        online
+                      </option>
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                    </select>
+                  </label>
+                </div>
+                <span
+                  class="rcx-box rcx-box--full rcx-css-e3nij6"
+                  id="react-aria-:r8:"
+                >
+                  Online
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-nyqak3"
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
           >
-            <span
-              class="rcx-box rcx-box--full rcx-css-1848tdm"
+            <div
+              class="rcx-box rcx-box--full rcx-css-nyqak3"
             >
-              Showing_current_of_total
-            </span>
-          </div>
-          <div
-            class="rcx-box rcx-box--full rcx-css-4k230l"
-          >
+              <span
+                class="rcx-box rcx-box--full rcx-css-1848tdm"
+              >
+                Showing_current_of_total
+              </span>
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              class="rcx-box rcx-box--full rcx-css-4k230l"
             >
               <div
-                data-testid="virtuoso-scroller"
-                data-virtuoso-scroller="true"
-                style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
-                tabindex="-1"
+                class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
               >
                 <div
-                  style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  data-testid="virtuoso-scroller"
+                  data-virtuoso-scroller="true"
+                  style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
+                  tabindex="-1"
                 >
                   <div
-                    data-testid="virtuoso-top-item-list"
-                  />
-                </div>
-                <div
-                  data-viewport-type="element"
-                  style="width: 100%; height: 100%; position: absolute; top: 0px;"
-                >
+                    style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  >
+                    <div
+                      data-testid="virtuoso-top-item-list"
+                    />
+                  </div>
                   <div
-                    data-testid="virtuoso-item-list"
-                    style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
-                  />
-                  <div>
+                    data-viewport-type="element"
+                    style="width: 100%; height: 100%; position: absolute; top: 0px;"
+                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      data-testid="virtuoso-item-list"
+                      style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
                     />
+                    <div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -180,126 +222,168 @@ exports[`renders Loading without crashing 1`] = `
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-            >
-              
-            </i>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
-            >
-              Members
-            </div>
-          </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
-        >
-          <label
-            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-          >
-            <input
-              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-              placeholder="Search_by_username"
-              size="1"
-              type="text"
-              value=""
-            />
-            <span
-              class="rcx-box rcx-box--full rcx-input-box__addon"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
               >
-                
+                
               </i>
-            </span>
-          </label>
-          <div
-            class="rcx-box rcx-box--full rcx-css-l1qvi5"
-          >
-            <button
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="react-aria-:rh:"
-              class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-              type="button"
-            >
               <div
-                aria-hidden="true"
-                data-a11y-ignore="aria-hidden-focus"
-                data-react-aria-prevent-focus="true"
-                data-testid="hidden-select-container"
-                style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                <label>
-                  <select
-                    tabindex="-1"
-                  >
-                    <option />
-                    <option
-                      value="online"
-                    >
-                      online
-                    </option>
-                    <option
-                      value="all"
-                    >
-                      all
-                    </option>
-                  </select>
-                </label>
+                Members
               </div>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                placeholder="Search_by_username"
+                size="1"
+                type="text"
+                value=""
+              />
               <span
-                class="rcx-box rcx-box--full rcx-css-e3nij6"
-                id="react-aria-:rh:"
+                class="rcx-box rcx-box--full rcx-input-box__addon"
               >
-                Online
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
               </span>
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-:rh:"
+                class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="online"
+                      >
+                        online
+                      </option>
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                    </select>
+                  </label>
+                </div>
+                <span
+                  class="rcx-box rcx-box--full rcx-css-e3nij6"
+                  id="react-aria-:rh:"
+                >
+                  Online
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-nyqak3"
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
           >
             <div
-              class="rcx-box rcx-box--full rcx-throbber"
+              class="rcx-box rcx-box--full rcx-css-nyqak3"
             >
-              <span
-                class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1xtde58 rcx-css-10wc9to"
-              />
-              <span
-                class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1mkyloh rcx-css-10wc9to"
-              />
-              <span
-                class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1r9rmv6 rcx-css-10wc9to"
-              />
+              <div
+                class="rcx-box rcx-box--full rcx-throbber"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1xtde58 rcx-css-10wc9to"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1mkyloh rcx-css-10wc9to"
+                />
+                <span
+                  class="rcx-box rcx-box--full rcx-throbber__circle rcx-css-1r9rmv6 rcx-css-10wc9to"
+                />
+              </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -321,154 +405,196 @@ exports[`renders WithABACRoom without crashing 1`] = `
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-            >
-              
-            </i>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
-            >
-              Members
-            </div>
-          </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
-        >
-          <label
-            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-          >
-            <input
-              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-              placeholder="Search_by_username"
-              size="1"
-              type="text"
-              value="filter"
-            />
-            <span
-              class="rcx-box rcx-box--full rcx-input-box__addon"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
               >
-                
+                
               </i>
-            </span>
-          </label>
-          <div
-            class="rcx-box rcx-box--full rcx-css-l1qvi5"
-          >
-            <button
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="react-aria-:rq:"
-              class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-              type="button"
-            >
               <div
-                aria-hidden="true"
-                data-a11y-ignore="aria-hidden-focus"
-                data-react-aria-prevent-focus="true"
-                data-testid="hidden-select-container"
-                style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                <label>
-                  <select
-                    tabindex="-1"
-                  >
-                    <option />
-                    <option
-                      value="online"
-                    >
-                      online
-                    </option>
-                    <option
-                      value="all"
-                    >
-                      all
-                    </option>
-                  </select>
-                </label>
+                Members
               </div>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                placeholder="Search_by_username"
+                size="1"
+                type="text"
+                value="filter"
+              />
               <span
-                class="rcx-box rcx-box--full rcx-css-e3nij6"
-                id="react-aria-:rq:"
+                class="rcx-box rcx-box--full rcx-input-box__addon"
               >
-                Online
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
               </span>
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-:rq:"
+                class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="online"
+                      >
+                        online
+                      </option>
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                    </select>
+                  </label>
+                </div>
+                <span
+                  class="rcx-box rcx-box--full rcx-css-e3nij6"
+                  id="react-aria-:rq:"
+                >
+                  Online
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-nyqak3"
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
           >
-            <span
-              class="rcx-box rcx-box--full rcx-css-1848tdm"
+            <div
+              class="rcx-box rcx-box--full rcx-css-nyqak3"
             >
-              Showing_current_of_total
-            </span>
-          </div>
-          <div
-            class="rcx-box rcx-box--full rcx-css-4k230l"
-          >
+              <span
+                class="rcx-box rcx-box--full rcx-css-1848tdm"
+              >
+                Showing_current_of_total
+              </span>
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              class="rcx-box rcx-box--full rcx-css-4k230l"
             >
               <div
-                data-testid="virtuoso-scroller"
-                data-virtuoso-scroller="true"
-                style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
-                tabindex="-1"
+                class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
               >
                 <div
-                  style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  data-testid="virtuoso-scroller"
+                  data-virtuoso-scroller="true"
+                  style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
+                  tabindex="-1"
                 >
                   <div
-                    data-testid="virtuoso-top-item-list"
-                  />
-                </div>
-                <div
-                  data-viewport-type="element"
-                  style="width: 100%; height: 100%; position: absolute; top: 0px;"
-                >
+                    style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  >
+                    <div
+                      data-testid="virtuoso-top-item-list"
+                    />
+                  </div>
                   <div
-                    data-testid="virtuoso-item-list"
-                    style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
-                  />
-                  <div>
+                    data-viewport-type="element"
+                    style="width: 100%; height: 100%; position: absolute; top: 0px;"
+                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      data-testid="virtuoso-item-list"
+                      style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
                     />
+                    <div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
@@ -490,154 +616,196 @@ exports[`renders WithInvitedMember without crashing 1`] = `
         hidden=""
       />
       <div
-        aria-labelledby="contextualbarTitle"
-        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-        role="dialog"
-        tabindex="-1"
+        style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-zsa0ng"
+          aria-labelledby="contextualbarTitle"
+          class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+          role="dialog"
+          tabindex="-1"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+            class="rcx-box rcx-box--full rcx-css-zsa0ng"
           >
-            <i
-              aria-hidden="true"
-              class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-            >
-              
-            </i>
             <div
-              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-              id="contextualbarTitle"
-            >
-              Members
-            </div>
-          </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
-        >
-          <label
-            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
-          >
-            <input
-              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
-              placeholder="Search_by_username"
-              size="1"
-              type="text"
-              value="filter"
-            />
-            <span
-              class="rcx-box rcx-box--full rcx-input-box__addon"
+              class="rcx-box rcx-box--full rcx-css-1sl6k6j"
             >
               <i
                 aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                class="rcx-box rcx-box--full rcx-icon--name-members rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
               >
-                
+                
               </i>
-            </span>
-          </label>
-          <div
-            class="rcx-box rcx-box--full rcx-css-l1qvi5"
-          >
-            <button
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-labelledby="react-aria-:r13:"
-              class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
-              type="button"
-            >
               <div
-                aria-hidden="true"
-                data-a11y-ignore="aria-hidden-focus"
-                data-react-aria-prevent-focus="true"
-                data-testid="hidden-select-container"
-                style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+                id="contextualbarTitle"
               >
-                <label>
-                  <select
-                    tabindex="-1"
-                  >
-                    <option />
-                    <option
-                      value="online"
-                    >
-                      online
-                    </option>
-                    <option
-                      value="all"
-                    >
-                      all
-                    </option>
-                  </select>
-                </label>
+                Members
               </div>
+            </div>
+          </div>
+          <div
+            class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-137qgp8"
+          >
+            <label
+              class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+            >
+              <input
+                class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+                placeholder="Search_by_username"
+                size="1"
+                type="text"
+                value="filter"
+              />
               <span
-                class="rcx-box rcx-box--full rcx-css-e3nij6"
-                id="react-aria-:r13:"
+                class="rcx-box rcx-box--full rcx-input-box__addon"
               >
-                Online
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
               </span>
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+            </label>
+            <div
+              class="rcx-box rcx-box--full rcx-css-l1qvi5"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="react-aria-:r13:"
+                class="rcx-box rcx-box--full rcx-select rcx-css-1vw6rc6"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <div
+                  aria-hidden="true"
+                  data-a11y-ignore="aria-hidden-focus"
+                  data-react-aria-prevent-focus="true"
+                  data-testid="hidden-select-container"
+                  style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                >
+                  <label>
+                    <select
+                      tabindex="-1"
+                    >
+                      <option />
+                      <option
+                        value="online"
+                      >
+                        online
+                      </option>
+                      <option
+                        value="all"
+                      >
+                        all
+                      </option>
+                    </select>
+                  </label>
+                </div>
+                <span
+                  class="rcx-box rcx-box--full rcx-css-e3nij6"
+                  id="react-aria-:r13:"
+                >
+                  Online
+                </span>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1wz6xj9"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
-        </div>
-        <div
-          class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
-        >
           <div
-            class="rcx-box rcx-box--full rcx-css-nyqak3"
+            class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1w66n2o"
           >
-            <span
-              class="rcx-box rcx-box--full rcx-css-1848tdm"
+            <div
+              class="rcx-box rcx-box--full rcx-css-nyqak3"
             >
-              Showing_current_of_total
-            </span>
-          </div>
-          <div
-            class="rcx-box rcx-box--full rcx-css-4k230l"
-          >
+              <span
+                class="rcx-box rcx-box--full rcx-css-1848tdm"
+              >
+                Showing_current_of_total
+              </span>
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+              class="rcx-box rcx-box--full rcx-css-4k230l"
             >
               <div
-                data-testid="virtuoso-scroller"
-                data-virtuoso-scroller="true"
-                style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
-                tabindex="-1"
+                class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
               >
                 <div
-                  style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  data-testid="virtuoso-scroller"
+                  data-virtuoso-scroller="true"
+                  style="height: 100%; outline: none; overflow-y: auto; position: relative; width: 100%;"
+                  tabindex="-1"
                 >
                   <div
-                    data-testid="virtuoso-top-item-list"
-                  />
-                </div>
-                <div
-                  data-viewport-type="element"
-                  style="width: 100%; height: 100%; position: absolute; top: 0px;"
-                >
+                    style="width: 100%; position: -webkit-sticky; top: 0px; z-index: 1; margin-top: 0px;"
+                  >
+                    <div
+                      data-testid="virtuoso-top-item-list"
+                    />
+                  </div>
                   <div
-                    data-testid="virtuoso-item-list"
-                    style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
-                  />
-                  <div>
+                    data-viewport-type="element"
+                    style="width: 100%; height: 100%; position: absolute; top: 0px;"
+                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      data-testid="virtuoso-item-list"
+                      style="box-sizing: border-box; margin-top: 0px; padding-top: 0px; padding-bottom: 0px;"
                     />
+                    <div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-jsq7k5"
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-r98g7d"
+            />
+          </div>
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+          />
+          <div
+            class=""
+            style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+          />
+        </div>
       </div>
       <span
         data-focus-scope-end="true"
diff --git a/apps/meteor/public/images/featurePreview/resizable-contextual-bar.png b/apps/meteor/public/images/featurePreview/resizable-contextual-bar.png
deleted file mode 100644
index c36c7e44a29d8c27c9c035a77026f1cd7e7dabd0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4776
zcmb_gc|6o>+y4y{3PqAFw469i)`&`jifq|xQrRVB8`*};U@Ub)ksQe`Y7ApZSu&Ox
z6)GY7))=y78T%}Z8PBitzUT9K&->SNp7Z=MGr#-3uj^jE_jP^0*KgviER2MAN$&yx
zK-k3C;4%R4lELS<0({`NlI6W(@Mq^8;~Rkhu>a`K55(m1FUw#jB=EA)d7!N0z%1B+
zdYm&q2LKgGf?F;-0AMfN#NZqv6hfo;Jv`tM&cE!zND54gZ$Tjr8UJp7FxeF9e>=~-
zNczd;?|U6ZGO+R3j65s?Iw<~pHX$#1*wnzw?C>E+k>1!?Q)OT2Rh}c~J?-;xh*DD@
z5&VuPfv<Q=e`j?QYu7k-3~fdRoW1BnO<ZzkZeU)}7jr_GsGRhQ86DEhU7T@YQO~Ro
zcRRgSX5`WOriJM>6;!uDa`!Y;|D_5s9QkRjaLGpz021e>yNWI*E7UP9U*uPKlu$5l
ze~mBdx$8HNP<@t@lk;O=yF-uBG)gm}vQ`FTX2=5oSi1PVK?_BPq3}?*Ii*IA>5n%v
zbWfn2Z0%VeSS;40*OG6^x`g#gc6vG+0n4xqj%>2%a|E&SDoPm@8=~J!AF?cEymsTg
zg9!IX{1QP(Ia9Y692SZ~j-v+Fzbsry_Do~5Q;7QVx)|1Hgr?kFWAI^!+ImZe`h7{@
z<7Wd?nvqU+hh0K`X#Te9Qv~+NQEfZlaS3p1E?Qj;@Lu62F^-=7@DAebv#>32$7(zZ
z#2P$QKDTo&6i`vDH*Gffd5$i%t_F_vl8F?y%}h3Z8H@yM*BiosI8lh4P_(iF1@}}?
zq{PzNEj#Cf+}E7=M~A1;!yU-VR(Iqja9E9a^KglbjG>o(CfIVWY-qIJ*IfOF9qsco
zsP|zA0FZBI-ri@#KF<q2{yOr_7&Lqgfk=XjDG89l#;tPz7;y&$dDOth4G}Ep@-Z3^
z0s#H}P-n2~^+5o1eZ1rExO_DQ)C~4Z=y<yLSJW>BojJyDX#L`1fpMw(8}=y(;Qb50
ztG4g(e21#ii+lH)f6o-y6co%37_uw9=%rOG{I07yaBXcWTt!j*qfypbuNvD_ng%1S
zswfOjww>h>)~7YAPcMAKJRN5mtgR)u*&%|zQM^a8U~`j4t7%8x1g0+hG$#bW$p^tB
zc&WljyR{;5B?77{FJK2sZ+Y5Xbn=<Min-5mQ@dKiFBuC6>6bQF;65*X%HMlHJoVhw
z6)82L1yy>U@X&1#ma6@IPERFLq98z_CBT>0j}WxM`2u5KK=^tyR#3-#w17MA|1nno
zKD<)L<Dpp!Y(XJC@Gef+{9?2|`MgUKV^>2GDvPHBG2q=DbfuxLTun%p7zwTGyA<=9
zB!nyebHtGOAm~b6YDV#ihj{|_k6cGWt<MEikxI<_<{^AtrhtC`cWfmEuI8&ahFDNl
z`-b?hgu-8rSGgB>TxFs7vUX!*wNWgREa0gb-;1oeZ2iKt*DX@2Z)*70VGVg08F*ZA
zN+mNp(=s7Jmf!Q?i^1xoFC8yoT1#hWss%)Q8AJ5+1%MCxP`1?Sl)meFbG2i$N3ZYy
zP7t`h^XCM3EB)QYgZ=YwNe|}&eD~2#Z~og?)Df-6Nzt<yDc^3d3|Shj9A(f(GDo@9
znLYBD^&>k0Y_8`~07mCBDH(F1W8Bph#ys^|#42?=rT<DSmBVJHB^Bau-5e%07XYjv
ze0W48OE^<IH?4nUty3>@YlU~u*~iG*si#l?3kX@Ir@UX9UT-FG>MBPYH$M)1rcwf_
z;mn;)0AK>};Xee7Ye)YOzvg2$uN+Y*A_Uwy0g-gp58g$BpH~COpP<fINU!=9Ljbfl
zOWz^w{K!IxG+w{fVJ6?;`>Jh^Ieh5GDu!JXulYcLtS%E|89R1ose!2gV6*o1XuQdW
zlBMFtWFVo>D8T~`o--ZUMT_o<Uyj;np)7QS&$FMTSW}#~bgYzVr-y^0_^!ur&4h&s
z+_EkJIQ<n|O<0%JwC80wnwitPWAl50s)dBZ*<`+zc14M_v!qS8m~6sUR}Z^qa&q!X
zE^V-)pdJED8UTFP3pz*FYF8WepqA$FT<&y2<kM<jJN7TvB`A%R^Swtx${LRMH-@8o
zKy2SmdWd4s6JR_B<O^z&fx}P|n?gcwZLD=#rbY$&)tssC3LCG9<WU+=6BCbVui(2O
z)yHWj@%DA+&=mk)A$;PY>#V6D@lVOpcW-O*QU4kh*j>HHph>nY<t$StYjJ)rFomk3
z|4gCc5$=iNwkqpN4>=I%_>z6m10y3;)SB_t2!g=fg5r4Cg)Ha6UgS$0${lJb;CW!A
zg>Wj}CXM5UNb@eZ-C6$(Dwua((c)p%-L<=(4RojcV>}zLLeNMpX-^jyb^q5kgp9R8
z|5yEsawWp3DYK97@r$ZlS^QH*i7G@g@1|&U=R6-6Q@Iu)-~5ei{hY!ly=SXOkY)q+
zf#ytRq>^wQ9?;HgM+!I^Z(Vvb^c8*p=&(|UYmArxy)AKR=fXBSnmXi@vNg75awqhP
zhlVzKXIZMp4Hip_339;X2g#odd2<wJUix}(Rvmt87YTT!Mb!UE(2G@ek9xiKdqza4
zE29WawTRdw3oTG((FpThe1NwiNaBb@3#I(MLO|AOhrGWn9Jh}G2fec`O#dKzMeg9i
zM;DWaOKo8Bh&ZB>1l^fk{FHI)dJ({@-}3!bAPT9gtb)?o%F}3kpFC8HXdb}#1X%B>
zF8A`Zyq^jRmXwaIf6)NM15*goeIKRSRuO*H41K}}%=(Yl5%zPq_$5T^RKA>#6Brdj
zGJi+T{=#AZL^QDv#SNuRKnClLp%H9{Q|O=&>bJxrNJly^x-S3!{hjDXYI|P|k6Y?S
zp6tn+tNzo=<$t^ut!Hqk<0oZg(CbqCq(`pQm-sQ`w<>Lh@WIC7mvAZfQYdgsdAIHe
zC8iT4t^9vh&FA@N^8Qcp0A&Ce%E(DKQN7gpVkSoip(`&hZ#LscdD7C_vX_h(1vCA`
z8b@9?l}o2`k8sBLEpZ-u%$3<0f=-)Hf|_=ynp~@2U0tM!?{wY=-Umov%auzyRORFM
z`S)-`O|bEEF3`eK%C7Hjs-#~WP_u2_{mPkQ^j9-7+gT{R)g(`%-3mOFw{z=ly`fbi
z{qB1@DLG=Qiu5~h|HhxGV_4Ive3!ePP1Af(5y*$uTgOZhoGg=c87$9xg%P3|$U*M?
z=X>5Y<VA8tR9c&mk2wnsPCs%gf9Tv$*Rrt*tqCU7O-xL<eH5;U*mD4b6CzQ$9n7Z~
zi+cANeq``vUP)UXHT`x0a&NoW`0TqyWx3X8U9+>Z0ZN|G!cgD(awmicwO9Dv`^nl1
zzjYT-L+eYT8PSo5+5)@fSFxM;O<mUV;zVZ+a_C7}-So9OMTIh0n%l{WFV-|F1-`Lj
z@APsTSM%+0S;O?eUh*ptQ?H8v&f+i&&RR}O`i*4f6k#H@m7lp*^zKSfa^hmOXkOS-
z60>2cVM#iEOcKIf?8G3O<3kV^s3C1SZEnQ`{BY};A8}$L{)cZWe-He=7IuFnmhY#4
zY4E58i;gn|BRS3+r;6+SHcPc%%tvs7XD`vC?_eAskXhq<zJ+}T8j|x@*`M^b*Po1$
zXoCh;+w}K^i6O#?Zmjo782r<yM$)RxRVp*&eHenqFWSdJb5{jh2~Dsj@+;3#|JGLB
z9032wlJoxilNr)>i@US|;p8Cu(-kNgy~rVG>ghS%FC0N}9f?~Ks%GAz6J`Z%cVO}B
zG04y@>b8#k=;z!%1hn-NM-L`XT9eg&nMqxp*7RR7oT3$9b4u=@sq`?pYiu|62LtEe
z%mc7~s>k96X5&=9)5DSQm4rx_zJbV9Ro!gHS%&KD+~VuXk+#m1%{A39Yo-Bt%80P3
zq2VTDzf#=Rmdh&?bCCx)b*_Bg4-wI3l2pChar~jmn+7izL<}=qt?9DEhX7`ApQulH
zMEj?4#;~_z$l3Lll0lC%>Vrf3=gSpgq(a-sPF?M*i6e<#oG7stWG;STlQSA38!4w~
z3fwm=Na;p^D=55k@_R@4!LT=E(c(nD&8r-6O_;~)0c9x82zM9b4Q1@Qgjqk8p)K@{
zcK3AGBaS(kU`DqS7yE$=&M+7`WhXH9jFNO9`v*QtIaJs+;+mMNJC&Z8+14tW6_(oX
z(yMp>G?90}aC_5kKK5E+LFE1gZd^6s<@360Hi!Y%5J8nXe&u1I?-_5za#YY8N2io~
z)d6Pb9A<3nGbM^mLOZxeCnBdj&>VU~+1Mc>wzZnqD$ug>jHkb)X}j!B;NxhcUt~>v
z(%iJEn2uq{z?DZ-4o!wy@AWID@3@mSA8wR2bf#TEmU@&Y3{wM7g6EWRrwA4qQ>PUk
z#mD8H|03d$wnSxHxWE;p>Ncycy(|wRkQ)4Z8pLFPlU0T4+8T_bVCjIpvpmQe=!?D-
z6hgZ<kcvb%u7ujQS2x~afIO2vhYJZG5kRRwN5s}i%4{t>FIu&I%SkgPKEF8dj#lON
z(7`duN{&<zl7C@`q$JOtnrfe8ILA;I##&J_N&%Fy29dy7806GDm-5T?SptTI(mDq;
zcDBwRHt6@{Datto5owch(Qbh;%YMV;hnhPS=X5=7SnQN2aZOurJgGNagzUp$b(!LZ
z>Q@~nOMl(JXj*jar!?fu3+B&+@XnbY{$`_o+Q$CoF`g?Fl|#K^V#e7dx4>c9L#(ge
z9RZ?he#Djbs<~Ae%4@Vry)%dBj=fmz4EWB5FSq<4?*_=p%jYiGL@lWxq96zDI2uw(
z%zGJhR(P=ZMBc=HN^Sx13>@y@XoFWtaipVNh#B;d<uMJ9eG4^=Y^6Anh=_Y>?L7F8
z6w2Jvt+Ti35do9N><QP2H-5AIF^XVOpM4bKwXk5ba<jz0e6=p8?{if=*{=1gT`JcN
zy*y5F!#aBI)x;js7!oGcg;^%@k4XxCgA?vLz@(FQH35%n`d|;#RTx1kPWy6KK&~MA
zqz!W01RYr2X*lA8iV|xGeEExIVmlw_^@+UPQ-bRO<#h|)W*wVxF@0H7rmU+yJssiS
zHm|YWVcyz$hPh~|2(>Jqh!ewVXbv?v3~a~PY^VI#70y~7uhFuj{T2(>1Z}n9=S~tg
zag~^B{YLWWt@Rd~Tn4Oex2nVkP$KB7x(Xx1wlOMix@6f)@|yvh(<D`4M#E4^L8hOo
zv)m7YBa@`!7)bYa49D=z()%O3zyH|O(P(&u#vNkmGY#}Ry<A%%{X@5yjDE*~nVg%o
z*HGJCSynsw1|=mZx;2v<Jt5U%08r?AB6xpU0?$%hWY_h@zLj??6@e<VO1L_34E#&N
z!Zai)yC;GUz5{65px0_=ki&iE9cfCaGr5+aft3d3tB!b+_Urjt*GyD1J>puJ?>s^t
zrF5E9*fYD3k)B@buYR(O7BN=6*r^bo%Eu2@Y2+IsQ8j4oA*F7yzy!hV^*~owCtKxp
a2K(3rHj$^VY%~U(889)lFep3k9Q`kU29J{f

diff --git a/apps/meteor/tests/e2e/feature-preview.spec.ts b/apps/meteor/tests/e2e/feature-preview.spec.ts
index a12a8882901..7f721111ffd 100644
--- a/apps/meteor/tests/e2e/feature-preview.spec.ts
+++ b/apps/meteor/tests/e2e/feature-preview.spec.ts
@@ -94,7 +94,6 @@ test.describe.serial('feature preview', () => {
 		test('should be able to toggle "Enhanced navigation" feature', async ({ page }) => {
 			await page.goto('/account/feature-preview');
 
-			await poAccountProfile.getAccordionItemByName('Navigation').click();
 			const newNavigationCheckbox = poAccountProfile.getCheckboxByLabelText('Enhanced navigation');
 			await expect(newNavigationCheckbox).toBeChecked();
 			await newNavigationCheckbox.click();
diff --git a/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts b/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
index ecba4a34e46..ba0a2b863d6 100644
--- a/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
+++ b/apps/meteor/tests/e2e/page-objects/omnichannel-units.ts
@@ -51,13 +51,13 @@ export class OmnichannelUnits extends OmnichannelAdministration {
 		await this.inputDepartments.click();
 		await this.inputDepartments.fill(name);
 		await this.findOption(name).click();
-		await this.contextualBar.click({ position: { x: 0, y: 0 } });
+		await this.inputDepartments.click();
 	}
 
 	async selectMonitor(option: string) {
 		await this.inputMonitors.click();
 		await this.findOption(option).click();
-		await this.contextualBar.click({ position: { x: 0, y: 0 } });
+		await this.inputMonitors.click();
 	}
 
 	async selectVisibility(option: string) {
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 84edf77fc2b..6c1bf842754 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -1266,8 +1266,6 @@
   "Contacts": "Contacts",
   "Contains_Security_Fixes": "Contains Security Fixes",
   "Content": "Content",
-  "Contextualbar_resizable": "Resizable contextual bar",
-  "Contextualbar_resizable_description": "Adjust the size of the contextual bar by clicking and dragging the edge, giving you instant customization and flexibility.",
   "Continue": "Continue",
   "Continue_Adding": "Continue Adding?",
   "Continuous_sound_notifications_for_new_livechat_room": "Continuous sound notifications for new omnichannel room",
diff --git a/packages/i18n/src/locales/nb.i18n.json b/packages/i18n/src/locales/nb.i18n.json
index 2e5d78b0fc2..1d323d2bfcf 100644
--- a/packages/i18n/src/locales/nb.i18n.json
+++ b/packages/i18n/src/locales/nb.i18n.json
@@ -1169,8 +1169,6 @@
   "Contacts": "Kontakter",
   "Contains_Security_Fixes": "Inneholder sikkerhetsoppdateringer",
   "Content": "Innhold",
-  "Contextualbar_resizable": "Kontekstlinje som kan endre størrelse",
-  "Contextualbar_resizable_description": "Juster størrelsen på kontekstlinjen ved å klikke og dra kanten, noe som gir deg umiddelbar tilpasning og fleksibilitet.",
   "Continue": "Fortsette",
   "Continue_Adding": "Fortsette å legge til?",
   "Continuous_sound_notifications_for_new_livechat_room": "Kontinuerlige lydvarsler for nytt omnikanalrom",
diff --git a/packages/i18n/src/locales/nn.i18n.json b/packages/i18n/src/locales/nn.i18n.json
index dacb35c9600..48c68cee37f 100644
--- a/packages/i18n/src/locales/nn.i18n.json
+++ b/packages/i18n/src/locales/nn.i18n.json
@@ -1133,8 +1133,6 @@
   "Contacts": "Kontakter",
   "Contains_Security_Fixes": "Inneholder sikkerhetsoppdateringer",
   "Content": "Innhold",
-  "Contextualbar_resizable": "Kontekstlinje som kan endre størrelse",
-  "Contextualbar_resizable_description": "Juster størrelsen på kontekstlinjen ved å klikke og dra kanten, noe som gir deg umiddelbar tilpasning og fleksibilitet.",
   "Continue": "Fortsette",
   "Continue_Adding": "Fortsette å legge til?",
   "Continuous_sound_notifications_for_new_livechat_room": "Kontinuerlige lydvarsler for nytt livechat-rom",
diff --git a/packages/i18n/src/locales/pt-BR.i18n.json b/packages/i18n/src/locales/pt-BR.i18n.json
index f858eb16df1..8cf7aaec493 100644
--- a/packages/i18n/src/locales/pt-BR.i18n.json
+++ b/packages/i18n/src/locales/pt-BR.i18n.json
@@ -1159,8 +1159,6 @@
   "Contacts": "Contatos",
   "Contains_Security_Fixes": "Contém correções de segurança",
   "Content": "Conteúdo",
-  "Contextualbar_resizable": "Barra de contexto redimensionável",
-  "Contextualbar_resizable_description": "Ajuste o tamanho da barra de contexto clicando e arrastando a borda, proporcionando personalização e flexibilidade instantâneas.",
   "Continue": "Continuar",
   "Continue_Adding": "Continuar adicionando?",
   "Continuous_sound_notifications_for_new_livechat_room": "Notificações sonoras contínuas para nova sala de omnichannel",
diff --git a/packages/i18n/src/locales/sv.i18n.json b/packages/i18n/src/locales/sv.i18n.json
index e1ad735d0ea..0add05f6847 100644
--- a/packages/i18n/src/locales/sv.i18n.json
+++ b/packages/i18n/src/locales/sv.i18n.json
@@ -1160,8 +1160,6 @@
   "Contacts": "Kontakter",
   "Contains_Security_Fixes": "Innehåller säkerhetsfixar",
   "Content": "Innehåll",
-  "Contextualbar_resizable": "Justerbar storlek kontextuell menyfält/panel",
-  "Contextualbar_resizable_description": "Justera storleken på det kontextuella fältet genom att klicka och dra i kanten, vilket ger dig omedelbar anpassning och flexibilitet.",
   "Continue": "Fortsätt",
   "Continue_Adding": "Fortsätta lägga till?",
   "Continuous_sound_notifications_for_new_livechat_room": "Kontinuerliga ljudmeddelanden för nytt Omnichannel-rum",
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx
index 5e90e1ffcb7..1b730f9c0f7 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarDialog.tsx
@@ -4,7 +4,6 @@ import { useCallback, useRef } from 'react';
 import type { AriaDialogProps } from 'react-aria';
 import { FocusScope, useDialog } from 'react-aria';
 
-import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from '../FeaturePreview';
 import Contextualbar from './Contextualbar';
 import ContextualbarResizable from './ContextualbarResizable';
 
@@ -39,16 +38,9 @@ const ContextualbarDialog = ({ onClose, ...props }: ContextualbarDialogProps) =>
 
 	return (
 		<FocusScope autoFocus restoreFocus>
-			<FeaturePreview feature='contextualbarResizable'>
-				<FeaturePreviewOn>
-					<ContextualbarResizable defaultWidth={contextualBar}>
-						<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
-					</ContextualbarResizable>
-				</FeaturePreviewOn>
-				<FeaturePreviewOff>
-					<Contextualbar ref={callbackRef} width={contextualBar} position={position} {...dialogProps} {...props} />
-				</FeaturePreviewOff>
-			</FeaturePreview>
+			<ContextualbarResizable defaultWidth={contextualBar}>
+				<Contextualbar ref={callbackRef} width='100%' position={position} {...dialogProps} {...props} />
+			</ContextualbarResizable>
 		</FocusScope>
 	);
 };
diff --git a/packages/ui-client/src/hooks/useFeaturePreviewList.ts b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
index 2c96a265092..e387b2de836 100644
--- a/packages/ui-client/src/hooks/useFeaturePreviewList.ts
+++ b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
@@ -1,6 +1,6 @@
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 
-export type FeaturesAvailable = 'contextualbarResizable' | 'newNavigation' | 'secondarySidebar' | 'expandableMessageComposer';
+export type FeaturesAvailable = 'newNavigation' | 'secondarySidebar' | 'expandableMessageComposer';
 
 export type FeaturePreviewProps = {
 	name: FeaturesAvailable;
@@ -19,15 +19,6 @@ export type FeaturePreviewProps = {
 
 // TODO: Move the features preview array to another directory to be accessed from both BE and FE.
 export const defaultFeaturesPreview: FeaturePreviewProps[] = [
-	{
-		name: 'contextualbarResizable',
-		i18n: 'Contextualbar_resizable',
-		description: 'Contextualbar_resizable_description',
-		group: 'Navigation',
-		imageUrl: 'images/featurePreview/resizable-contextual-bar.png',
-		value: false,
-		enabled: true,
-	},
 	{
 		name: 'newNavigation',
 		i18n: 'New_navigation',
diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap b/packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap
index ca0021e33c8..827b7c3cf8f 100644
--- a/packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap
+++ b/packages/ui-voip/src/views/CallHistoryContextualbar/__snapshots__/CallHistoryContextualbar.spec.tsx.snap
@@ -8,313 +8,355 @@ exports[`renders Default without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-zsa0ng"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+          class="rcx-box rcx-box--full rcx-css-zsa0ng"
         >
-          <i
-            aria-hidden="true"
-            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-          >
-            
-          </i>
           <div
-            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-            id="contextualbarTitle"
-          >
-            Call info
-          </div>
-          <div
-            class="rcx-button-group rcx-button-group--align-start"
-            role="group"
+            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Options"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-6bg1ps"
-              id="react-aria-:r1:"
-              title="Options"
-              type="button"
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-4pvxx3"
-              >
-                
-              </i>
-            </button>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
+              
+            </i>
+            <div
+              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+              id="contextualbarTitle"
+            >
+              Call info
+            </div>
+            <div
+              class="rcx-button-group rcx-button-group--align-start"
+              role="group"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Options"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-6bg1ps"
+                id="react-aria-:r1:"
+                title="Options"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
-      >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-ilfe77"
-                    role="button"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1rtu0k9"
+                      class="rcx-box rcx-box--full rcx-css-ilfe77"
+                      role="button"
                     >
-                      <figure
-                        class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x28"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1rtu0k9"
                       >
-                        <img
-                          alt=""
-                          class="rcx-avatar__element rcx-avatar__element--x28"
-                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
-                        />
-                      </figure>
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full rcx-css-1rtu0k9"
-                    >
-                      <svg
-                        class="rcx-status-bullet rcx-status-bullet--loading undefined rcx-status-bullet--small"
-                        fill="none"
-                        height="12"
-                        viewBox="0 0 12 12"
-                        width="12"
-                        xmlns="http://www.w3.org/2000/svg"
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x28"
+                        >
+                          <img
+                            alt=""
+                            class="rcx-avatar__element rcx-avatar__element--x28"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                          />
+                        </figure>
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1rtu0k9"
                       >
-                        <circle
-                          class="rcx-status-bullet rcx-status-bullet--loading"
-                          cx="6"
-                          cy="6"
-                          r="5"
-                          stroke-dasharray="2 2"
-                          stroke-width="2"
-                        />
-                      </svg>
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full"
-                    >
-                      john.doe
+                        <svg
+                          class="rcx-status-bullet rcx-status-bullet--loading undefined rcx-status-bullet--small"
+                          fill="none"
+                          height="12"
+                          viewBox="0 0 12 12"
+                          width="12"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <circle
+                            class="rcx-status-bullet rcx-status-bullet--loading"
+                            cx="6"
+                            cy="6"
+                            r="5"
+                            stroke-dasharray="2 2"
+                            stroke-width="2"
+                          />
+                        </svg>
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full"
+                      >
+                        john.doe
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-12j6r2z"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
-                    <i
-                      aria-hidden="true"
-                      class="rcx-box rcx-box--full rcx-icon--name-arrow-down-left rcx-icon rcx-css-1kvwsz1"
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-12j6r2z"
                     >
-                      
-                    </i>
-                    Incoming voice call
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-arrow-down-left rcx-icon rcx-css-1kvwsz1"
+                      >
+                        
+                      </i>
+                      Incoming voice call
+                    </div>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-message-block--width-fixed rcx-message-block"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9bjfe"
+                      class="rcx-box rcx-box--full rcx-message-block--width-fixed rcx-message-block"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-css-1ay6h7v"
+                        class="rcx-box rcx-box--full rcx-css-9bjfe"
                       >
                         <div
-                          class="rcx-box rcx-box--full rcx-css-9rr3cg"
+                          class="rcx-box rcx-box--full rcx-css-1ay6h7v"
                         >
                           <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            class="rcx-box rcx-box--full rcx-css-9rr3cg"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-phone-off rcx-icon rcx-css-1bepdyv"
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
                             >
-                              
-                            </i>
-                          </div>
-                          <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
-                          >
-                            <div>
-                              <strong>
-                                Voice call ended
-                              </strong>
+                              <i
+                                aria-hidden="true"
+                                class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-phone-off rcx-icon rcx-css-1bepdyv"
+                              >
+                                
+                              </i>
+                            </div>
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            >
+                              <div>
+                                <strong>
+                                  Voice call ended
+                                </strong>
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="rcx-box rcx-box--full rcx-css-mczqkb"
-                      >
                         <div
-                          class="rcx-box rcx-box--full rcx-css-9rr3cg"
+                          class="rcx-box rcx-box--full rcx-css-mczqkb"
                         >
                           <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            class="rcx-box rcx-box--full rcx-css-9rr3cg"
                           >
-                            <div>
-                              <strong>
-                                01:40
-                              </strong>
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            >
+                              <div>
+                                <strong>
+                                  01:40
+                                </strong>
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-m8ijko"
+                    >
+                      Friday, February 7, 2025 at 12:00:00 PM
+                    </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-m8ijko"
-                  >
-                    Friday, February 7, 2025 at 12:00:00 PM
-                  </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                  >
-                    Call ID
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
-                    1234567890
-                  </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                  >
-                    Voice call extension
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                    >
+                      Call ID
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    >
+                      1234567890
+                    </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
-                    0000
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                    >
+                      Voice call extension
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    >
+                      0000
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="rcx-box rcx-box--full rcx-css-m843eh"
-      >
         <div
-          class="rcx-button-group rcx-button-group--stretch rcx-button-group--align-start"
-          role="group"
+          class="rcx-box rcx-box--full rcx-css-m843eh"
         >
-          <button
-            class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
-            type="button"
+          <div
+            class="rcx-button-group rcx-button-group--stretch rcx-button-group--align-start"
+            role="group"
           >
-            <span
-              class="rcx-button--content"
+            <button
+              class="rcx-box rcx-box--full rcx-button rcx-button-group__item"
+              type="button"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-balloon rcx-icon rcx-css-i1uktf"
+              <span
+                class="rcx-button--content"
               >
-                
-              </i>
-              Direct message
-            </span>
-          </button>
-          <button
-            class="rcx-box rcx-box--full rcx-button--success rcx-button rcx-button-group__item"
-            type="button"
-          >
-            <span
-              class="rcx-button--content"
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-balloon rcx-icon rcx-css-i1uktf"
+                >
+                  
+                </i>
+                Direct message
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--success rcx-button rcx-button-group__item"
+              type="button"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-i1uktf"
+              <span
+                class="rcx-button--content"
               >
-                
-              </i>
-              Call
-            </span>
-          </button>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-i1uktf"
+                >
+                  
+                </i>
+                Call
+              </span>
+            </button>
+          </div>
         </div>
       </div>
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
+        </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
+      </div>
     </div>
     <span
       data-focus-scope-end="true"
@@ -332,267 +374,309 @@ exports[`renders ExternalContact without crashing 1`] = `
       hidden=""
     />
     <div
-      aria-labelledby="contextualbarTitle"
-      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-20qf5w"
-      role="dialog"
-      tabindex="-1"
+      style="position: relative; user-select: auto; width: 380px; height: 100%; max-width: 50%; min-width: 380px; min-height: 100%; box-sizing: border-box; flex-shrink: 0;"
     >
       <div
-        class="rcx-box rcx-box--full rcx-css-zsa0ng"
+        aria-labelledby="contextualbarTitle"
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-ohm8rb"
+        role="dialog"
+        tabindex="-1"
       >
         <div
-          class="rcx-box rcx-box--full rcx-css-1sl6k6j"
+          class="rcx-box rcx-box--full rcx-css-zsa0ng"
         >
-          <i
-            aria-hidden="true"
-            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
-          >
-            
-          </i>
           <div
-            class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
-            id="contextualbarTitle"
+            class="rcx-box rcx-box--full rcx-css-1sl6k6j"
           >
-            Call info
-          </div>
-          <div
-            class="rcx-button-group rcx-button-group--align-start"
-            role="group"
-          >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Options"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-6bg1ps"
-              id="react-aria-:r4:"
-              title="Options"
-              type="button"
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon rcx-css-x7bl3q rcx-css-g86psg"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-4pvxx3"
-              >
-                
-              </i>
-            </button>
-            <button
-              aria-label="Close"
-              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
-              data-qa="ContextualbarActionClose"
-              type="button"
+              
+            </i>
+            <div
+              class="rcx-box rcx-box--full rcx-css-x7bl3q rcx-css-1to6ka7"
+              id="contextualbarTitle"
+            >
+              Call info
+            </div>
+            <div
+              class="rcx-button-group rcx-button-group--align-start"
+              role="group"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Options"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-6bg1ps"
+                id="react-aria-:r4:"
+                title="Options"
+                type="button"
               >
-                
-              </i>
-            </button>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+              <button
+                aria-label="Close"
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-1yzvz7u"
+                data-qa="ContextualbarActionClose"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="rcx-box rcx-box--full rcx-css-1svuzur"
-      >
         <div
-          class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
-          data-overlayscrollbars="host"
+          class="rcx-box rcx-box--full rcx-css-1svuzur"
         >
           <div
-            class="os-size-observer"
+            class="rcx-box rcx-box--full rcx-css-vlo1oi rcx-css-1cb6i7s"
+            data-overlayscrollbars="host"
           >
             <div
-              class="os-size-observer-listener"
-            />
-          </div>
-          <div
-            class=""
-            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
-            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
-            tabindex="-1"
-          >
+              class="os-size-observer"
+            >
+              <div
+                class="os-size-observer-listener"
+              />
+            </div>
             <div
-              class="rcx-box rcx-box--full rcx-css-iag4sp"
+              class=""
+              data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+              style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+              tabindex="-1"
             >
               <div
-                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+                class="rcx-box rcx-box--full rcx-css-iag4sp"
               >
                 <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  class="rcx-box rcx-box--full rcx-css-15qq8ie"
                 >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-ilfe77"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1rtu0k9"
+                      class="rcx-box rcx-box--full rcx-css-ilfe77"
                     >
-                      <i
-                        aria-hidden="true"
-                        class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-user rcx-icon rcx-css-1bepdyv"
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1rtu0k9"
                       >
-                        
-                      </i>
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-user rcx-icon rcx-css-1bepdyv"
+                        >
+                          
+                        </i>
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1rtu0k9"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-1bepdyv"
+                        >
+                          
+                        </i>
+                      </div>
+                      <div
+                        class="rcx-box rcx-box--full"
+                      >
+                        +1234567890
+                      </div>
                     </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                  >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-1rtu0k9"
+                      class="rcx-box rcx-box--full rcx-css-12j6r2z"
                     >
                       <i
                         aria-hidden="true"
-                        class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-1bepdyv"
+                        class="rcx-box rcx-box--full rcx-icon--name-arrow-down-left rcx-icon rcx-css-1kvwsz1"
                       >
-                        
+                        
                       </i>
-                    </div>
-                    <div
-                      class="rcx-box rcx-box--full"
-                    >
-                      +1234567890
+                      Incoming voice call
                     </div>
                   </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
                   <div
-                    class="rcx-box rcx-box--full rcx-css-12j6r2z"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="rcx-box rcx-box--full rcx-icon--name-arrow-down-left rcx-icon rcx-css-1kvwsz1"
-                    >
-                      
-                    </i>
-                    Incoming voice call
-                  </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-message-block--width-fixed rcx-message-block"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
                     <div
-                      class="rcx-box rcx-box--full rcx-css-9bjfe"
+                      class="rcx-box rcx-box--full rcx-message-block--width-fixed rcx-message-block"
                     >
                       <div
-                        class="rcx-box rcx-box--full rcx-css-1ay6h7v"
+                        class="rcx-box rcx-box--full rcx-css-9bjfe"
                       >
                         <div
-                          class="rcx-box rcx-box--full rcx-css-9rr3cg"
+                          class="rcx-box rcx-box--full rcx-css-1ay6h7v"
                         >
                           <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            class="rcx-box rcx-box--full rcx-css-9rr3cg"
                           >
-                            <i
-                              aria-hidden="true"
-                              class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-phone-off rcx-icon rcx-css-1bepdyv"
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
                             >
-                              
-                            </i>
-                          </div>
-                          <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
-                          >
-                            <div>
-                              <strong>
-                                Voice call ended
-                              </strong>
+                              <i
+                                aria-hidden="true"
+                                class="rcx-box rcx-box--full rcx-framed-icon--neutral rcx-framed-icon rcx-icon--name-phone-off rcx-icon rcx-css-1bepdyv"
+                              >
+                                
+                              </i>
+                            </div>
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            >
+                              <div>
+                                <strong>
+                                  Voice call ended
+                                </strong>
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="rcx-box rcx-box--full rcx-css-mczqkb"
-                      >
                         <div
-                          class="rcx-box rcx-box--full rcx-css-9rr3cg"
+                          class="rcx-box rcx-box--full rcx-css-mczqkb"
                         >
                           <div
-                            class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            class="rcx-box rcx-box--full rcx-css-9rr3cg"
                           >
-                            <div>
-                              <strong>
-                                01:40
-                              </strong>
+                            <div
+                              class="rcx-box rcx-box--full rcx-css-1eogw2f"
+                            >
+                              <div>
+                                <strong>
+                                  01:40
+                                </strong>
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-m8ijko"
+                    >
+                      Friday, February 7, 2025 at 12:00:00 PM
+                    </div>
                   </div>
                   <div
-                    class="rcx-box rcx-box--full rcx-css-m8ijko"
-                  >
-                    Friday, February 7, 2025 at 12:00:00 PM
-                  </div>
-                </div>
-                <div
-                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
-                >
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-1n8o8rn"
-                  >
-                    Call ID
-                  </div>
-                  <div
-                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    class="rcx-box rcx-box--full rcx-css-6jv9ad"
                   >
-                    1234567890
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-1n8o8rn"
+                    >
+                      Call ID
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-faoni4"
+                    >
+                      1234567890
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
-          </div>
-          <div
-            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
-            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
-          >
             <div
-              class="os-scrollbar-track"
+              class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+              style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
             >
               <div
-                class="os-scrollbar-handle"
-              />
+                class="os-scrollbar-track"
+              >
+                <div
+                  class="os-scrollbar-handle"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="rcx-box rcx-box--full rcx-css-m843eh"
-      >
         <div
-          class="rcx-button-group rcx-button-group--stretch rcx-button-group--align-start"
-          role="group"
+          class="rcx-box rcx-box--full rcx-css-m843eh"
         >
-          <button
-            class="rcx-box rcx-box--full rcx-button--success rcx-button rcx-button-group__item"
-            type="button"
+          <div
+            class="rcx-button-group rcx-button-group--stretch rcx-button-group--align-start"
+            role="group"
           >
-            <span
-              class="rcx-button--content"
+            <button
+              class="rcx-box rcx-box--full rcx-button--success rcx-button rcx-button-group__item"
+              type="button"
             >
-              <i
-                aria-hidden="true"
-                class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-i1uktf"
+              <span
+                class="rcx-button--content"
               >
-                
-              </i>
-              Call
-            </span>
-          </button>
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-phone rcx-icon rcx-css-i1uktf"
+                >
+                  
+                </i>
+                Call
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; top: -5px; left: 0px; cursor: row-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; cursor: col-resize; right: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 3px; height: 100%; top: 0px; left: 0px; cursor: col-resize; z-index: 99;"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-r98g7d"
+          />
         </div>
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; top: -10px; cursor: ne-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; right: -10px; bottom: -10px; cursor: se-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; bottom: -10px; cursor: sw-resize;"
+        />
+        <div
+          class=""
+          style="position: absolute; user-select: none; width: 20px; height: 20px; left: -10px; top: -10px; cursor: nw-resize;"
+        />
       </div>
     </div>
     <span