Make stories accessible with collapsed left pane

stylesheets/_modules.scss

@@ -2481,6 +2481,8 @@ button.ConversationDetails__action-button {
   align-items: center;
 
   .module-left-pane--width-narrow & {
+    flex-direction: column;
+    height: auto;
     justify-content: center;
   }
 
@@ -2499,7 +2501,9 @@ button.ConversationDetails__action-button {
       position: relative;
 
       .module-left-pane--width-narrow & {
-        display: none;
+        margin-bottom: 28px;
+        margin-right: 0;
+        margin-top: 16px;
       }
     }
 
@@ -2517,6 +2521,10 @@ button.ConversationDetails__action-button {
 
   &__icon-container {
     display: flex;
+
+    .module-left-pane--width-narrow & {
+      flex-direction: column-reverse;
+    }
   }
 
   &__compose-icon {
@@ -2616,7 +2624,9 @@ button.ConversationDetails__action-button {
     width: 32px;
 
     .module-left-pane--width-narrow & {
-      display: none;
+      margin-right: 0;
+      margin-top: 28px;
+      margin-bottom: 28px;
     }
 
     @include light-theme {

ts/components/ContextMenu.tsx

@@ -54,17 +54,7 @@ let closeCurrentOpenContextMenu: undefined | (() => unknown);
 // right under the mouse cursor.
 function generateVirtualElement(x: number, y: number): VirtualElement {
   return {
-    getBoundingClientRect: () => ({
-      bottom: y,
-      height: 0,
-      left: x,
-      right: x,
-      toJSON: () => ({ x, y }),
-      top: y,
-      width: 0,
-      x,
-      y,
-    }),
+    getBoundingClientRect: () => new DOMRect(x, y),
   };
 }
 

ts/components/MainHeader.tsx

@@ -1,6 +1,7 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import type { VirtualElement } from '@popperjs/core';
 import React from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 import { createPortal } from 'react-dom';
@@ -40,7 +41,19 @@ type StateType = {
   showingAvatarPopup: boolean;
   popperRoot: HTMLDivElement | null;
   outsideClickDestructor?: () => void;
+  virtualElement: {
+    getBoundingClientRect: () => DOMRect;
   };
+};
+
+// https://popper.js.org/docs/v2/virtual-elements/
+// Generating a virtual element here so that we can make the menu pop up
+// right under the mouse cursor.
+function generateVirtualElement(x: number, y: number): VirtualElement {
+  return {
+    getBoundingClientRect: () => new DOMRect(x, y),
+  };
+}
 
 export class MainHeader extends React.Component<PropsType, StateType> {
   public containerRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -51,10 +64,11 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     this.state = {
       showingAvatarPopup: false,
       popperRoot: null,
+      virtualElement: generateVirtualElement(0, 0),
     };
   }
 
-  public showAvatarPopup = (): void => {
+  public showAvatarPopup = (ev: React.MouseEvent): void => {
     const popperRoot = document.createElement('div');
     document.body.appendChild(popperRoot);
 
@@ -79,6 +93,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
       showingAvatarPopup: true,
       popperRoot,
       outsideClickDestructor,
+      virtualElement: generateVirtualElement(ev.clientX, ev.clientY),
     });
   };
 
@@ -187,7 +202,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
           </Reference>
           {showingAvatarPopup && popperRoot
             ? createPortal(
-                <Popper placement="bottom-end">
+                <Popper referenceElement={this.state.virtualElement}>
                   {({ ref, style }) => (
                     <AvatarPopup
                       acceptedMessageRequest