From 35a54cdc021399137049f152e51becdd77c6a322 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Tue, 12 Oct 2021 18:59:08 -0500
Subject: [PATCH] Introduce a new design for the left pane

---
 background.html                               |  29 +-
 images/icons/v2/warning-outline-24.svg        |   1 +
 stylesheets/_conversation.scss                |   6 -
 stylesheets/_global.scss                      |   4 +
 stylesheets/_index.scss                       |  46 +--
 stylesheets/_modules.scss                     | 386 +++++++++---------
 stylesheets/_variables.scss                   |   5 +-
 stylesheets/components/Inbox.scss             |   8 +
 stylesheets/components/LeftPaneDialog.scss    |  55 ++-
 .../SearchResultsLoadingFakeHeader.scss       |   2 +-
 .../SearchResultsLoadingFakeRow.scss          |  27 +-
 stylesheets/manifest.scss                     |   1 +
 test/index.html                               |  28 +-
 ts/components/Avatar.tsx                      |   1 +
 ts/components/ConversationList.stories.tsx    |   5 +
 ts/components/ConversationList.tsx            |   9 +-
 ts/components/DialogExpiredBuild.stories.tsx  |  23 +-
 ts/components/DialogExpiredBuild.tsx          |  23 +-
 ts/components/DialogNetworkStatus.stories.tsx |  79 +++-
 ts/components/DialogNetworkStatus.tsx         |   5 +
 ts/components/DialogRelink.stories.tsx        |  21 +-
 ts/components/DialogRelink.tsx                |   4 +
 ts/components/DialogUpdate.stories.tsx        |  90 +++-
 ts/components/DialogUpdate.tsx                |  18 +-
 ts/components/Inbox.tsx                       |   2 +-
 ts/components/LeftPane.stories.tsx            |  23 ++
 ts/components/LeftPane.tsx                    | 142 ++++++-
 ts/components/LeftPaneDialog.tsx              |  58 ++-
 ts/components/MainHeader.tsx                  |   8 +
 ts/components/Tooltip.tsx                     |   8 +-
 ts/components/_util.ts                        |  11 +
 .../conversation/Message.stories.tsx          |   2 +
 ts/components/conversation/Message.tsx        |  20 +-
 ts/components/conversation/MessageDetail.tsx  |   2 +
 ts/components/conversation/Quote.stories.tsx  |   2 +
 .../conversation/Timeline.stories.tsx         |   4 +
 ts/components/conversation/Timeline.tsx       |  77 +++-
 .../conversation/TimelineItem.stories.tsx     |   2 +
 ts/components/conversation/TimelineItem.tsx   |   5 +-
 ts/components/conversation/Timestamp.tsx      |   7 +-
 .../BaseConversationListItem.tsx              |  76 ++--
 .../conversationList/ConversationListItem.tsx |   3 +-
 .../SearchResultsLoadingFakeRow.tsx           |   5 +-
 ts/components/leftPane/LeftPaneHelper.tsx     |   4 +
 .../leftPane/LeftPaneInboxHelper.tsx          |  22 +
 .../leftPane/LeftPaneSearchHelper.tsx         |   2 +-
 ts/state/ducks/items.ts                       |  11 +
 ts/state/selectors/items.ts                   |  11 +
 ts/state/selectors/search.ts                  |   5 +
 ts/state/smart/ExpiredBuildDialog.tsx         |   8 +-
 ts/state/smart/LeftPane.tsx                   |  39 +-
 ts/state/smart/NetworkStatus.tsx              |   8 +-
 ts/state/smart/RelinkDialog.tsx               |   8 +-
 ts/state/smart/Timeline.tsx                   |   4 +
 ts/state/smart/UpdateDialog.tsx               |   8 +-
 .../helpers/FakeLeftPaneContainer.tsx         |  29 ++
 ts/test-both/state/selectors/items_test.ts    |  27 ++
 ts/test-both/state/selectors/search_test.ts   |  22 +
 .../leftPane/LeftPaneInboxHelper_test.tsx     | 128 ++++--
 ts/types/Storage.d.ts                         |   1 +
 ts/types/StorageUIKeys.ts                     |   1 +
 ts/util/lint/exceptions.json                  |  38 +-
 ts/views/inbox_view.ts                        |  72 ++--
 63 files changed, 1205 insertions(+), 576 deletions(-)
 create mode 100644 images/icons/v2/warning-outline-24.svg
 create mode 100644 stylesheets/components/Inbox.scss
 create mode 100644 ts/test-both/helpers/FakeLeftPaneContainer.tsx

diff --git a/background.html b/background.html
index dec14ed2b..4a6316484 100644
--- a/background.html
+++ b/background.html
@@ -60,26 +60,19 @@
     <script type="text/x-tmpl-mustache" id="two-column">
       <div class='module-title-bar-drag-area'></div>
 
-      <div class='inbox-container'>
-        <div class='gutter'>
-          <div class='left-pane-placeholder'></div>
+      <div class='left-pane-placeholder'></div>
+
+      <div class='conversation-stack'>
+        <div class='no-conversation-open'>
+          <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
+          <h3>{{ welcomeToSignal }}</h3>
+          <p class="whats-new-placeholder"></p>
+          <p>{{ selectAContact }}</p>
         </div>
-        <div class='conversation-stack'>
-          <div class='conversation placeholder'>
-            <div class='conversation-header'></div>
-            <div class='container'>
-              <div class='content'>
-                <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
-                <h3>{{ welcomeToSignal }}</h3>
-                <p class="whats-new-placeholder"></p>
-                <p>{{ selectAContact }}</p>
-              </div>
-            </div>
-          </div>
-          <div id="toast"></div>
-        </div>
-        <div class='lightbox-container'></div>
+        <div id="toast"></div>
       </div>
+
+      <div class='lightbox-container'></div>
     </script>
 
     <script type="text/x-tmpl-mustache" id="conversation">
diff --git a/images/icons/v2/warning-outline-24.svg b/images/icons/v2/warning-outline-24.svg
new file mode 100644
index 000000000..6df64e2f4
--- /dev/null
+++ b/images/icons/v2/warning-outline-24.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m10.75 8h2.5l-.5 6.5h-1.5zm2.75 9.5a1.5 1.5 0 1 0 -1.5 1.5 1.5 1.5 0 0 0 1.5-1.5zm-1.5-13.23-9.4 16.23h18.8zm0-2.27a.9.9 0 0 1 .75.53l10.5 18.17c.41.72.07 1.3-.75 1.3h-21c-.83 0-1.16-.58-.75-1.3l10.5-18.13a.9.9 0 0 1 .75-.57z"/></svg>
\ No newline at end of file
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 7e5e8f746..50181faab 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -14,12 +14,6 @@
 }
 
 .conversation {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-
   @include light-theme {
     background-color: $color-white;
   }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 0a52c2c10..28d0b6774 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -35,6 +35,10 @@ body {
     background-color: $color-gray-95;
     color: $color-gray-05;
   }
+
+  &.is-resizing-left-pane {
+    cursor: col-resize;
+  }
 }
 
 ::-webkit-scrollbar {
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index c89f0c590..6f78e0916 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -7,54 +7,27 @@
 
 .conversation-stack,
 .inbox,
-.inbox-container,
-.gutter {
+.no-conversation-open {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
 
-.inbox {
-  display: flex;
-  flex-direction: column;
-}
-
 .scrollable {
   height: 100%;
   overflow: auto;
 }
 
-.gutter {
-  @include light-theme {
-    background-color: $color-gray-02;
-
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-02;
-    }
-  }
-  @include dark-theme {
-    background-color: $color-gray-80;
-
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-80;
-    }
-  }
-
-  float: left;
-  width: $left-pane-width;
-  user-select: none;
-
-  .content {
-    overflow-y: scroll;
-    max-height: calc(100% - 88px);
-  }
+.no-conversation-open {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
 }
 
-.left-pane-placeholder {
-  height: 100%;
-}
-.left-pane-wrapper {
-  height: 100%;
+.conversation-stack {
+  flex-grow: 1;
 }
 
 .conversation.placeholder {
@@ -62,7 +35,6 @@
   user-select: none;
 
   .container {
-    position: absolute;
     height: 100%;
     width: 100%;
     display: flex;
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index eaa7cb643..c37cd3442 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -78,6 +78,17 @@
   align-items: stretch;
 
   outline: none;
+
+  max-width: 406px;
+
+  .module-timeline--width-wide &,
+  .module-message-detail & {
+    max-width: 75%;
+  }
+
+  .module-timeline--width-medium & {
+    max-width: 480px;
+  }
 }
 
 .module-message--expired {
@@ -102,21 +113,17 @@
   }
 }
 
-// Spec: container < 438px
 .module-message--incoming {
   margin-left: 16px;
-  margin-right: 32px;
+  margin-right: auto;
 }
 .module-message--outgoing {
   float: right;
   margin-right: 16px;
-  margin-left: 32px;
+  margin-left: auto;
 }
 
 .module-message__buttons {
-  position: absolute;
-  top: 0;
-  bottom: 0;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -128,19 +135,31 @@
 }
 
 .module-message__buttons--incoming {
-  left: 100%;
   padding-left: 8px;
+
+  & > * {
+    margin-left: 12px;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
 }
+
 .module-message__buttons--outgoing {
-  right: 100%;
   padding-right: 8px;
   flex-direction: row-reverse;
+
+  & > * {
+    margin-right: 12px;
+    &:first-child {
+      margin-right: 0;
+    }
+  }
 }
 
 .module-message__buttons__download {
   height: 24px;
   width: 24px;
-  display: inline-block;
   cursor: pointer;
   @include light-theme {
     @include color-svg(
@@ -168,7 +187,6 @@
 .module-message__buttons__react {
   height: 24px;
   width: 24px;
-  display: inline-block;
   cursor: pointer;
   @include light-theme {
     @include color-svg(
@@ -196,17 +214,9 @@
   }
 }
 
-.module-message__buttons__download--incoming {
-  margin-left: 12px;
-}
-.module-message__buttons__download--outgoing {
-  margin-right: 12px;
-}
-
 .module-message__buttons__reply {
   height: 24px;
   width: 24px;
-  display: inline-block;
   cursor: pointer;
 
   @include light-theme {
@@ -232,13 +242,6 @@
   }
 }
 
-.module-message__buttons__reply--incoming {
-  margin-left: 12px;
-}
-.module-message__buttons__reply--outgoing {
-  margin-right: 12px;
-}
-
 .module-message__buttons__menu {
   height: 24px;
   width: 24px;
@@ -279,14 +282,6 @@
   }
 }
 
-.module-message__buttons__menu--incoming {
-  margin-left: 12px;
-}
-
-.module_message__buttons__menu--outgoing {
-  margin-right: 12px;
-}
-
 .module-message__error-container {
   min-width: 28px;
   position: relative;
@@ -3278,8 +3273,8 @@ button.module-conversation-details__action-button {
   height: calc(#{$header-height} + var(--title-bar-drag-area-height));
   width: 100%;
 
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: 24px;
+  padding-right: 24px;
   padding-top: var(--title-bar-drag-area-height);
 
   display: flex;
@@ -3311,6 +3306,10 @@ button.module-conversation-details__action-button {
       top: 0;
       right: 0;
     }
+
+    .module-left-pane--width-narrow & {
+      display: none;
+    }
   }
 
   &__search {
@@ -3459,6 +3458,10 @@ button.module-conversation-details__action-button {
         @include color-svg('../images/icons/v2/x-24.svg', $color-gray-25);
       }
     }
+
+    .module-left-pane--width-narrow & {
+      display: none;
+    }
   }
 
   &__compose-icon {
@@ -5640,7 +5643,11 @@ button.module-image__border-overlay:focus {
 // Module: conversation list
 
 .module-conversation-list {
+  $normal-row-height: 72px;
+
   @include scrollbar;
+  padding-left: 10px;
+  padding-right: 10px;
 
   &--scroll-behavior {
     &-default {
@@ -5654,11 +5661,15 @@ button.module-image__border-overlay:focus {
 
       align-items: center;
       display: flex;
-      height: 64px;
       justify-content: center;
-      line-height: 64px;
+      border-radius: 10px;
+      height: $normal-row-height;
+      line-height: $normal-row-height;
       text-align: center;
       width: 100%;
+      padding-left: 14px;
+      padding-right: 14px;
+      display: flex;
 
       @include light-theme {
         color: $color-gray-60;
@@ -5721,20 +5732,42 @@ button.module-image__border-overlay:focus {
           background-color: $color-gray-75;
         }
       }
+
+      .module-conversation-list--width-narrow & {
+        justify-content: flex-start;
+
+        &__icon {
+          display: block;
+          width: 48px;
+          height: 48px;
+          padding: 12px;
+        }
+
+        &__text,
+        &__archived-count {
+          display: none;
+        }
+      }
     }
 
     &--contact-or-conversation {
       @include button-reset;
 
       align-items: center;
+      border-radius: 10px;
       cursor: inherit;
       display: flex;
       flex-direction: row;
-      padding-left: 16px;
-      padding-right: 16px;
+      height: $normal-row-height;
+      margin: 2px 0;
+      padding: 8px 14px;
       user-select: none;
       width: 100%;
 
+      .module-conversation-list--width-narrow & {
+        padding-right: 8px;
+      }
+
       &--is-button {
         cursor: pointer;
 
@@ -5745,10 +5778,10 @@ button.module-image__border-overlay:focus {
         &:hover:not(:disabled),
         &:focus:not(:disabled) {
           @include light-theme {
-            background-color: $color-gray-05;
+            background-color: $color-black-alpha-06;
           }
           @include dark-theme {
-            background-color: $color-gray-75;
+            background-color: $color-white-alpha-06;
           }
         }
       }
@@ -5772,59 +5805,40 @@ button.module-image__border-overlay:focus {
         }
       }
 
-      &--has-unread {
-        padding-left: 12px;
-
-        @include light-theme {
-          border-left: 4px solid $color-ultramarine;
-        }
-
-        @include dark-theme {
-          border-left: 4px solid $color-ultramarine-light;
-        }
-      }
-
       &--is-selected {
         @include light-theme {
-          background-color: $color-gray-15;
+          background-color: $color-black-alpha-12;
         }
         @include dark-theme {
-          background-color: $color-gray-65;
+          background-color: $color-white-alpha-12;
         }
       }
 
-      &__avatar-container {
-        position: relative;
-        margin-top: 8px;
-        margin-bottom: 8px;
-      }
-
       &__unread-count {
-        text-align: center;
-
-        padding-left: 3px;
-        padding-right: 3px;
-
-        position: absolute;
-        right: -6px;
-        top: 0px;
+        $size: 18px;
 
         @include font-caption-bold;
-
-        height: 20px;
-        min-width: 20px;
-        line-height: 20px;
         border-radius: 10px;
-
         color: $color-white;
+        height: $size;
+        line-height: $size;
+        margin-left: 10px;
+        margin-top: 2px;
+        min-width: $size;
+        padding-left: 3px;
+        padding-right: 3px;
+        text-align: center;
+        word-break: normal;
+
+        .module-conversation-list--width-narrow & {
+          margin-left: 0;
+        }
 
         @include light-theme {
           background-color: $color-ultramarine;
-          box-shadow: 0px 0px 0px 1px $color-gray-02;
         }
         @include dark-theme {
           background-color: $color-ultramarine-light;
-          box-shadow: 0px 0px 0px 1px $color-gray-90;
         }
       }
 
@@ -5836,6 +5850,10 @@ button.module-image__border-overlay:focus {
         align-items: stretch;
         overflow: hidden;
 
+        .module-conversation-list--width-narrow & {
+          margin-left: 0;
+        }
+
         &--disabled {
           opacity: 0.5;
         }
@@ -5845,6 +5863,10 @@ button.module-image__border-overlay:focus {
           flex-direction: row;
           align-items: center;
 
+          .module-conversation-list--width-narrow & {
+            display: none;
+          }
+
           &__name {
             flex-grow: 1;
             flex-shrink: 1;
@@ -5867,17 +5889,6 @@ button.module-image__border-overlay:focus {
             display: inline-block;
             flex-shrink: 0;
 
-            &--has-unread {
-              @include font-caption-bold;
-
-              @include light-theme {
-                color: $color-gray-90;
-              }
-              @include dark-theme {
-                color: $color-gray-05;
-              }
-            }
-
             &__timestamp {
               flex-shrink: 0;
               margin-left: 6px;
@@ -5894,10 +5905,6 @@ button.module-image__border-overlay:focus {
               @include dark-theme {
                 color: $color-gray-25;
               }
-
-              &--with-unread {
-                @include font-caption-bold;
-              }
             }
           }
         }
@@ -5905,7 +5912,11 @@ button.module-image__border-overlay:focus {
         &__message {
           display: flex;
           flex-direction: row;
-          align-items: center;
+          justify-content: flex-end;
+
+          .module-conversation-list--width-narrow & {
+            align-items: center;
+          }
 
           &__text {
             flex-grow: 1;
@@ -5913,8 +5924,10 @@ button.module-image__border-overlay:focus {
 
             @include font-body-2;
 
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            display: -webkit-box;
             overflow: hidden;
-            white-space: nowrap;
             text-overflow: ellipsis;
             text-align: left;
 
@@ -5925,15 +5938,12 @@ button.module-image__border-overlay:focus {
               color: $color-gray-25;
             }
 
-            &--has-unread {
-              @include font-body-2-bold;
+            .module-conversation-list--width-narrow & {
+              display: none;
+            }
 
-              @include light-theme {
-                color: $color-gray-90;
-              }
-              @include dark-theme {
-                color: $color-gray-05;
-              }
+            &--always-full-size {
+              height: 36px; // two lines
             }
 
             &__muted {
@@ -5977,12 +5987,16 @@ button.module-image__border-overlay:focus {
             &__status-icon {
               flex-shrink: 0;
 
-              margin-top: 2px;
+              margin-top: 4px;
               width: 12px;
               height: 12px;
               display: inline-block;
               margin-left: 6px;
 
+              .module-conversation-list--width-narrow & {
+                display: none;
+              }
+
               @mixin normal-status-icon($icon) {
                 @include light-theme {
                   @include color-svg($icon, $color-gray-25);
@@ -6146,14 +6160,38 @@ button.module-image__border-overlay:focus {
     &--header {
       @include font-body-1-bold;
 
-      display: inline-flex;
       align-items: center;
       padding-left: 16px;
       height: 100%;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      user-select: none;
+      white-space: nowrap;
 
       @include dark-theme {
         color: $color-gray-05;
       }
+
+      .module-conversation-list--width-narrow & {
+        @include rounded-corners;
+        display: block;
+        height: 2px;
+        margin: 19px 0 19px 10px;
+        width: 56px;
+
+        // Hide the text, but keep it for screen readers.
+        color: transparent;
+        overflow: hidden;
+        text-indent: -99999px;
+
+        @include light-theme {
+          background: $color-black-alpha-12;
+        }
+
+        @include dark-theme {
+          background: $color-white-alpha-12;
+        }
+      }
     }
 
     &--spinner {
@@ -6168,12 +6206,36 @@ button.module-image__border-overlay:focus {
 // Module: Left Pane
 
 .module-left-pane {
+  border-right-style: solid;
+  border-right-width: 1px;
   display: inline-flex;
   flex-direction: column;
-
-  width: $left-pane-width;
   height: 100%;
   position: relative;
+
+  @include light-theme {
+    border-color: $color-gray-20;
+    background-color: $color-gray-02;
+
+    ::-webkit-scrollbar-thumb {
+      border: 2px solid $color-gray-02;
+    }
+  }
+
+  @include dark-theme {
+    border-color: $color-gray-65;
+    background-color: $color-gray-80;
+
+    ::-webkit-scrollbar-thumb {
+      border: 2px solid $color-gray-80;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    &:not(.module-left-pane--is-resizing) {
+      transition: width 200ms cubic-bezier(0.17, 0.17, 0, 1);
+    }
+  }
 }
 
 .module-left-pane__empty {
@@ -6184,6 +6246,10 @@ button.module-image__border-overlay:focus {
   padding: 0 32px;
   text-align: center;
 
+  .module-left-pane--width-narrow & {
+    display: none;
+  }
+
   &--composer_icon {
     align-items: center;
     background-color: $color-gray-05;
@@ -6375,6 +6441,16 @@ button.module-image__border-overlay:focus {
   }
 }
 
+.module-left-pane__resize-grab-area {
+  position: absolute;
+  width: 8px;
+  height: 100%;
+  right: -8px;
+  top: 0;
+  z-index: 2;
+  cursor: col-resize;
+}
+
 // Module: Timeline Loading Row
 
 .module-timeline-loading-row {
@@ -8103,7 +8179,7 @@ button.module-image__border-overlay:focus {
 
 .module-avatar-popup {
   min-width: 240px;
-  max-width: $left-pane-width;
+  max-width: 320px;
 
   border-radius: 4px;
   padding-bottom: 4px;
@@ -9124,20 +9200,6 @@ button.module-image__border-overlay:focus {
   }
 }
 
-// All media query widths have 300px added to account for the left pane
-// And have been tweaked for smoother transitions
-
-// To hide in small breakpoints
-.module-message__buttons__download {
-  display: none;
-}
-.module-message__buttons__reply {
-  display: none;
-}
-.module-message__buttons__react {
-  display: none;
-}
-
 // To limit messages with things forcing them wider, like long attachment names
 .module-message__container {
   &--incoming {
@@ -9290,87 +9352,3 @@ button.module-image__border-overlay:focus {
     }
   }
 }
-
-/* Spec: container < 515px */
-@media (min-width: 0px) and (max-width: 834px) {
-  .module-message {
-    // Add 2px for 1px border
-    max-width: 302px;
-  }
-}
-
-/* Spec: container > 514px and container < 606px */
-@media (min-width: 835px) and (max-width: 925px) {
-  .module-message {
-    // Add 2px for 1px border
-    max-width: 360px;
-
-    &--with-avatar {
-      // Remove 36px from avatar
-      max-width: 324px;
-    }
-  }
-
-  // Spec: container < 438px
-  .module-message--incoming {
-    margin-right: auto;
-  }
-  .module-message--outgoing {
-    margin-left: auto;
-  }
-
-  // To hide in small breakpoints
-  .module-message__buttons__download {
-    display: inline-block;
-  }
-  .module-message__buttons__reply {
-    display: inline-block;
-  }
-  .module-message__buttons__react {
-    display: inline-block;
-  }
-
-  // To hide in larger breakpoints
-  .module-message__context__download {
-    display: none;
-  }
-  .module-message__context__reply {
-    display: none;
-  }
-}
-
-// Spec: container > 593px
-@media (min-width: 926px) {
-  .module-message {
-    max-width: 66%;
-  }
-
-  .module-message--incoming {
-    margin-right: auto;
-  }
-  .module-message--outgoing {
-    margin-left: auto;
-  }
-
-  // To hide in small breakpoints
-  .module-message__buttons__download {
-    display: inline-block;
-  }
-  .module-message__buttons__reply {
-    display: inline-block;
-  }
-  .module-message__buttons__react {
-    display: inline-block;
-  }
-
-  // To hide in larger breakpoints
-  .module-message__context__download {
-    display: none;
-  }
-  .module-message__context__reply {
-    display: none;
-  }
-  .module-message__context__react {
-    display: none;
-  }
-}
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index c64e559ba..4f7461846 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -27,6 +27,8 @@ $color-gray-90: #1b1b1b;
 $color-gray-95: #121212;
 $color-black: #000000;
 
+$color-white-alpha-06: rgba($color-white, 0.06);
+$color-white-alpha-12: rgba($color-white, 0.12);
 $color-white-alpha-20: rgba($color-white, 0.2);
 $color-white-alpha-40: rgba($color-white, 0.4);
 $color-white-alpha-60: rgba($color-white, 0.6);
@@ -35,6 +37,8 @@ $color-white-alpha-80: rgba($color-white, 0.8);
 $color-white-alpha-90: rgba($color-white, 0.9);
 
 $color-black-alpha-05: rgba($color-black, 0.05);
+$color-black-alpha-06: rgba($color-black, 0.06);
+$color-black-alpha-12: rgba($color-black, 0.12);
 $color-black-alpha-20: rgba($color-black, 0.2);
 $color-black-alpha-30: rgba($color-black, 0.3);
 $color-black-alpha-40: rgba($color-black, 0.4);
@@ -226,7 +230,6 @@ $color-deep-red: #ff261f;
 
 // -- A few layout variables used cross-file
 
-$left-pane-width: 320px;
 $header-height: 52px;
 
 $ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
diff --git a/stylesheets/components/Inbox.scss b/stylesheets/components/Inbox.scss
new file mode 100644
index 000000000..e9757534d
--- /dev/null
+++ b/stylesheets/components/Inbox.scss
@@ -0,0 +1,8 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.Inbox {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index 594a9034e..f404a34c3 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -11,9 +11,16 @@
 }
 
 .LeftPaneDialog {
+  $default-background-color: $color-ultramarine;
+  $default-text-color: $color-white;
+  $error-background-color: $color-accent-red;
+  $error-text-color: $default-text-color;
+  $warning-background-color: $color-accent-yellow;
+  $warning-text-color: $color-black;
+
   align-items: center;
-  background: $color-ultramarine;
-  color: $color-white;
+  background: $default-background-color;
+  color: $default-text-color;
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -21,6 +28,10 @@
   user-select: none;
   cursor: inherit;
 
+  .module-left-pane--width-narrow & {
+    padding-left: 36px;
+  }
+
   &--clickable {
     cursor: pointer;
   }
@@ -34,6 +45,10 @@
   &__container-close {
     display: flex;
     justify-content: flex-end;
+
+    .module-left-pane--width-narrow & {
+      display: none;
+    }
   }
 
   &__spinner-container {
@@ -74,6 +89,11 @@
     &--update {
       -webkit-mask: url('../images/icons/v2/refresh-24.svg') no-repeat center;
     }
+
+    &--warning {
+      -webkit-mask: url('../images/icons/v2/warning-outline-24.svg') no-repeat
+        center;
+    }
   }
 
   &__action-text {
@@ -110,6 +130,13 @@
   &__message {
     width: 100%;
 
+    .module-left-pane--width-narrow & {
+      display: none;
+    }
+  }
+
+  &__message,
+  &__tooltip {
     h3 {
       @include font-body-1-bold;
       padding: 0px;
@@ -127,12 +154,13 @@
   }
 
   &--error {
-    background-color: $color-accent-red;
+    background-color: $error-background-color;
+    color: $error-text-color;
   }
 
   &--warning {
-    background-color: $color-accent-yellow;
-    color: $color-black;
+    background-color: $warning-background-color;
+    color: $warning-text-color;
 
     a {
       color: $color-black;
@@ -174,4 +202,21 @@
       transition: width 500ms ease-out;
     }
   }
+
+  &__tooltip {
+    --tooltip-background-color: #{$default-background-color};
+    --tooltip-text-color: #{$default-text-color};
+    min-width: 280px;
+    text-align: inherit;
+
+    &--error {
+      --tooltip-text-color: #{$error-text-color};
+      --tooltip-background-color: #{$error-background-color};
+    }
+
+    &--warning {
+      --tooltip-text-color: #{$warning-text-color};
+      --tooltip-background-color: #{$warning-background-color};
+    }
+  }
 }
diff --git a/stylesheets/components/SearchResultsLoadingFakeHeader.scss b/stylesheets/components/SearchResultsLoadingFakeHeader.scss
index c1ba071c5..02d403100 100644
--- a/stylesheets/components/SearchResultsLoadingFakeHeader.scss
+++ b/stylesheets/components/SearchResultsLoadingFakeHeader.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: 16px;
+  padding: 14px;
 
   &::before {
     content: '';
diff --git a/stylesheets/components/SearchResultsLoadingFakeRow.scss b/stylesheets/components/SearchResultsLoadingFakeRow.scss
index 2a2203ee5..7fdc7eb66 100644
--- a/stylesheets/components/SearchResultsLoadingFakeRow.scss
+++ b/stylesheets/components/SearchResultsLoadingFakeRow.scss
@@ -6,12 +6,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding: 10px 14px;
+  margin: 2px 0;
 
   &__avatar {
-    width: 52px;
-    height: 52px;
+    width: 48px;
+    height: 48px;
     border-radius: 100%;
     @include search-results-loading-pulsating-background;
   }
@@ -23,13 +23,20 @@
     justify-content: center;
     margin-left: 12px;
 
-    &__header {
-      @include search-results-loading-box(50%);
-      margin-bottom: 8px;
-    }
+    &__line {
+      &:nth-child(1) {
+        @include search-results-loading-box(30%);
+        margin-bottom: 8px;
+      }
 
-    &__message {
-      @include search-results-loading-box(90%);
+      &:nth-child(2) {
+        @include search-results-loading-box(90%);
+        margin-bottom: 8px;
+      }
+
+      &:nth-child(3) {
+        @include search-results-loading-box(60%);
+      }
     }
   }
 }
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index e7d37c3f6..b8e8ea13d 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -61,6 +61,7 @@
 @import './components/GroupDescription.scss';
 @import './components/GroupDialog.scss';
 @import './components/GroupInput.scss';
+@import './components/Inbox.scss';
 @import './components/IncomingCallBar.scss';
 @import './components/Input.scss';
 @import './components/LeftPaneDialog.scss';
diff --git a/test/index.html b/test/index.html
index 74e142cd7..2615286e6 100644
--- a/test/index.html
+++ b/test/index.html
@@ -29,25 +29,19 @@
     <script type="text/x-tmpl-mustache" id="two-column">
       <div class='module-title-bar-drag-area'></div>
 
-      <div class='inbox-container'>
-        <div class='gutter'>
-          <div class='left-pane-placeholder'></div>
+      <div class='left-pane-placeholder'></div>
+
+      <div class='conversation-stack'>
+        <div class='no-conversation-open'>
+          <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
+          <h3>{{ welcomeToSignal }}</h3>
+          <p class="whats-new-placeholder"></p>
+          <p>{{ selectAContact }}</p>
         </div>
-        <div class='conversation-stack'>
-          <div class='conversation placeholder'>
-            <div class='conversation-header'></div>
-            <div class='container'>
-              <div class='content'>
-                <div class="module-splash-screen__logo module-img--128 module-logo-blue"></div>
-                <h3>{{ welcomeToSignal }}</h3>
-                <p class="whats-new-placeholder"></p>
-                <p>{{ selectAContact }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class='lightbox-container'></div>
+        <div id="toast"></div>
       </div>
+
+      <div class='lightbox-container'></div>
     </script>
 
     <script type="text/x-tmpl-mustache" id="conversation">
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index e9f04e5ca..c4598b79c 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -31,6 +31,7 @@ export enum AvatarSize {
   TWENTY_EIGHT = 28,
   THIRTY_TWO = 32,
   THIRTY_SIX = 36,
+  FORTY_EIGHT = 48,
   FIFTY_TWO = 52,
   EIGHTY = 80,
   NINETY_SIX = 96,
diff --git a/ts/components/ConversationList.stories.tsx b/ts/components/ConversationList.stories.tsx
index 86fd64f6c..609c8e344 100644
--- a/ts/components/ConversationList.stories.tsx
+++ b/ts/components/ConversationList.stories.tsx
@@ -33,6 +33,11 @@ const defaultConversations: Array<ConversationListItemPropsType> = [
     isSelected: true,
     unreadCount: 12,
     title: 'Marc Barraca',
+    lastMessage: {
+      deletedForEveryone: false,
+      text:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.',
+    },
   }),
   getDefaultConversation({
     id: 'long-name-convo',
diff --git a/ts/components/ConversationList.tsx b/ts/components/ConversationList.tsx
index ff5a57062..c735dfd11 100644
--- a/ts/components/ConversationList.tsx
+++ b/ts/components/ConversationList.tsx
@@ -9,6 +9,7 @@ import { get, pick } from 'lodash';
 import { missingCaseError } from '../util/missingCaseError';
 import { assert } from '../util/assert';
 import { LocalizerType, ScrollBehavior } from '../types/Util';
+import { getConversationListWidthBreakpoint } from './_util';
 
 import {
   ConversationListItem,
@@ -134,7 +135,7 @@ export type PropsType = {
   startNewConversationFromPhoneNumber: (e164: string) => void;
 };
 
-const NORMAL_ROW_HEIGHT = 68;
+const NORMAL_ROW_HEIGHT = 76;
 const HEADER_ROW_HEIGHT = 40;
 
 export const ConversationList: React.FC<PropsType> = ({
@@ -193,6 +194,7 @@ export const ConversationList: React.FC<PropsType> = ({
         case RowType.ArchiveButton:
           result = (
             <button
+              aria-label={i18n('archivedConversations')}
               className="module-conversation-list__item--archive-button"
               onClick={onClickArchiveButton}
               type="button"
@@ -345,11 +347,14 @@ export const ConversationList: React.FC<PropsType> = ({
     return null;
   }
 
+  const widthBreakpoint = getConversationListWidthBreakpoint(width);
+
   return (
     <List
       className={classNames(
         'module-conversation-list',
-        `module-conversation-list--scroll-behavior-${scrollBehavior}`
+        `module-conversation-list--scroll-behavior-${scrollBehavior}`,
+        `module-conversation-list--width-${widthBreakpoint}`
       )}
       height={height}
       ref={listRef}
diff --git a/ts/components/DialogExpiredBuild.stories.tsx b/ts/components/DialogExpiredBuild.stories.tsx
index 3079b6f7b..4cbcb71bb 100644
--- a/ts/components/DialogExpiredBuild.stories.tsx
+++ b/ts/components/DialogExpiredBuild.stories.tsx
@@ -1,21 +1,38 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
 import { storiesOf } from '@storybook/react';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 
 import { DialogExpiredBuild } from './DialogExpiredBuild';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { WidthBreakpoint } from './_util';
+import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 const i18n = setupI18n('en', enMessages);
 
 storiesOf('Components/DialogExpiredBuild', module).add(
   'DialogExpiredBuild',
   () => {
+    const containerWidthBreakpoint = select(
+      'containerWidthBreakpoint',
+      WidthBreakpoint,
+      WidthBreakpoint.Wide
+    );
     const hasExpired = boolean('hasExpired', true);
 
-    return <DialogExpiredBuild hasExpired={hasExpired} i18n={i18n} />;
+    return (
+      <FakeLeftPaneContainer
+        containerWidthBreakpoint={containerWidthBreakpoint}
+      >
+        <DialogExpiredBuild
+          containerWidthBreakpoint={containerWidthBreakpoint}
+          hasExpired={hasExpired}
+          i18n={i18n}
+        />
+      </FakeLeftPaneContainer>
+    );
   }
 );
diff --git a/ts/components/DialogExpiredBuild.tsx b/ts/components/DialogExpiredBuild.tsx
index ac2dfd3ab..452ce48d1 100644
--- a/ts/components/DialogExpiredBuild.tsx
+++ b/ts/components/DialogExpiredBuild.tsx
@@ -4,15 +4,19 @@
 import React from 'react';
 
 import { LocalizerType } from '../types/Util';
+import type { WidthBreakpoint } from './_util';
 
 import { LeftPaneDialog } from './LeftPaneDialog';
+import { openLinkInWebBrowser } from '../util/openLinkInWebBrowser';
 
 type PropsType = {
+  containerWidthBreakpoint: WidthBreakpoint;
   hasExpired: boolean;
   i18n: LocalizerType;
 };
 
 export const DialogExpiredBuild = ({
+  containerWidthBreakpoint,
   hasExpired,
   i18n,
 }: PropsType): JSX.Element | null => {
@@ -21,17 +25,16 @@ export const DialogExpiredBuild = ({
   }
 
   return (
-    <LeftPaneDialog type="error">
+    <LeftPaneDialog
+      containerWidthBreakpoint={containerWidthBreakpoint}
+      type="error"
+      onClick={() => {
+        openLinkInWebBrowser('https://signal.org/download/');
+      }}
+      clickLabel={i18n('upgrade')}
+      hasAction
+    >
       {i18n('expiredWarning')}{' '}
-      <a
-        className="LeftPaneDialog__action-text"
-        href="https://signal.org/download/"
-        rel="noreferrer"
-        tabIndex={-1}
-        target="_blank"
-      >
-        {i18n('upgrade')}
-      </a>
     </LeftPaneDialog>
   );
 };
diff --git a/ts/components/DialogNetworkStatus.stories.tsx b/ts/components/DialogNetworkStatus.stories.tsx
index 9fefe22a0..8ab30d236 100644
--- a/ts/components/DialogNetworkStatus.stories.tsx
+++ b/ts/components/DialogNetworkStatus.stories.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -10,10 +10,13 @@ import { DialogNetworkStatus } from './DialogNetworkStatus';
 import { SocketStatus } from '../types/SocketStatus';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { WidthBreakpoint } from './_util';
+import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 const i18n = setupI18n('en', enMessages);
 
 const defaultProps = {
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   hasNetworkDialog: true,
   i18n,
   isOnline: true,
@@ -26,6 +29,11 @@ const defaultProps = {
 const story = storiesOf('Components/DialogNetworkStatus', module);
 
 story.add('Knobs Playground', () => {
+  const containerWidthBreakpoint = select(
+    'containerWidthBreakpoint',
+    WidthBreakpoint,
+    WidthBreakpoint.Wide
+  );
   const hasNetworkDialog = boolean('hasNetworkDialog', true);
   const isOnline = boolean('isOnline', true);
   const socketStatus = select(
@@ -40,30 +48,57 @@ story.add('Knobs Playground', () => {
   );
 
   return (
-    <DialogNetworkStatus
-      {...defaultProps}
-      hasNetworkDialog={hasNetworkDialog}
-      isOnline={isOnline}
-      socketStatus={socketStatus}
-    />
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={containerWidthBreakpoint}
+        hasNetworkDialog={hasNetworkDialog}
+        isOnline={isOnline}
+        socketStatus={socketStatus}
+      />
+    </FakeLeftPaneContainer>
   );
 });
 
-story.add('Connecting', () => (
-  <DialogNetworkStatus
-    {...defaultProps}
-    socketStatus={SocketStatus.CONNECTING}
-  />
-));
+([
+  ['wide', WidthBreakpoint.Wide],
+  ['narrow', WidthBreakpoint.Narrow],
+] as const).forEach(([name, containerWidthBreakpoint]) => {
+  const defaultPropsForBreakpoint = {
+    ...defaultProps,
+    containerWidthBreakpoint,
+  };
 
-story.add('Closing', () => (
-  <DialogNetworkStatus {...defaultProps} socketStatus={SocketStatus.CLOSING} />
-));
+  story.add(`Connecting (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogNetworkStatus
+        {...defaultPropsForBreakpoint}
+        socketStatus={SocketStatus.CONNECTING}
+      />
+    </FakeLeftPaneContainer>
+  ));
 
-story.add('Closed', () => (
-  <DialogNetworkStatus {...defaultProps} socketStatus={SocketStatus.CLOSED} />
-));
+  story.add(`Closing (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogNetworkStatus
+        {...defaultPropsForBreakpoint}
+        socketStatus={SocketStatus.CLOSING}
+      />
+    </FakeLeftPaneContainer>
+  ));
 
-story.add('Offline', () => (
-  <DialogNetworkStatus {...defaultProps} isOnline={false} />
-));
+  story.add(`Closed (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogNetworkStatus
+        {...defaultPropsForBreakpoint}
+        socketStatus={SocketStatus.CLOSED}
+      />
+    </FakeLeftPaneContainer>
+  ));
+
+  story.add(`Offline (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogNetworkStatus {...defaultPropsForBreakpoint} isOnline={false} />
+    </FakeLeftPaneContainer>
+  ));
+});
diff --git a/ts/components/DialogNetworkStatus.tsx b/ts/components/DialogNetworkStatus.tsx
index 4e7f11d97..854c56d6e 100644
--- a/ts/components/DialogNetworkStatus.tsx
+++ b/ts/components/DialogNetworkStatus.tsx
@@ -8,16 +8,19 @@ import { Spinner } from './Spinner';
 import { LocalizerType } from '../types/Util';
 import { SocketStatus } from '../types/SocketStatus';
 import { NetworkStateType } from '../state/ducks/network';
+import type { WidthBreakpoint } from './_util';
 
 const FIVE_SECONDS = 5 * 1000;
 
 export type PropsType = NetworkStateType & {
+  containerWidthBreakpoint: WidthBreakpoint;
   hasNetworkDialog: boolean;
   i18n: LocalizerType;
   manualReconnect: () => void;
 };
 
 export const DialogNetworkStatus = ({
+  containerWidthBreakpoint,
   hasNetworkDialog,
   i18n,
   isOnline,
@@ -70,6 +73,7 @@ export const DialogNetworkStatus = ({
 
     return (
       <LeftPaneDialog
+        containerWidthBreakpoint={containerWidthBreakpoint}
         type="warning"
         icon={spinner}
         title={i18n('connecting')}
@@ -80,6 +84,7 @@ export const DialogNetworkStatus = ({
 
   return (
     <LeftPaneDialog
+      containerWidthBreakpoint={containerWidthBreakpoint}
       type="warning"
       icon="network"
       title={isOnline ? i18n('disconnected') : i18n('offline')}
diff --git a/ts/components/DialogRelink.stories.tsx b/ts/components/DialogRelink.stories.tsx
index 28822d6ab..a9d7a5e33 100644
--- a/ts/components/DialogRelink.stories.tsx
+++ b/ts/components/DialogRelink.stories.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -9,10 +9,13 @@ import { action } from '@storybook/addon-actions';
 import { DialogRelink } from './DialogRelink';
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
+import { WidthBreakpoint } from './_util';
+import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 const i18n = setupI18n('en', enMessages);
 
 const defaultProps = {
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   i18n,
   isRegistrationDone: true,
   relinkDevice: action('relink-device'),
@@ -20,8 +23,16 @@ const defaultProps = {
 
 const permutations = [
   {
-    title: 'Unlinked',
+    title: 'Unlinked (wide container)',
     props: {
+      containerWidthBreakpoint: WidthBreakpoint.Wide,
+      isRegistrationDone: false,
+    },
+  },
+  {
+    title: 'Unlinked (narrow container)',
+    props: {
+      containerWidthBreakpoint: WidthBreakpoint.Narrow,
       isRegistrationDone: false,
     },
   },
@@ -39,7 +50,11 @@ storiesOf('Components/DialogRelink', module)
     return permutations.map(({ props, title }) => (
       <>
         <h3>{title}</h3>
-        <DialogRelink {...defaultProps} {...props} />
+        <FakeLeftPaneContainer
+          containerWidthBreakpoint={props.containerWidthBreakpoint}
+        >
+          <DialogRelink {...defaultProps} {...props} />
+        </FakeLeftPaneContainer>
       </>
     ));
   });
diff --git a/ts/components/DialogRelink.tsx b/ts/components/DialogRelink.tsx
index 193602fb8..3b8d5543d 100644
--- a/ts/components/DialogRelink.tsx
+++ b/ts/components/DialogRelink.tsx
@@ -4,16 +4,19 @@
 import React from 'react';
 
 import { LocalizerType } from '../types/Util';
+import type { WidthBreakpoint } from './_util';
 
 import { LeftPaneDialog } from './LeftPaneDialog';
 
 export type PropsType = {
+  containerWidthBreakpoint: WidthBreakpoint;
   i18n: LocalizerType;
   isRegistrationDone: boolean;
   relinkDevice: () => void;
 };
 
 export const DialogRelink = ({
+  containerWidthBreakpoint,
   i18n,
   isRegistrationDone,
   relinkDevice,
@@ -24,6 +27,7 @@ export const DialogRelink = ({
 
   return (
     <LeftPaneDialog
+      containerWidthBreakpoint={containerWidthBreakpoint}
       type="warning"
       icon="relink"
       clickLabel={i18n('unlinkedWarning')}
diff --git a/ts/components/DialogUpdate.stories.tsx b/ts/components/DialogUpdate.stories.tsx
index f86e4583e..ae224d7c0 100644
--- a/ts/components/DialogUpdate.stories.tsx
+++ b/ts/components/DialogUpdate.stories.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -7,6 +7,8 @@ import { boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { DialogUpdate } from './DialogUpdate';
 import { DialogType } from '../types/Dialogs';
+import { WidthBreakpoint } from './_util';
+import { FakeLeftPaneContainer } from '../test-both/helpers/FakeLeftPaneContainer';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -14,6 +16,7 @@ import enMessages from '../../_locales/en/messages.json';
 const i18n = setupI18n('en', enMessages);
 
 const defaultProps = {
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   dismissDialog: action('dismiss-dialog'),
   downloadSize: 116504357,
   downloadedSize: 61003110,
@@ -29,36 +32,79 @@ const defaultProps = {
 const story = storiesOf('Components/DialogUpdate', module);
 
 story.add('Knobs Playground', () => {
+  const containerWidthBreakpoint = select(
+    'containerWidthBreakpoint',
+    WidthBreakpoint,
+    WidthBreakpoint.Wide
+  );
   const dialogType = select('dialogType', DialogType, DialogType.Update);
   const hasNetworkDialog = boolean('hasNetworkDialog', false);
   const didSnooze = boolean('didSnooze', false);
 
   return (
-    <DialogUpdate
-      {...defaultProps}
-      dialogType={dialogType}
-      didSnooze={didSnooze}
-      hasNetworkDialog={hasNetworkDialog}
-    />
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={containerWidthBreakpoint}
+        dialogType={dialogType}
+        didSnooze={didSnooze}
+        hasNetworkDialog={hasNetworkDialog}
+      />
+    </FakeLeftPaneContainer>
   );
 });
 
-story.add('Update', () => (
-  <DialogUpdate {...defaultProps} dialogType={DialogType.Update} />
-));
+([
+  ['wide', WidthBreakpoint.Wide],
+  ['narrow', WidthBreakpoint.Narrow],
+] as const).forEach(([name, containerWidthBreakpoint]) => {
+  const defaultPropsForBreakpoint = {
+    ...defaultProps,
+    containerWidthBreakpoint,
+  };
 
-story.add('Download Ready', () => (
-  <DialogUpdate {...defaultProps} dialogType={DialogType.DownloadReady} />
-));
+  story.add(`Update (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultPropsForBreakpoint}
+        dialogType={DialogType.Update}
+      />
+    </FakeLeftPaneContainer>
+  ));
 
-story.add('Downloading', () => (
-  <DialogUpdate {...defaultProps} dialogType={DialogType.Downloading} />
-));
+  story.add(`Download Ready (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultPropsForBreakpoint}
+        dialogType={DialogType.DownloadReady}
+      />
+    </FakeLeftPaneContainer>
+  ));
 
-story.add('Cannot Update', () => (
-  <DialogUpdate {...defaultProps} dialogType={DialogType.Cannot_Update} />
-));
+  story.add(`Downloading (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultPropsForBreakpoint}
+        dialogType={DialogType.Downloading}
+      />
+    </FakeLeftPaneContainer>
+  ));
 
-story.add('macOS RO Error', () => (
-  <DialogUpdate {...defaultProps} dialogType={DialogType.MacOS_Read_Only} />
-));
+  story.add(`Cannot Update (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultPropsForBreakpoint}
+        dialogType={DialogType.Cannot_Update}
+      />
+    </FakeLeftPaneContainer>
+  ));
+
+  story.add(`macOS RO Error (${name} container)`, () => (
+    <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
+      <DialogUpdate
+        {...defaultPropsForBreakpoint}
+        dialogType={DialogType.MacOS_Read_Only}
+      />
+    </FakeLeftPaneContainer>
+  ));
+});
diff --git a/ts/components/DialogUpdate.tsx b/ts/components/DialogUpdate.tsx
index 924e57498..261b60e97 100644
--- a/ts/components/DialogUpdate.tsx
+++ b/ts/components/DialogUpdate.tsx
@@ -8,8 +8,10 @@ import { DialogType } from '../types/Dialogs';
 import { LocalizerType } from '../types/Util';
 import { Intl } from './Intl';
 import { LeftPaneDialog } from './LeftPaneDialog';
+import type { WidthBreakpoint } from './_util';
 
 export type PropsType = {
+  containerWidthBreakpoint: WidthBreakpoint;
   dialogType: DialogType;
   didSnooze: boolean;
   dismissDialog: () => void;
@@ -24,6 +26,7 @@ export type PropsType = {
 };
 
 export const DialogUpdate = ({
+  containerWidthBreakpoint,
   dialogType,
   didSnooze,
   dismissDialog,
@@ -49,7 +52,11 @@ export const DialogUpdate = ({
 
   if (dialogType === DialogType.Cannot_Update) {
     return (
-      <LeftPaneDialog type="warning" title={i18n('cannotUpdate')}>
+      <LeftPaneDialog
+        containerWidthBreakpoint={containerWidthBreakpoint}
+        type="warning"
+        title={i18n('cannotUpdate')}
+      >
         <span>
           <Intl
             components={[
@@ -73,6 +80,7 @@ export const DialogUpdate = ({
   if (dialogType === DialogType.MacOS_Read_Only) {
     return (
       <LeftPaneDialog
+        containerWidthBreakpoint={containerWidthBreakpoint}
         type="warning"
         title={i18n('cannotUpdate')}
         hasXButton
@@ -113,7 +121,12 @@ export const DialogUpdate = ({
     );
 
     return (
-      <LeftPaneDialog icon="update" title={title} hoverText={versionTitle}>
+      <LeftPaneDialog
+        containerWidthBreakpoint={containerWidthBreakpoint}
+        icon="update"
+        title={title}
+        hoverText={versionTitle}
+      >
         <div className="LeftPaneDialog__progress--container">
           <div
             className="LeftPaneDialog__progress--bar"
@@ -133,6 +146,7 @@ export const DialogUpdate = ({
 
   return (
     <LeftPaneDialog
+      containerWidthBreakpoint={containerWidthBreakpoint}
       icon="update"
       title={title}
       hoverText={versionTitle}
diff --git a/ts/components/Inbox.tsx b/ts/components/Inbox.tsx
index 4586628ea..734d333a7 100644
--- a/ts/components/Inbox.tsx
+++ b/ts/components/Inbox.tsx
@@ -96,7 +96,7 @@ export const Inbox = ({
 
   return (
     <>
-      <div className="inbox index" ref={hostRef} />
+      <div className="Inbox" ref={hostRef} />
       {activeModal}
     </>
   );
diff --git a/ts/components/LeftPane.stories.tsx b/ts/components/LeftPane.stories.tsx
index 617971044..5e9632e3d 100644
--- a/ts/components/LeftPane.stories.tsx
+++ b/ts/components/LeftPane.stories.tsx
@@ -72,12 +72,15 @@ const defaultModeSpecificProps = {
   pinnedConversations,
   conversations: defaultConversations,
   archivedConversations: defaultArchivedConversations,
+  isAboutToSearchInAConversation: false,
+  startSearchCounter: 0,
 };
 
 const emptySearchResultsGroup = { isLoading: false, results: [] };
 
 const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   cantAddContactToGroup: action('cantAddContactToGroup'),
+  canResizeLeftPane: true,
   clearGroupCreationError: action('clearGroupCreationError'),
   closeCantAddContactToGroupModal: action('closeCantAddContactToGroupModal'),
   closeMaximumGroupSizeModal: action('closeMaximumGroupSizeModal'),
@@ -88,6 +91,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   createGroup: action('createGroup'),
   i18n,
   modeSpecificProps: defaultModeSpecificProps,
+  preferredWidthFromStorage: 320,
   openConversationInternal: action('openConversationInternal'),
   regionCode: 'US',
   challengeStatus: select(
@@ -125,6 +129,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   ),
   selectedConversationId: undefined,
   selectedMessageId: undefined,
+  savePreferredLeftPaneWidth: action('savePreferredLeftPaneWidth'),
   setComposeSearchTerm: action('setComposeSearchTerm'),
   setComposeGroupAvatar: action('setComposeGroupAvatar'),
   setComposeGroupName: action('setComposeGroupName'),
@@ -155,6 +160,8 @@ story.add('Inbox: no conversations', () => (
         pinnedConversations: [],
         conversations: [],
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -168,6 +175,8 @@ story.add('Inbox: only pinned conversations', () => (
         pinnedConversations,
         conversations: [],
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -181,6 +190,8 @@ story.add('Inbox: only non-pinned conversations', () => (
         pinnedConversations: [],
         conversations: defaultConversations,
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -194,6 +205,8 @@ story.add('Inbox: only archived conversations', () => (
         pinnedConversations: [],
         conversations: [],
         archivedConversations: defaultArchivedConversations,
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -207,6 +220,8 @@ story.add('Inbox: pinned and archived conversations', () => (
         pinnedConversations,
         conversations: [],
         archivedConversations: defaultArchivedConversations,
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -220,6 +235,8 @@ story.add('Inbox: non-pinned and archived conversations', () => (
         pinnedConversations: [],
         conversations: defaultConversations,
         archivedConversations: defaultArchivedConversations,
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -233,6 +250,8 @@ story.add('Inbox: pinned and non-pinned conversations', () => (
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
     })}
   />
@@ -499,6 +518,8 @@ story.add('Captcha dialog: required', () => (
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
       challengeStatus: 'required',
     })}
@@ -513,6 +534,8 @@ story.add('Captcha dialog: pending', () => (
         pinnedConversations,
         conversations: defaultConversations,
         archivedConversations: [],
+        isAboutToSearchInAConversation: false,
+        startSearchCounter: 0,
       },
       challengeStatus: 'pending',
     })}
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 7f3323e18..d117b9b54 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -1,9 +1,10 @@
 // Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React, { useEffect, useCallback, useMemo } from 'react';
+import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import Measure, { MeasuredComponentProps } from 'react-measure';
-import { isNumber } from 'lodash';
+import classNames from 'classnames';
+import { clamp, isNumber, noop } from 'lodash';
 
 import {
   LeftPaneHelper,
@@ -39,6 +40,7 @@ import * as OS from '../OS';
 import { LocalizerType, ScrollBehavior } from '../types/Util';
 import { usePrevious } from '../hooks/usePrevious';
 import { missingCaseError } from '../util/missingCaseError';
+import { getConversationListWidthBreakpoint, WidthBreakpoint } from './_util';
 
 import { ConversationList } from './ConversationList';
 import { ContactCheckboxDisabledReason } from './conversationList/ContactCheckbox';
@@ -49,6 +51,11 @@ import {
   SaveAvatarToDiskActionType,
 } from '../types/Avatar';
 
+const MIN_WIDTH = 119;
+const MIN_SNAP_WIDTH = 280;
+const MIN_FULL_WIDTH = 320;
+const MAX_WIDTH = 380;
+
 export enum LeftPaneMode {
   Inbox,
   Search,
@@ -82,9 +89,11 @@ export type PropsType = {
         mode: LeftPaneMode.SetGroupMetadata;
       } & LeftPaneSetGroupMetadataPropsType);
   i18n: LocalizerType;
+  preferredWidthFromStorage: number;
   selectedConversationId: undefined | string;
   selectedMessageId: undefined | string;
   regionCode: string;
+  canResizeLeftPane: boolean;
   challengeStatus: 'idle' | 'required' | 'pending';
   setChallengeStatus: (status: 'idle') => void;
 
@@ -101,6 +110,7 @@ export type PropsType = {
     messageId?: string;
     switchToAssociatedView?: boolean;
   }) => void;
+  savePreferredLeftPaneWidth: (_: number) => void;
   setComposeSearchTerm: (composeSearchTerm: string) => void;
   setComposeGroupAvatar: (_: undefined | Uint8Array) => void;
   setComposeGroupName: (_: string) => void;
@@ -117,17 +127,26 @@ export type PropsType = {
   toggleComposeEditingAvatar: () => unknown;
 
   // Render Props
-  renderExpiredBuildDialog: () => JSX.Element;
+  renderExpiredBuildDialog: (
+    _: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+  ) => JSX.Element;
   renderMainHeader: () => JSX.Element;
   renderMessageSearchResult: (id: string) => JSX.Element;
-  renderNetworkStatus: () => JSX.Element;
-  renderRelinkDialog: () => JSX.Element;
-  renderUpdateDialog: () => JSX.Element;
+  renderNetworkStatus: (
+    _: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+  ) => JSX.Element;
+  renderRelinkDialog: (
+    _: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+  ) => JSX.Element;
+  renderUpdateDialog: (
+    _: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+  ) => JSX.Element;
   renderCaptchaDialog: (props: { onSkip(): void }) => JSX.Element;
 };
 
 export const LeftPane: React.FC<PropsType> = ({
   cantAddContactToGroup,
+  canResizeLeftPane,
   challengeStatus,
   clearGroupCreationError,
   closeCantAddContactToGroupModal,
@@ -140,6 +159,7 @@ export const LeftPane: React.FC<PropsType> = ({
   i18n,
   modeSpecificProps,
   openConversationInternal,
+  preferredWidthFromStorage,
   renderCaptchaDialog,
   renderExpiredBuildDialog,
   renderMainHeader,
@@ -147,6 +167,7 @@ export const LeftPane: React.FC<PropsType> = ({
   renderNetworkStatus,
   renderRelinkDialog,
   renderUpdateDialog,
+  savePreferredLeftPaneWidth,
   selectedConversationId,
   selectedMessageId,
   setChallengeStatus,
@@ -163,6 +184,12 @@ export const LeftPane: React.FC<PropsType> = ({
   toggleComposeEditingAvatar,
   toggleConversationInChooseMembers,
 }) => {
+  const [preferredWidth, setPreferredWidth] = useState(
+    // This clamp is present just in case we get a bogus value from storage.
+    clamp(preferredWidthFromStorage, MIN_WIDTH, MAX_WIDTH)
+  );
+  const [isResizing, setIsResizing] = useState(false);
+
   const previousModeSpecificProps = usePrevious(
     modeSpecificProps,
     modeSpecificProps
@@ -349,6 +376,70 @@ export const LeftPane: React.FC<PropsType> = ({
     startComposing,
   ]);
 
+  const requiresFullWidth = helper.requiresFullWidth();
+
+  useEffect(() => {
+    if (!isResizing) {
+      return noop;
+    }
+
+    const onMouseMove = (event: MouseEvent) => {
+      let width: number;
+      if (requiresFullWidth) {
+        width = Math.max(event.clientX, MIN_FULL_WIDTH);
+      } else if (event.clientX < MIN_SNAP_WIDTH) {
+        width = MIN_WIDTH;
+      } else {
+        width = Math.max(event.clientX, MIN_WIDTH);
+      }
+      setPreferredWidth(Math.min(width, MAX_WIDTH));
+
+      event.preventDefault();
+    };
+
+    const onMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.body.addEventListener('mousemove', onMouseMove);
+    document.body.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.body.removeEventListener('mousemove', onMouseMove);
+      document.body.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [isResizing, requiresFullWidth]);
+
+  useEffect(() => {
+    if (!isResizing) {
+      return noop;
+    }
+
+    document.body.classList.add('is-resizing-left-pane');
+    return () => {
+      document.body.classList.remove('is-resizing-left-pane');
+    };
+  }, [isResizing]);
+
+  useEffect(() => {
+    if (isResizing || preferredWidth === preferredWidthFromStorage) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      savePreferredLeftPaneWidth(preferredWidth);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [
+    isResizing,
+    preferredWidth,
+    preferredWidthFromStorage,
+    savePreferredLeftPaneWidth,
+  ]);
+
   const preRowsNode = helper.getPreRowsNode({
     clearGroupCreationError,
     closeCantAddContactToGroupModal,
@@ -392,6 +483,15 @@ export const LeftPane: React.FC<PropsType> = ({
     selectedConversationId
   );
 
+  let width: number;
+  if (requiresFullWidth) {
+    width = Math.max(preferredWidth, MIN_FULL_WIDTH);
+  } else if (preferredWidth < MIN_SNAP_WIDTH) {
+    width = MIN_WIDTH;
+  } else {
+    width = preferredWidth;
+  }
+
   const isScrollable = helper.isScrollable();
 
   let rowIndexToScrollTo: undefined | number;
@@ -413,13 +513,22 @@ export const LeftPane: React.FC<PropsType> = ({
   //   It also ensures that we scroll to the top when switching views.
   const listKey = preRowsNode ? 1 : 0;
 
+  const widthBreakpoint = getConversationListWidthBreakpoint(width);
+
   // We disable this lint rule because we're trying to capture bubbled events. See [the
   //   lint rule's docs][0].
   //
   // [0]: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/645900a0e296ca7053dbf6cd9e12cc85849de2d5/docs/rules/no-static-element-interactions.md#case-the-event-handler-is-only-being-used-to-capture-bubbled-events
   /* eslint-disable jsx-a11y/no-static-element-interactions */
   return (
-    <div className="module-left-pane">
+    <div
+      className={classNames(
+        'module-left-pane',
+        isResizing && 'module-left-pane--is-resizing',
+        `module-left-pane--width-${widthBreakpoint}`
+      )}
+      style={{ width }}
+    >
       {/* eslint-enable jsx-a11y/no-static-element-interactions */}
       <div className="module-left-pane__header">
         {helper.getHeaderContents({
@@ -429,10 +538,10 @@ export const LeftPane: React.FC<PropsType> = ({
           showChooseGroupMembers,
         }) || renderMainHeader()}
       </div>
-      {renderExpiredBuildDialog()}
-      {renderRelinkDialog()}
-      {renderNetworkStatus()}
-      {renderUpdateDialog()}
+      {renderExpiredBuildDialog({ containerWidthBreakpoint: widthBreakpoint })}
+      {renderRelinkDialog({ containerWidthBreakpoint: widthBreakpoint })}
+      {renderNetworkStatus({ containerWidthBreakpoint: widthBreakpoint })}
+      {renderUpdateDialog({ containerWidthBreakpoint: widthBreakpoint })}
       {preRowsNode && <React.Fragment key={0}>{preRowsNode}</React.Fragment>}
       <Measure bounds>
         {({ contentRect, measureRef }: MeasuredComponentProps) => (
@@ -489,6 +598,17 @@ export const LeftPane: React.FC<PropsType> = ({
       {footerContents && (
         <div className="module-left-pane__footer">{footerContents}</div>
       )}
+      {canResizeLeftPane && (
+        <>
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+          <div
+            className="module-left-pane__resize-grab-area"
+            onMouseDown={() => {
+              setIsResizing(true);
+            }}
+          />
+        </>
+      )}
       {challengeStatus !== 'idle' &&
         renderCaptchaDialog({
           onSkip() {
diff --git a/ts/components/LeftPaneDialog.tsx b/ts/components/LeftPaneDialog.tsx
index 662951b4e..c6aec1f7e 100644
--- a/ts/components/LeftPaneDialog.tsx
+++ b/ts/components/LeftPaneDialog.tsx
@@ -1,17 +1,22 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-import React, { ReactNode } from 'react';
+
+import React, { ReactChild, ReactNode } from 'react';
 import classNames from 'classnames';
+import { Tooltip, TooltipPlacement } from './Tooltip';
+import { WidthBreakpoint } from './_util';
 
 const BASE_CLASS_NAME = 'LeftPaneDialog';
+const TOOLTIP_CLASS_NAME = `${BASE_CLASS_NAME}__tooltip`;
 
 export type PropsType = {
   type?: 'warning' | 'error';
-  icon?: 'update' | 'relink' | 'network' | ReactNode;
+  icon?: 'update' | 'relink' | 'network' | 'warning' | ReactChild;
   title?: string;
   subtitle?: string;
   children?: ReactNode;
   hoverText?: string;
+  containerWidthBreakpoint: WidthBreakpoint;
 } & (
   | {
       onClick?: undefined;
@@ -38,7 +43,7 @@ export type PropsType = {
   );
 
 export const LeftPaneDialog: React.FC<PropsType> = ({
-  icon,
+  icon = 'warning',
   type,
   onClick,
   clickLabel,
@@ -48,6 +53,7 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
   hoverText,
   hasAction,
 
+  containerWidthBreakpoint,
   hasXButton,
   onClose,
   closeLabel,
@@ -123,23 +129,28 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
     onClick === undefined ? undefined : `${BASE_CLASS_NAME}--clickable`,
   ]);
 
+  const message = (
+    <>
+      {title === undefined ? undefined : <h3>{title}</h3>}
+      {subtitle === undefined ? undefined : <div>{subtitle}</div>}
+      {children}
+      {action}
+    </>
+  );
+
   const content = (
     <>
       <div className={`${BASE_CLASS_NAME}__container`}>
         {typeof icon === 'string' ? <div className={iconClassName} /> : icon}
-        <div className={`${BASE_CLASS_NAME}__message`}>
-          {title === undefined ? undefined : <h3>{title}</h3>}
-          {subtitle === undefined ? undefined : <div>{subtitle}</div>}
-          {children}
-          {action}
-        </div>
+        <div className={`${BASE_CLASS_NAME}__message`}>{message}</div>
       </div>
       {xButton}
     </>
   );
 
+  let dialogNode: ReactChild;
   if (onClick) {
-    return (
+    dialogNode = (
       <div
         className={className}
         role="button"
@@ -152,11 +163,28 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
         {content}
       </div>
     );
+  } else {
+    dialogNode = (
+      <div className={className} title={hoverText}>
+        {content}
+      </div>
+    );
   }
 
-  return (
-    <div className={className} title={hoverText}>
-      {content}
-    </div>
-  );
+  if (containerWidthBreakpoint === WidthBreakpoint.Narrow) {
+    return (
+      <Tooltip
+        content={message}
+        direction={TooltipPlacement.Right}
+        className={classNames(
+          TOOLTIP_CLASS_NAME,
+          type && `${TOOLTIP_CLASS_NAME}--${type}`
+        )}
+      >
+        {dialogNode}
+      </Tooltip>
+    );
+  }
+
+  return dialogNode;
 };
diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
index 3248aa5d2..3df549e37 100644
--- a/ts/components/MainHeader.tsx
+++ b/ts/components/MainHeader.tsx
@@ -230,6 +230,13 @@ export class MainHeader extends React.Component<PropsType, StateType> {
     this.setFocus();
   };
 
+  private handleInputBlur = (): void => {
+    const { clearSearch, searchConversationId, searchTerm } = this.props;
+    if (!searchConversationId && !searchTerm) {
+      clearSearch();
+    }
+  };
+
   public handleInputKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>
   ): void => {
@@ -478,6 +485,7 @@ export class MainHeader extends React.Component<PropsType, StateType> {
             )}
             placeholder={placeholder}
             dir="auto"
+            onBlur={this.handleInputBlur}
             onKeyDown={this.handleInputKeyDown}
             value={searchTerm}
             onChange={this.updateSearch}
diff --git a/ts/components/Tooltip.tsx b/ts/components/Tooltip.tsx
index 7a610964f..b68d12794 100644
--- a/ts/components/Tooltip.tsx
+++ b/ts/components/Tooltip.tsx
@@ -68,6 +68,7 @@ export enum TooltipPlacement {
 
 export type PropsType = {
   content: string | JSX.Element;
+  className?: string;
   direction?: TooltipPlacement;
   sticky?: boolean;
   theme?: Theme;
@@ -75,6 +76,7 @@ export type PropsType = {
 
 export const Tooltip: React.FC<PropsType> = ({
   children,
+  className,
   content,
   direction,
   sticky,
@@ -101,7 +103,11 @@ export const Tooltip: React.FC<PropsType> = ({
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
             <div
-              className={classNames('module-tooltip', tooltipThemeClassName)}
+              className={classNames(
+                'module-tooltip',
+                tooltipThemeClassName,
+                className
+              )}
               ref={ref}
               style={style}
               data-placement={placement}
diff --git a/ts/components/_util.ts b/ts/components/_util.ts
index fa18650d2..36fd93c58 100644
--- a/ts/components/_util.ts
+++ b/ts/components/_util.ts
@@ -4,3 +4,14 @@
 export function cleanId(id: string): string {
   return id.replace(/[^\u0020-\u007e\u00a0-\u00ff]/g, '_');
 }
+
+export enum WidthBreakpoint {
+  Wide = 'wide',
+  Medium = 'medium',
+  Narrow = 'narrow',
+}
+
+export const getConversationListWidthBreakpoint = (
+  width: number
+): WidthBreakpoint =>
+  width >= 150 ? WidthBreakpoint.Wide : WidthBreakpoint.Narrow;
diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
index d3101c51b..74d5c509e 100644
--- a/ts/components/conversation/Message.stories.tsx
+++ b/ts/components/conversation/Message.stories.tsx
@@ -27,6 +27,7 @@ import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { pngUrl } from '../../storybook/Fixtures';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
+import { WidthBreakpoint } from '../_util';
 
 import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
 
@@ -102,6 +103,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   clearSelectedMessage: action('clearSelectedMessage'),
   collapseMetadata: overrideProps.collapseMetadata,
   containerElementRef: React.createRef<HTMLElement>(),
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   conversationColor:
     overrideProps.conversationColor ||
     select('conversationColor', ConversationColors, ConversationColors[0]),
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index ecc1d3439..30d595823 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -34,6 +34,7 @@ import { Emoji } from '../emoji/Emoji';
 import { LinkPreviewDate } from './LinkPreviewDate';
 import { LinkPreviewType } from '../../types/message/LinkPreviews';
 import { shouldUseFullSizeLinkPreviewImage } from '../../linkPreviews/shouldUseFullSizeLinkPreviewImage';
+import { WidthBreakpoint } from '../_util';
 import * as log from '../../logging/log';
 
 import {
@@ -194,6 +195,7 @@ export type PropsData = {
 
 export type PropsHousekeeping = {
   containerElementRef: RefObject<HTMLElement>;
+  containerWidthBreakpoint: WidthBreakpoint;
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
   theme?: ThemeType;
@@ -1450,9 +1452,13 @@ export class Message extends React.PureComponent<Props, State> {
             `module-message__buttons--${direction}`
           )}
         >
-          {canReply ? reactButton : null}
-          {canDownload ? downloadButton : null}
-          {canReply ? replyButton : null}
+          {this.shouldShowAdditionalMenuButtons() && (
+            <>
+              {canReply ? reactButton : null}
+              {canDownload ? downloadButton : null}
+              {canReply ? replyButton : null}
+            </>
+          )}
           {menuButton}
         </div>
         {reactionPickerRoot &&
@@ -1523,6 +1529,7 @@ export class Message extends React.PureComponent<Props, State> {
     const menu = (
       <ContextMenu id={triggerId}>
         {canDownload &&
+        !this.shouldShowAdditionalMenuButtons() &&
         !isSticker &&
         !multipleAttachments &&
         !isTapToView &&
@@ -1538,7 +1545,7 @@ export class Message extends React.PureComponent<Props, State> {
             {i18n('downloadAttachment')}
           </MenuItem>
         ) : null}
-        {canReply ? (
+        {canReply && !this.shouldShowAdditionalMenuButtons() ? (
           <>
             <MenuItem
               attributes={{
@@ -1652,6 +1659,11 @@ export class Message extends React.PureComponent<Props, State> {
     return ReactDOM.createPortal(menu, document.body);
   }
 
+  private shouldShowAdditionalMenuButtons(): boolean {
+    const { containerWidthBreakpoint } = this.props;
+    return containerWidthBreakpoint !== WidthBreakpoint.Narrow;
+  }
+
   public getWidth(): number | undefined {
     const { attachments, isSticker, previews } = this.props;
 
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index 3dc44248c..1616b150b 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -18,6 +18,7 @@ import { ConversationType } from '../../state/ducks/conversations';
 import { groupBy } from '../../util/mapUtil';
 import { ContactNameColorType } from '../../types/Colors';
 import { SendStatus } from '../../messages/MessageSendState';
+import { WidthBreakpoint } from '../_util';
 import * as log from '../../logging/log';
 import { Timestamp } from './Timestamp';
 
@@ -301,6 +302,7 @@ export class MessageDetail extends React.Component<Props> {
             clearSelectedMessage={clearSelectedMessage}
             contactNameColor={contactNameColor}
             containerElementRef={this.messageContainerRef}
+            containerWidthBreakpoint={WidthBreakpoint.Wide}
             deleteMessage={() =>
               log.warn('MessageDetail: deleteMessage called!')
             }
diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
index 01e155c48..dcd7db03d 100644
--- a/ts/components/conversation/Quote.stories.tsx
+++ b/ts/components/conversation/Quote.stories.tsx
@@ -23,6 +23,7 @@ import { ReadStatus } from '../../messages/MessageReadStatus';
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
+import { WidthBreakpoint } from '../_util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -39,6 +40,7 @@ const defaultMessageProps: MessagesProps = {
   checkForAccount: action('checkForAccount'),
   clearSelectedMessage: action('default--clearSelectedMessage'),
   containerElementRef: React.createRef<HTMLElement>(),
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   conversationColor: 'crimson',
   conversationId: 'conversationId',
   conversationType: 'direct', // override
diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx
index c5917b50d..08a02bbc2 100644
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@@ -21,6 +21,7 @@ import { TimelineLoadingRow } from './TimelineLoadingRow';
 import { TypingBubble } from './TypingBubble';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
+import { WidthBreakpoint } from '../_util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -369,9 +370,11 @@ const actions = () => ({
 const renderItem = ({
   messageId,
   containerElementRef,
+  containerWidthBreakpoint,
 }: {
   messageId: string;
   containerElementRef: React.RefObject<HTMLElement>;
+  containerWidthBreakpoint: WidthBreakpoint;
 }) => (
   <TimelineItem
     id=""
@@ -384,6 +387,7 @@ const renderItem = ({
     i18n={i18n}
     interactionMode="keyboard"
     containerElementRef={containerElementRef}
+    containerWidthBreakpoint={containerWidthBreakpoint}
     conversationId=""
     renderContact={() => '*ContactName*'}
     renderUniversalTimerNotification={() => (
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index 3f650c5ae..d480c702b 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -20,6 +20,8 @@ import { AssertProps, LocalizerType } from '../../types/Util';
 import { ConversationType } from '../../state/ducks/conversations';
 import { assert } from '../../util/assert';
 import { missingCaseError } from '../../util/missingCaseError';
+import { createRefMerger } from '../../util/refMerger';
+import { WidthBreakpoint } from '../_util';
 
 import { PropsActions as MessageActionsType } from './Message';
 import { PropsActions as UnsupportedMessageActionsType } from './UnsupportedMessage';
@@ -106,6 +108,7 @@ type PropsHousekeepingType = {
   renderItem: (props: {
     actionProps: PropsActionsType;
     containerElementRef: RefObject<HTMLElement>;
+    containerWidthBreakpoint: WidthBreakpoint;
     conversationId: string;
     messageId: string;
     nextMessageId: undefined | string;
@@ -207,6 +210,8 @@ type StateType = {
   atTop: boolean;
   oneTimeScrollRow?: number;
 
+  widthBreakpoint: WidthBreakpoint;
+
   prevPropScrollToIndex?: number;
   prevPropScrollToIndexCounter?: number;
   propScrollToIndex?: number;
@@ -307,6 +312,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
 
   public loadCountdownTimeout: NodeJS.Timeout | null = null;
 
+  private containerRefMerger = createRefMerger();
+
   constructor(props: PropsType) {
     super(props);
 
@@ -328,6 +335,8 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       areUnreadBelowCurrentPosition: false,
       hasDismissedDirectContactSpoofingWarning: false,
       lastMeasuredWarningHeight: 0,
+      // This may be swiftly overridden.
+      widthBreakpoint: WidthBreakpoint.Wide,
     };
   }
 
@@ -740,7 +749,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
       unblurAvatar,
       updateSharedGroups,
     } = this.props;
-    const { lastMeasuredWarningHeight } = this.state;
+    const { lastMeasuredWarningHeight, widthBreakpoint } = this.state;
 
     const styleWithWidth = {
       ...style,
@@ -813,6 +822,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
             {renderItem({
               actionProps,
               containerElementRef: this.containerRef,
+              containerWidthBreakpoint: widthBreakpoint,
               conversationId: id,
               messageId,
               nextMessageId,
@@ -1324,6 +1334,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     const {
       shouldShowScrollDownButton,
       areUnreadBelowCurrentPosition,
+      widthBreakpoint,
     } = this.state;
 
     const rowCount = this.getRowCount();
@@ -1515,30 +1526,42 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
 
     return (
       <>
-        <div
-          className={classNames(
-            'module-timeline',
-            isGroupV1AndDisabled ? 'module-timeline--disabled' : null
-          )}
-          role="presentation"
-          tabIndex={-1}
-          onBlur={this.handleBlur}
-          onKeyDown={this.handleKeyDown}
-          ref={this.containerRef}
+        <Measure
+          bounds
+          onResize={({ bounds }) => {
+            this.setState({
+              widthBreakpoint: getWidthBreakpoint(bounds?.width || 0),
+            });
+          }}
         >
-          {timelineWarning}
+          {({ measureRef }) => (
+            <div
+              className={classNames(
+                'module-timeline',
+                isGroupV1AndDisabled ? 'module-timeline--disabled' : null,
+                `module-timeline--width-${widthBreakpoint}`
+              )}
+              role="presentation"
+              tabIndex={-1}
+              onBlur={this.handleBlur}
+              onKeyDown={this.handleKeyDown}
+              ref={this.containerRefMerger(measureRef)}
+            >
+              {timelineWarning}
 
-          {autoSizer}
+              {autoSizer}
 
-          {shouldShowScrollDownButton ? (
-            <ScrollDownButton
-              conversationId={id}
-              withNewMessages={areUnreadBelowCurrentPosition}
-              scrollDown={this.onClickScrollDownButton}
-              i18n={i18n}
-            />
-          ) : null}
-        </div>
+              {shouldShowScrollDownButton ? (
+                <ScrollDownButton
+                  conversationId={id}
+                  withNewMessages={areUnreadBelowCurrentPosition}
+                  scrollDown={this.onClickScrollDownButton}
+                  i18n={i18n}
+                />
+              ) : null}
+            </div>
+          )}
+        </Measure>
 
         {Boolean(invitedContactsForNewlyCreatedGroup.length) && (
           <NewlyCreatedGroupInvitedContactsDialog
@@ -1578,3 +1601,13 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     }
   }
 }
+
+function getWidthBreakpoint(width: number): WidthBreakpoint {
+  if (width > 606) {
+    return WidthBreakpoint.Wide;
+  }
+  if (width > 514) {
+    return WidthBreakpoint.Medium;
+  }
+  return WidthBreakpoint.Narrow;
+}
diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx
index 781effbc1..0db305e38 100644
--- a/ts/components/conversation/TimelineItem.stories.tsx
+++ b/ts/components/conversation/TimelineItem.stories.tsx
@@ -14,6 +14,7 @@ import { UniversalTimerNotification } from './UniversalTimerNotification';
 import { CallMode } from '../../types/Calling';
 import { AvatarColors } from '../../types/Colors';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
+import { WidthBreakpoint } from '../_util';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -46,6 +47,7 @@ const renderUniversalTimerNotification = () => (
 
 const getDefaultProps = () => ({
   containerElementRef: React.createRef<HTMLElement>(),
+  containerWidthBreakpoint: WidthBreakpoint.Wide,
   conversationId: 'conversation-id',
   id: 'asdf',
   isSelected: false,
diff --git a/ts/components/conversation/TimelineItem.tsx b/ts/components/conversation/TimelineItem.tsx
index 4d25293a2..c052eaf1a 100644
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@@ -181,7 +181,10 @@ export type PropsType = PropsLocalType &
   PropsActionsType &
   Pick<
     AllMessageProps,
-    'renderEmojiPicker' | 'renderAudioAttachment' | 'renderReactionPicker'
+    | 'containerWidthBreakpoint'
+    | 'renderEmojiPicker'
+    | 'renderAudioAttachment'
+    | 'renderReactionPicker'
   >;
 
 export class TimelineItem extends React.PureComponent<PropsType> {
diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx
index 0d0ad3add..7c4389f15 100644
--- a/ts/components/conversation/Timestamp.tsx
+++ b/ts/components/conversation/Timestamp.tsx
@@ -1,4 +1,4 @@
-// Copyright 2018-2020 Signal Messenger, LLC
+// Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
@@ -16,7 +16,6 @@ export type Props = {
   withImageNoCaption?: boolean;
   withSticker?: boolean;
   withTapToViewExpired?: boolean;
-  withUnread?: boolean;
   direction?: 'incoming' | 'outgoing';
   i18n: LocalizerType;
 };
@@ -58,7 +57,6 @@ export class Timestamp extends React.Component<Props> {
       withImageNoCaption,
       withSticker,
       withTapToViewExpired,
-      withUnread,
       extended,
     } = this.props;
     const moduleName = module || 'module-timestamp';
@@ -76,8 +74,7 @@ export class Timestamp extends React.Component<Props> {
             ? `${moduleName}--${direction}-with-tap-to-view-expired`
             : null,
           withImageNoCaption ? `${moduleName}--with-image-no-caption` : null,
-          withSticker ? `${moduleName}--with-sticker` : null,
-          withUnread ? `${moduleName}--with-unread` : null
+          withSticker ? `${moduleName}--with-sticker` : null
         )}
         title={moment(timestamp).format('llll')}
       >
diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx
index 1f336161e..99bf89b6c 100644
--- a/ts/components/conversationList/BaseConversationListItem.tsx
+++ b/ts/components/conversationList/BaseConversationListItem.tsx
@@ -36,6 +36,7 @@ type PropsType = {
   messageId?: string;
   messageStatusIcon?: ReactNode;
   messageText?: ReactNode;
+  messageTextIsAlwaysFullSize?: boolean;
   onClick?: () => void;
   unreadCount?: number;
 } & Pick<
@@ -71,6 +72,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
     markedUnread,
     messageStatusIcon,
     messageText,
+    messageTextIsAlwaysFullSize,
     name,
     onClick,
     phoneNumber,
@@ -119,29 +121,22 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
 
     const contents = (
       <>
-        <div className={`${BASE_CLASS_NAME}__avatar-container`}>
-          <Avatar
-            acceptedMessageRequest={acceptedMessageRequest}
-            avatarPath={avatarPath}
-            color={color}
-            conversationType={conversationType}
-            noteToSelf={isAvatarNoteToSelf}
-            i18n={i18n}
-            isMe={isMe}
-            name={name}
-            phoneNumber={phoneNumber}
-            profileName={profileName}
-            title={title}
-            sharedGroupNames={sharedGroupNames}
-            size={AvatarSize.FIFTY_TWO}
-            unblurredAvatarPath={unblurredAvatarPath}
-          />
-          {isUnread && (
-            <div className={`${BASE_CLASS_NAME}__unread-count`}>
-              {formatUnreadCount(unreadCount)}
-            </div>
-          )}
-        </div>
+        <Avatar
+          acceptedMessageRequest={acceptedMessageRequest}
+          avatarPath={avatarPath}
+          color={color}
+          conversationType={conversationType}
+          noteToSelf={isAvatarNoteToSelf}
+          i18n={i18n}
+          isMe={isMe}
+          name={name}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          title={title}
+          sharedGroupNames={sharedGroupNames}
+          size={AvatarSize.FORTY_EIGHT}
+          unblurredAvatarPath={unblurredAvatarPath}
+        />
         <div
           className={classNames(
             CONTENT_CLASS_NAME,
@@ -151,32 +146,36 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
           <div className={HEADER_CLASS_NAME}>
             <div className={`${HEADER_CLASS_NAME}__name`}>{headerName}</div>
             {isNumber(headerDate) && (
-              <div
-                className={classNames(DATE_CLASS_NAME, {
-                  [`${DATE_CLASS_NAME}--has-unread`]: isUnread,
-                })}
-              >
+              <div className={DATE_CLASS_NAME}>
                 <Timestamp
                   timestamp={headerDate}
                   extended={false}
                   module={TIMESTAMP_CLASS_NAME}
-                  withUnread={isUnread}
                   i18n={i18n}
                 />
               </div>
             )}
           </div>
-          {messageText ? (
+          {messageText || isUnread ? (
             <div className={MESSAGE_CLASS_NAME}>
-              <div
-                dir="auto"
-                className={classNames(MESSAGE_TEXT_CLASS_NAME, {
-                  [`${MESSAGE_TEXT_CLASS_NAME}--has-unread`]: isUnread,
-                })}
-              >
-                {messageText}
-              </div>
+              {Boolean(messageText) && (
+                <div
+                  dir="auto"
+                  className={classNames(
+                    MESSAGE_TEXT_CLASS_NAME,
+                    messageTextIsAlwaysFullSize &&
+                      `${MESSAGE_TEXT_CLASS_NAME}--always-full-size`
+                  )}
+                >
+                  {messageText}
+                </div>
+              )}
               {messageStatusIcon}
+              {isUnread && (
+                <div className={`${BASE_CLASS_NAME}__unread-count`}>
+                  {formatUnreadCount(unreadCount)}
+                </div>
+              )}
             </div>
           ) : null}
         </div>
@@ -185,7 +184,6 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
     );
 
     const commonClassNames = classNames(BASE_CLASS_NAME, {
-      [`${BASE_CLASS_NAME}--has-unread`]: isUnread,
       [`${BASE_CLASS_NAME}--is-selected`]: isSelected,
     });
 
diff --git a/ts/components/conversationList/ConversationListItem.tsx b/ts/components/conversationList/ConversationListItem.tsx
index 5fb45cc1e..09beb9370 100644
--- a/ts/components/conversationList/ConversationListItem.tsx
+++ b/ts/components/conversationList/ConversationListItem.tsx
@@ -173,6 +173,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
         markedUnread={markedUnread}
         messageStatusIcon={messageStatusIcon}
         messageText={messageText}
+        messageTextIsAlwaysFullSize
         name={name}
         onClick={onClickItem}
         phoneNumber={phoneNumber}
@@ -193,5 +194,5 @@ function truncateMessageText(text: unknown): string {
   if (typeof text !== 'string') {
     return '';
   }
-  return text.split('\n', 1)[0];
+  return text.replace(/(?:\r?\n)+/g, ' ');
 }
diff --git a/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx b/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
index 68f7e5cfe..af18a9c70 100644
--- a/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
+++ b/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
@@ -9,8 +9,9 @@ export const SearchResultsLoadingFakeRow: FunctionComponent<PropsType> = () => (
   <div className="module-SearchResultsLoadingFakeRow">
     <div className="module-SearchResultsLoadingFakeRow__avatar" />
     <div className="module-SearchResultsLoadingFakeRow__content">
-      <div className="module-SearchResultsLoadingFakeRow__content__header" />
-      <div className="module-SearchResultsLoadingFakeRow__content__message" />
+      <div className="module-SearchResultsLoadingFakeRow__content__line" />
+      <div className="module-SearchResultsLoadingFakeRow__content__line" />
+      <div className="module-SearchResultsLoadingFakeRow__content__line" />
     </div>
   </div>
 );
diff --git a/ts/components/leftPane/LeftPaneHelper.tsx b/ts/components/leftPane/LeftPaneHelper.tsx
index 130bbcaa6..293b76bb6 100644
--- a/ts/components/leftPane/LeftPaneHelper.tsx
+++ b/ts/components/leftPane/LeftPaneHelper.tsx
@@ -93,6 +93,10 @@ export abstract class LeftPaneHelper<T> {
     return true;
   }
 
+  requiresFullWidth(): boolean {
+    return true;
+  }
+
   abstract getConversationAndMessageAtIndex(
     conversationIndex: number
   ): undefined | { conversationId: string; messageId?: string };
diff --git a/ts/components/leftPane/LeftPaneInboxHelper.tsx b/ts/components/leftPane/LeftPaneInboxHelper.tsx
index 88fedfd89..8620a886b 100644
--- a/ts/components/leftPane/LeftPaneInboxHelper.tsx
+++ b/ts/components/leftPane/LeftPaneInboxHelper.tsx
@@ -15,6 +15,8 @@ export type LeftPaneInboxPropsType = {
   conversations: ReadonlyArray<ConversationListItemPropsType>;
   archivedConversations: ReadonlyArray<ConversationListItemPropsType>;
   pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
+  isAboutToSearchInAConversation: boolean;
+  startSearchCounter: number;
 };
 
 /* eslint-disable class-methods-use-this */
@@ -26,16 +28,24 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
 
   private readonly pinnedConversations: ReadonlyArray<ConversationListItemPropsType>;
 
+  private readonly isAboutToSearchInAConversation: boolean;
+
+  private readonly startSearchCounter: number;
+
   constructor({
     conversations,
     archivedConversations,
     pinnedConversations,
+    isAboutToSearchInAConversation,
+    startSearchCounter,
   }: Readonly<LeftPaneInboxPropsType>) {
     super();
 
     this.conversations = conversations;
     this.archivedConversations = archivedConversations;
     this.pinnedConversations = pinnedConversations;
+    this.isAboutToSearchInAConversation = isAboutToSearchInAConversation;
+    this.startSearchCounter = startSearchCounter;
   }
 
   getRowCount(): number {
@@ -176,6 +186,18 @@ export class LeftPaneInboxHelper extends LeftPaneHelper<LeftPaneInboxPropsType>
     return undefined;
   }
 
+  requiresFullWidth(): boolean {
+    const hasNoConversations =
+      !this.conversations.length &&
+      !this.pinnedConversations.length &&
+      !this.archivedConversations.length;
+    return (
+      hasNoConversations ||
+      this.isAboutToSearchInAConversation ||
+      Boolean(this.startSearchCounter)
+    );
+  }
+
   shouldRecomputeRowHeights(old: Readonly<LeftPaneInboxPropsType>): boolean {
     return old.pinnedConversations.length !== this.pinnedConversations.length;
   }
diff --git a/ts/components/leftPane/LeftPaneSearchHelper.tsx b/ts/components/leftPane/LeftPaneSearchHelper.tsx
index 680f9016b..99565c059 100644
--- a/ts/components/leftPane/LeftPaneSearchHelper.tsx
+++ b/ts/components/leftPane/LeftPaneSearchHelper.tsx
@@ -14,7 +14,7 @@ import { assert } from '../../util/assert';
 
 // The "correct" thing to do is to measure the size of the left pane and render enough
 //   search results for the container height. But (1) that's slow (2) the list is
-//   virtualized (3) 99 rows is over 6000px tall, taller than most monitors (4) it's fine
+//   virtualized (3) 99 rows is over 7500px tall, taller than most monitors (4) it's fine
 //   if, in some extremely tall window, we have some empty space. So we just hard-code a
 //   fairly big number.
 const SEARCH_RESULTS_FAKE_ROW_COUNT = 99;
diff --git a/ts/state/ducks/items.ts b/ts/state/ducks/items.ts
index d3396ab9a..b560f75a4 100644
--- a/ts/state/ducks/items.ts
+++ b/ts/state/ducks/items.ts
@@ -30,6 +30,8 @@ export type ItemsStateType = {
 
   readonly customColors?: CustomColorsItemType;
 
+  readonly preferredLeftPaneWidth?: number;
+
   readonly preferredReactionEmoji?: Array<string>;
 };
 
@@ -76,6 +78,7 @@ export const actions = {
   editCustomColor,
   removeCustomColor,
   resetDefaultChatColor,
+  savePreferredLeftPaneWidth,
   setGlobalDefaultConversationColor,
   onSetSkinTone,
   putItem,
@@ -256,6 +259,14 @@ function setGlobalDefaultConversationColor(
   };
 }
 
+function savePreferredLeftPaneWidth(
+  preferredWidth: number
+): ThunkAction<void, RootStateType, unknown, ItemPutAction> {
+  return dispatch => {
+    dispatch(putItem('preferredLeftPaneWidth', preferredWidth));
+  };
+}
+
 // Reducer
 
 function getEmptyState(): ItemsStateType {
diff --git a/ts/state/selectors/items.ts b/ts/state/selectors/items.ts
index 8f4a2c4c4..f945ca48d 100644
--- a/ts/state/selectors/items.ts
+++ b/ts/state/selectors/items.ts
@@ -15,6 +15,8 @@ import {
 } from '../../types/Colors';
 import { getPreferredReactionEmoji as getPreferredReactionEmojiFromStoredValue } from '../../reactions/preferredReactionEmoji';
 
+const DEFAULT_PREFERRED_LEFT_PANE_WIDTH = 320;
+
 export const getItems = (state: StateType): ItemsStateType => state.items;
 
 export const getUserAgent = createSelector(
@@ -63,6 +65,15 @@ export const getEmojiSkinTone = createSelector(
       : 0
 );
 
+export const getPreferredLeftPaneWidth = createSelector(
+  getItems,
+  ({ preferredLeftPaneWidth }: Readonly<ItemsStateType>): number =>
+    typeof preferredLeftPaneWidth === 'number' &&
+    Number.isInteger(preferredLeftPaneWidth)
+      ? preferredLeftPaneWidth
+      : DEFAULT_PREFERRED_LEFT_PANE_WIDTH
+);
+
 export const getPreferredReactionEmoji = createSelector(
   getItems,
   getEmojiSkinTone,
diff --git a/ts/state/selectors/search.ts b/ts/state/selectors/search.ts
index 636cb1b7b..826e38141 100644
--- a/ts/state/selectors/search.ts
+++ b/ts/state/selectors/search.ts
@@ -48,6 +48,11 @@ export const getSearchConversationId = createSelector(
   (state: SearchStateType): string | undefined => state.searchConversationId
 );
 
+export const getIsSearchingInAConversation = createSelector(
+  getSearchConversationId,
+  Boolean
+);
+
 export const getSearchConversationName = createSelector(
   getSearch,
   (state: SearchStateType): string | undefined => state.searchConversationName
diff --git a/ts/state/smart/ExpiredBuildDialog.tsx b/ts/state/smart/ExpiredBuildDialog.tsx
index 79541a7c3..7b8b5729a 100644
--- a/ts/state/smart/ExpiredBuildDialog.tsx
+++ b/ts/state/smart/ExpiredBuildDialog.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -6,11 +6,15 @@ import { mapDispatchToProps } from '../actions';
 import { DialogExpiredBuild } from '../../components/DialogExpiredBuild';
 import { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
+import type { WidthBreakpoint } from '../../components/_util';
 
-const mapStateToProps = (state: StateType) => {
+type PropsType = Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>;
+
+const mapStateToProps = (state: StateType, ownProps: PropsType) => {
   return {
     hasExpired: state.expiration.hasExpired,
     i18n: getIntl(state),
+    ...ownProps,
   };
 };
 
diff --git a/ts/state/smart/LeftPane.tsx b/ts/state/smart/LeftPane.tsx
index f9bece5e1..0adc625cd 100644
--- a/ts/state/smart/LeftPane.tsx
+++ b/ts/state/smart/LeftPane.tsx
@@ -14,8 +14,14 @@ import { StateType } from '../reducer';
 import { missingCaseError } from '../../util/missingCaseError';
 
 import { ComposerStep, OneTimeModalState } from '../ducks/conversations';
-import { getSearchResults, isSearching } from '../selectors/search';
+import {
+  getIsSearchingInAConversation,
+  getSearchResults,
+  getStartSearchCounter,
+  isSearching,
+} from '../selectors/search';
 import { getIntl, getRegionCode } from '../selectors/user';
+import { getPreferredLeftPaneWidth } from '../selectors/items';
 import {
   getCantAddContactForModal,
   getComposeAvatarData,
@@ -38,6 +44,7 @@ import {
   isCreatingGroup,
   isEditingAvatar,
 } from '../selectors/conversations';
+import type { WidthBreakpoint } from '../../components/_util';
 
 import { SmartExpiredBuildDialog } from './ExpiredBuildDialog';
 import { SmartMainHeader } from './MainHeader';
@@ -49,8 +56,10 @@ import { SmartCaptchaDialog } from './CaptchaDialog';
 
 const FilteredSmartMessageSearchResult = SmartMessageSearchResult;
 
-function renderExpiredBuildDialog(): JSX.Element {
-  return <SmartExpiredBuildDialog />;
+function renderExpiredBuildDialog(
+  props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+): JSX.Element {
+  return <SmartExpiredBuildDialog {...props} />;
 }
 function renderMainHeader(): JSX.Element {
   return <SmartMainHeader />;
@@ -58,14 +67,20 @@ function renderMainHeader(): JSX.Element {
 function renderMessageSearchResult(id: string): JSX.Element {
   return <FilteredSmartMessageSearchResult id={id} />;
 }
-function renderNetworkStatus(): JSX.Element {
-  return <SmartNetworkStatus />;
+function renderNetworkStatus(
+  props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+): JSX.Element {
+  return <SmartNetworkStatus {...props} />;
 }
-function renderRelinkDialog(): JSX.Element {
-  return <SmartRelinkDialog />;
+function renderRelinkDialog(
+  props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+): JSX.Element {
+  return <SmartRelinkDialog {...props} />;
 }
-function renderUpdateDialog(): JSX.Element {
-  return <SmartUpdateDialog />;
+function renderUpdateDialog(
+  props: Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>
+): JSX.Element {
+  return <SmartUpdateDialog {...props} />;
 }
 function renderCaptchaDialog({ onSkip }: { onSkip(): void }): JSX.Element {
   return <SmartCaptchaDialog onSkip={onSkip} />;
@@ -97,6 +112,8 @@ const getModeSpecificProps = (
       }
       return {
         mode: LeftPaneMode.Inbox,
+        isAboutToSearchInAConversation: getIsSearchingInAConversation(state),
+        startSearchCounter: getStartSearchCounter(state),
         ...getLeftPaneLists(state),
       };
     case ComposerStep.StartDirectConversation:
@@ -140,6 +157,10 @@ const getModeSpecificProps = (
 const mapStateToProps = (state: StateType) => {
   return {
     modeSpecificProps: getModeSpecificProps(state),
+    canResizeLeftPane: window.Signal.RemoteConfig.isEnabled(
+      'desktop.internalUser'
+    ),
+    preferredWidthFromStorage: getPreferredLeftPaneWidth(state),
     selectedConversationId: getSelectedConversationId(state),
     selectedMessageId: getSelectedMessage(state)?.id,
     showArchived: getShowArchived(state),
diff --git a/ts/state/smart/NetworkStatus.tsx b/ts/state/smart/NetworkStatus.tsx
index 521c71750..f24333c58 100644
--- a/ts/state/smart/NetworkStatus.tsx
+++ b/ts/state/smart/NetworkStatus.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -7,12 +7,16 @@ import { DialogNetworkStatus } from '../../components/DialogNetworkStatus';
 import { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
 import { hasNetworkDialog } from '../selectors/network';
+import type { WidthBreakpoint } from '../../components/_util';
 
-const mapStateToProps = (state: StateType) => {
+type PropsType = Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>;
+
+const mapStateToProps = (state: StateType, ownProps: PropsType) => {
   return {
     ...state.network,
     hasNetworkDialog: hasNetworkDialog(state),
     i18n: getIntl(state),
+    ...ownProps,
   };
 };
 
diff --git a/ts/state/smart/RelinkDialog.tsx b/ts/state/smart/RelinkDialog.tsx
index 6aed71db4..87c4e4e14 100644
--- a/ts/state/smart/RelinkDialog.tsx
+++ b/ts/state/smart/RelinkDialog.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -7,11 +7,15 @@ import { DialogRelink } from '../../components/DialogRelink';
 import { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
 import { isDone } from '../../util/registration';
+import type { WidthBreakpoint } from '../../components/_util';
 
-const mapStateToProps = (state: StateType) => {
+type PropsType = Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>;
+
+const mapStateToProps = (state: StateType, ownProps: PropsType) => {
   return {
     i18n: getIntl(state),
     isRegistrationDone: isDone(),
+    ...ownProps,
   };
 };
 
diff --git a/ts/state/smart/Timeline.tsx b/ts/state/smart/Timeline.tsx
index 78afd13b7..24bd6e844 100644
--- a/ts/state/smart/Timeline.tsx
+++ b/ts/state/smart/Timeline.tsx
@@ -46,6 +46,7 @@ import {
   invertIdsByTitle,
 } from '../../util/groupMemberNameCollisions';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
+import type { WidthBreakpoint } from '../../components/_util';
 
 type ExternalProps = {
   id: string;
@@ -109,6 +110,7 @@ const createBoundOnHeightChange = memoizee(
 function renderItem({
   actionProps,
   containerElementRef,
+  containerWidthBreakpoint,
   conversationId,
   messageId,
   nextMessageId,
@@ -117,6 +119,7 @@ function renderItem({
 }: {
   actionProps: TimelineActionsType;
   containerElementRef: RefObject<HTMLElement>;
+  containerWidthBreakpoint: WidthBreakpoint;
   conversationId: string;
   messageId: string;
   nextMessageId: undefined | string;
@@ -127,6 +130,7 @@ function renderItem({
     <SmartTimelineItem
       {...actionProps}
       containerElementRef={containerElementRef}
+      containerWidthBreakpoint={containerWidthBreakpoint}
       conversationId={conversationId}
       messageId={messageId}
       previousMessageId={previousMessageId}
diff --git a/ts/state/smart/UpdateDialog.tsx b/ts/state/smart/UpdateDialog.tsx
index 0605ca1ad..54aefa6d9 100644
--- a/ts/state/smart/UpdateDialog.tsx
+++ b/ts/state/smart/UpdateDialog.tsx
@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { connect } from 'react-redux';
@@ -7,12 +7,16 @@ import { DialogUpdate } from '../../components/DialogUpdate';
 import { StateType } from '../reducer';
 import { getIntl } from '../selectors/user';
 import { hasNetworkDialog } from '../selectors/network';
+import type { WidthBreakpoint } from '../../components/_util';
 
-const mapStateToProps = (state: StateType) => {
+type PropsType = Readonly<{ containerWidthBreakpoint: WidthBreakpoint }>;
+
+const mapStateToProps = (state: StateType, ownProps: PropsType) => {
   return {
     ...state.updates,
     hasNetworkDialog: hasNetworkDialog(state),
     i18n: getIntl(state),
+    ...ownProps,
   };
 };
 
diff --git a/ts/test-both/helpers/FakeLeftPaneContainer.tsx b/ts/test-both/helpers/FakeLeftPaneContainer.tsx
new file mode 100644
index 000000000..f42fb28f9
--- /dev/null
+++ b/ts/test-both/helpers/FakeLeftPaneContainer.tsx
@@ -0,0 +1,29 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { FunctionComponent } from 'react';
+import { WidthBreakpoint } from '../../components/_util';
+
+type PropsType = {
+  containerWidthBreakpoint: WidthBreakpoint;
+};
+
+const WIDTHS = {
+  [WidthBreakpoint.Wide]: 350,
+  [WidthBreakpoint.Medium]: 280,
+  [WidthBreakpoint.Narrow]: 130,
+};
+
+export const FakeLeftPaneContainer: FunctionComponent<PropsType> = ({
+  children,
+  containerWidthBreakpoint,
+}) => {
+  return (
+    <div
+      className={`module-left-pane--width-${containerWidthBreakpoint}`}
+      style={{ width: WIDTHS[containerWidthBreakpoint] }}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/ts/test-both/state/selectors/items_test.ts b/ts/test-both/state/selectors/items_test.ts
index 75f22646f..522372953 100644
--- a/ts/test-both/state/selectors/items_test.ts
+++ b/ts/test-both/state/selectors/items_test.ts
@@ -5,6 +5,7 @@ import { assert } from 'chai';
 import {
   getEmojiSkinTone,
   getPinnedConversationIds,
+  getPreferredLeftPaneWidth,
   getPreferredReactionEmoji,
 } from '../../../state/selectors/items';
 import type { StateType } from '../../../state/reducer';
@@ -50,6 +51,32 @@ describe('both/state/selectors/items', () => {
     });
   });
 
+  describe('#getPreferredLeftPaneWidth', () => {
+    it('returns a default if no value is present', () => {
+      const state = getRootState({});
+      assert.strictEqual(getPreferredLeftPaneWidth(state), 320);
+    });
+
+    it('returns a default value if passed something invalid', () => {
+      [undefined, null, '250', [250], 250.123].forEach(
+        preferredLeftPaneWidth => {
+          const state = getRootState({
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            preferredLeftPaneWidth: preferredLeftPaneWidth as any,
+          });
+          assert.strictEqual(getPreferredLeftPaneWidth(state), 320);
+        }
+      );
+    });
+
+    it('returns the value in storage if it is valid', () => {
+      const state = getRootState({
+        preferredLeftPaneWidth: 345,
+      });
+      assert.strictEqual(getPreferredLeftPaneWidth(state), 345);
+    });
+  });
+
   describe('#getPinnedConversationIds', () => {
     it('returns pinnedConversationIds key from items', () => {
       const expected = ['one', 'two'];
diff --git a/ts/test-both/state/selectors/search_test.ts b/ts/test-both/state/selectors/search_test.ts
index 54335406a..07afd4bf5 100644
--- a/ts/test-both/state/selectors/search_test.ts
+++ b/ts/test-both/state/selectors/search_test.ts
@@ -16,6 +16,7 @@ import {
 } from '../../../state/ducks/search';
 import { getEmptyState as getEmptyUserState } from '../../../state/ducks/user';
 import {
+  getIsSearchingInAConversation,
   getMessageSearchResultSelector,
   getSearchResults,
 } from '../../../state/selectors/search';
@@ -68,6 +69,27 @@ describe('both/state/selectors/search', () => {
     };
   }
 
+  describe('#getIsSearchingInAConversation', () => {
+    it('returns false if not searching in a conversation', () => {
+      const state = getEmptyRootState();
+
+      assert.isFalse(getIsSearchingInAConversation(state));
+    });
+
+    it('returns true if searching in a conversation', () => {
+      const state = {
+        ...getEmptyRootState(),
+        search: {
+          ...getEmptySearchState(),
+          searchConversationId: 'abc123',
+          searchConversationName: 'Test Conversation',
+        },
+      };
+
+      assert.isTrue(getIsSearchingInAConversation(state));
+    });
+  });
+
   describe('#getMessageSearchResultSelector', () => {
     it('returns undefined if message not found in lookup', () => {
       const state = getEmptyRootState();
diff --git a/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx b/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx
index 5c837e717..00a70da3e 100644
--- a/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx
+++ b/ts/test-node/components/leftPane/LeftPaneInboxHelper_test.tsx
@@ -7,16 +7,23 @@ import { RowType } from '../../../components/ConversationList';
 import { FindDirection } from '../../../components/leftPane/LeftPaneHelper';
 import { getDefaultConversation } from '../../../test-both/helpers/getDefaultConversation';
 
-import { LeftPaneInboxHelper } from '../../../components/leftPane/LeftPaneInboxHelper';
+import {
+  LeftPaneInboxHelper,
+  LeftPaneInboxPropsType,
+} from '../../../components/leftPane/LeftPaneInboxHelper';
 
 describe('LeftPaneInboxHelper', () => {
+  const defaultProps: LeftPaneInboxPropsType = {
+    conversations: [],
+    pinnedConversations: [],
+    archivedConversations: [],
+    isAboutToSearchInAConversation: false,
+    startSearchCounter: 0,
+  };
+
   describe('getBackAction', () => {
     it("returns undefined; you can't go back from the main inbox", () => {
-      const helper = new LeftPaneInboxHelper({
-        conversations: [],
-        pinnedConversations: [],
-        archivedConversations: [],
-      });
+      const helper = new LeftPaneInboxHelper(defaultProps);
 
       assert.isUndefined(
         helper.getBackAction({
@@ -30,19 +37,14 @@ describe('LeftPaneInboxHelper', () => {
 
   describe('getRowCount', () => {
     it('returns 0 if there are no conversations', () => {
-      const helper = new LeftPaneInboxHelper({
-        conversations: [],
-        pinnedConversations: [],
-        archivedConversations: [],
-      });
+      const helper = new LeftPaneInboxHelper(defaultProps);
 
       assert.strictEqual(helper.getRowCount(), 0);
     });
 
     it('returns 1 if there are only archived conversations', () => {
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
-        pinnedConversations: [],
+        ...defaultProps,
         archivedConversations: [getDefaultConversation()],
       });
 
@@ -51,13 +53,12 @@ describe('LeftPaneInboxHelper', () => {
 
     it("returns the number of non-pinned conversations if that's all there is", () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
           getDefaultConversation(),
         ],
-        pinnedConversations: [],
-        archivedConversations: [],
       });
 
       assert.strictEqual(helper.getRowCount(), 3);
@@ -65,13 +66,12 @@ describe('LeftPaneInboxHelper', () => {
 
     it("returns the number of pinned conversations if that's all there is", () => {
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
+        ...defaultProps,
         pinnedConversations: [
           getDefaultConversation(),
           getDefaultConversation(),
           getDefaultConversation(),
         ],
-        archivedConversations: [],
       });
 
       assert.strictEqual(helper.getRowCount(), 3);
@@ -79,13 +79,13 @@ describe('LeftPaneInboxHelper', () => {
 
     it('adds 2 rows for each header if there are pinned and non-pinned conversations,', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
           getDefaultConversation(),
         ],
         pinnedConversations: [getDefaultConversation()],
-        archivedConversations: [],
       });
 
       assert.strictEqual(helper.getRowCount(), 6);
@@ -93,12 +93,12 @@ describe('LeftPaneInboxHelper', () => {
 
     it('adds 1 row for the archive button if there are any archived conversations', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
           getDefaultConversation(),
         ],
-        pinnedConversations: [],
         archivedConversations: [getDefaultConversation()],
       });
 
@@ -109,9 +109,9 @@ describe('LeftPaneInboxHelper', () => {
   describe('getRowIndexToScrollTo', () => {
     it('returns undefined if no conversation is selected', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [getDefaultConversation(), getDefaultConversation()],
         pinnedConversations: [getDefaultConversation()],
-        archivedConversations: [],
       });
 
       assert.isUndefined(helper.getRowIndexToScrollTo(undefined));
@@ -120,6 +120,7 @@ describe('LeftPaneInboxHelper', () => {
     it('returns undefined if the selected conversation is not pinned or non-pinned', () => {
       const archivedConversations = [getDefaultConversation()];
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [getDefaultConversation(), getDefaultConversation()],
         pinnedConversations: [getDefaultConversation()],
         archivedConversations,
@@ -136,9 +137,8 @@ describe('LeftPaneInboxHelper', () => {
         getDefaultConversation(),
       ];
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
+        ...defaultProps,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -157,9 +157,8 @@ describe('LeftPaneInboxHelper', () => {
         getDefaultConversation(),
       ];
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
-        pinnedConversations: [],
-        archivedConversations: [],
       });
 
       assert.strictEqual(helper.getRowIndexToScrollTo(conversations[0].id), 0);
@@ -172,9 +171,9 @@ describe('LeftPaneInboxHelper', () => {
         getDefaultConversation(),
       ];
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [getDefaultConversation()],
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -193,13 +192,13 @@ describe('LeftPaneInboxHelper', () => {
         getDefaultConversation(),
       ];
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations: [
           getDefaultConversation(),
           getDefaultConversation(),
           getDefaultConversation(),
         ],
-        archivedConversations: [],
       });
 
       assert.strictEqual(helper.getRowIndexToScrollTo(conversations[0].id), 5);
@@ -210,8 +209,7 @@ describe('LeftPaneInboxHelper', () => {
   describe('getRow', () => {
     it('returns the archive button if there are only archived conversations', () => {
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
-        pinnedConversations: [],
+        ...defaultProps,
         archivedConversations: [
           getDefaultConversation(),
           getDefaultConversation(),
@@ -232,9 +230,8 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
+        ...defaultProps,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -255,7 +252,7 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
+        ...defaultProps,
         pinnedConversations,
         archivedConversations: [getDefaultConversation()],
       });
@@ -282,9 +279,8 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
-        pinnedConversations: [],
-        archivedConversations: [],
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -305,8 +301,8 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
-        pinnedConversations: [],
         archivedConversations: [getDefaultConversation()],
       });
 
@@ -337,9 +333,9 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.deepEqual(helper.getRow(0), {
@@ -385,6 +381,7 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations,
         archivedConversations: [getDefaultConversation()],
@@ -439,9 +436,9 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -473,9 +470,8 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
+        ...defaultProps,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -501,9 +497,8 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
-        pinnedConversations: [],
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -533,9 +528,9 @@ describe('LeftPaneInboxHelper', () => {
       ];
 
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.strictEqual(
@@ -556,8 +551,7 @@ describe('LeftPaneInboxHelper', () => {
 
     it('returns undefined if there are no conversations', () => {
       const helper = new LeftPaneInboxHelper({
-        conversations: [],
-        pinnedConversations: [],
+        ...defaultProps,
         archivedConversations: [getDefaultConversation()],
       });
 
@@ -575,9 +569,9 @@ describe('LeftPaneInboxHelper', () => {
       ];
       const conversations = [getDefaultConversation()];
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations,
         pinnedConversations,
-        archivedConversations: [],
       });
 
       assert.deepEqual(
@@ -593,9 +587,45 @@ describe('LeftPaneInboxHelper', () => {
     // Additional tests are found with `getConversationInDirection`.
   });
 
+  describe('requiresFullWidth', () => {
+    it("returns false if we're not about to search in a conversation and there's at least one", () => {
+      const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
+        conversations: [getDefaultConversation()],
+      });
+
+      assert.isFalse(helper.requiresFullWidth());
+    });
+
+    it('returns true if there are no conversations', () => {
+      const helper = new LeftPaneInboxHelper(defaultProps);
+
+      assert.isTrue(helper.requiresFullWidth());
+    });
+
+    it("returns true if we're about to search", () => {
+      const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
+        startSearchCounter: 1,
+      });
+
+      assert.isTrue(helper.requiresFullWidth());
+    });
+
+    it("returns true if we're about to search in a conversation", () => {
+      const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
+        isAboutToSearchInAConversation: true,
+      });
+
+      assert.isTrue(helper.requiresFullWidth());
+    });
+  });
+
   describe('shouldRecomputeRowHeights', () => {
     it("returns false if the number of conversations in each section doesn't change", () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
@@ -610,6 +640,7 @@ describe('LeftPaneInboxHelper', () => {
 
       assert.isFalse(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [
             getDefaultConversation(),
             getDefaultConversation(),
@@ -629,6 +660,7 @@ describe('LeftPaneInboxHelper', () => {
 
     it('returns false if the only thing changed is whether conversations are archived', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
@@ -643,6 +675,7 @@ describe('LeftPaneInboxHelper', () => {
 
       assert.isFalse(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [
             getDefaultConversation(),
             getDefaultConversation(),
@@ -652,13 +685,13 @@ describe('LeftPaneInboxHelper', () => {
             getDefaultConversation(),
             getDefaultConversation(),
           ],
-          archivedConversations: [],
         })
       );
     });
 
     it('returns false if the only thing changed is the number of non-pinned conversations', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [
           getDefaultConversation(),
           getDefaultConversation(),
@@ -673,6 +706,7 @@ describe('LeftPaneInboxHelper', () => {
 
       assert.isFalse(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [getDefaultConversation()],
           pinnedConversations: [
             getDefaultConversation(),
@@ -688,6 +722,7 @@ describe('LeftPaneInboxHelper', () => {
 
     it('returns true if the number of pinned conversations changes', () => {
       const helper = new LeftPaneInboxHelper({
+        ...defaultProps,
         conversations: [getDefaultConversation()],
         pinnedConversations: [
           getDefaultConversation(),
@@ -698,6 +733,7 @@ describe('LeftPaneInboxHelper', () => {
 
       assert.isTrue(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [getDefaultConversation()],
           pinnedConversations: [
             getDefaultConversation(),
@@ -709,6 +745,7 @@ describe('LeftPaneInboxHelper', () => {
       );
       assert.isTrue(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [getDefaultConversation()],
           pinnedConversations: [getDefaultConversation()],
           archivedConversations: [getDefaultConversation()],
@@ -716,6 +753,7 @@ describe('LeftPaneInboxHelper', () => {
       );
       assert.isTrue(
         helper.shouldRecomputeRowHeights({
+          ...defaultProps,
           conversations: [getDefaultConversation()],
           pinnedConversations: [],
           archivedConversations: [getDefaultConversation()],
diff --git a/ts/types/Storage.d.ts b/ts/types/Storage.d.ts
index 87292fe14..bd49042d9 100644
--- a/ts/types/Storage.d.ts
+++ b/ts/types/Storage.d.ts
@@ -132,6 +132,7 @@ export type StorageAccessType = {
   senderCertificateNoE164: SerializedCertificateType;
   paymentAddress: string;
   zoomFactor: ZoomFactorType;
+  preferredLeftPaneWidth: number;
 
   // Deprecated
   senderCertificateWithUuid: never;
diff --git a/ts/types/StorageUIKeys.ts b/ts/types/StorageUIKeys.ts
index 625e676e7..24a50dcc4 100644
--- a/ts/types/StorageUIKeys.ts
+++ b/ts/types/StorageUIKeys.ts
@@ -25,6 +25,7 @@ export const STORAGE_UI_KEYS: ReadonlyArray<keyof StorageAccessType> = [
   'preferred-video-input-device',
   'preferred-audio-input-device',
   'preferred-audio-output-device',
+  'preferredLeftPaneWidth',
   'preferredReactionEmoji',
   'previousAudioDeviceModule',
   'skinTone',
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 74379f751..3b700951e 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -13323,9 +13323,16 @@
   {
     "rule": "jQuery-$(",
     "path": "ts/views/inbox_view.js",
-    "line": "        this.$('.left-pane-placeholder').append(this.leftPaneView.el);",
+    "line": "        this.$('.left-pane-placeholder').replaceWith(this.leftPaneView.el);",
     "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
+    "updated": "2021-10-08T17:39:41.541Z"
+  },
+  {
+    "rule": "jQuery-$(",
+    "path": "ts/views/inbox_view.js",
+    "line": "        this.$('.no-conversation-open').toggle(!isAnyConversationOpen);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2021-10-08T17:40:22.770Z"
   },
   {
     "rule": "jQuery-append(",
@@ -13334,13 +13341,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-15T21:07:50.995Z"
   },
-  {
-    "rule": "jQuery-append(",
-    "path": "ts/views/inbox_view.js",
-    "line": "        this.$('.left-pane-placeholder').append(this.leftPaneView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
   {
     "rule": "jQuery-appendTo(",
     "path": "ts/views/inbox_view.js",
@@ -13407,9 +13407,16 @@
   {
     "rule": "jQuery-$(",
     "path": "ts/views/inbox_view.ts",
-    "line": "    this.$('.left-pane-placeholder').append(this.leftPaneView.el);",
+    "line": "    this.$('.no-conversation-open').toggle(!isAnyConversationOpen);",
     "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
+    "updated": "2021-10-08T17:40:22.770Z"
+  },
+  {
+    "rule": "jQuery-$(",
+    "path": "ts/views/inbox_view.ts",
+    "line": "    this.$('.left-pane-placeholder').replaceWith(this.leftPaneView.el);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2021-10-08T17:40:22.770Z"
   },
   {
     "rule": "jQuery-append(",
@@ -13418,13 +13425,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-15T21:07:50.995Z"
   },
-  {
-    "rule": "jQuery-append(",
-    "path": "ts/views/inbox_view.ts",
-    "line": "    this.$('.left-pane-placeholder').append(this.leftPaneView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-09-15T21:07:50.995Z"
-  },
   {
     "rule": "jQuery-appendTo(",
     "path": "ts/views/inbox_view.ts",
@@ -14083,4 +14083,4 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
   }
-]
+]
\ No newline at end of file
diff --git a/ts/views/inbox_view.ts b/ts/views/inbox_view.ts
index 37ff2a694..d0e3b7f87 100644
--- a/ts/views/inbox_view.ts
+++ b/ts/views/inbox_view.ts
@@ -1,6 +1,7 @@
 // Copyright 2014-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import * as Backbone from 'backbone';
 import * as log from '../logging/log';
 import { ConversationModel } from '../models/conversations';
 import { showToast } from '../util/showToast';
@@ -9,12 +10,19 @@ import { ToastStickerPackInstallFailed } from '../components/ToastStickerPackIns
 window.Whisper = window.Whisper || {};
 const { Whisper } = window;
 
-const ConversationStack = Whisper.View.extend({
-  className: 'conversation-stack',
-  lastConversation: null,
-  open(conversation: ConversationModel, messageId: string) {
-    const id = `conversation-${conversation.cid}`;
-    if (id !== this.el.lastChild.id) {
+class ConversationStack extends Backbone.View {
+  public className = 'conversation-stack';
+
+  private conversationStack: Array<ConversationModel> = [];
+
+  private getTopConversation(): undefined | ConversationModel {
+    return this.conversationStack[this.conversationStack.length - 1];
+  }
+
+  public open(conversation: ConversationModel, messageId: string): void {
+    const topConversation = this.getTopConversation();
+
+    if (!topConversation || topConversation.id !== conversation.id) {
       const view = new Whisper.ConversationView({
         model: conversation,
       });
@@ -24,36 +32,43 @@ const ConversationStack = Whisper.View.extend({
       );
       view.$el.appendTo(this.el);
 
-      if (this.lastConversation && this.lastConversation !== conversation) {
-        this.lastConversation.trigger('unload', 'opened another conversation');
-        this.stopListening(this.lastConversation);
-        this.lastConversation = null;
+      if (topConversation) {
+        topConversation.trigger('unload', 'opened another conversation');
       }
 
-      this.lastConversation = conversation;
+      this.conversationStack.push(conversation);
+
       conversation.trigger('opened', messageId);
     } else if (messageId) {
       conversation.trigger('scroll-to-message', messageId);
     }
 
+    this.render();
+  }
+
+  public unload(): void {
+    this.getTopConversation()?.trigger('unload', 'force unload requested');
+  }
+
+  private onUnload(conversation: ConversationModel) {
+    this.stopListening(conversation);
+    this.conversationStack = this.conversationStack.filter(
+      (c: ConversationModel) => c !== conversation
+    );
+
+    this.render();
+  }
+
+  public render(): ConversationStack {
+    const isAnyConversationOpen = Boolean(this.conversationStack.length);
+    this.$('.no-conversation-open').toggle(!isAnyConversationOpen);
+
     // Make sure poppers are positioned properly
     window.dispatchEvent(new Event('resize'));
-  },
-  unload() {
-    const { lastConversation } = this;
-    if (!lastConversation) {
-      return;
-    }
 
-    lastConversation.trigger('unload', 'force unload requested');
-  },
-  onUnload(conversation: ConversationModel) {
-    if (this.lastConversation === conversation) {
-      this.stopListening(this.lastConversation);
-      this.lastConversation = null;
-    }
-  },
-});
+    return this;
+  }
+}
 
 const AppLoadingScreen = Whisper.View.extend({
   template: () => $('#app-loading-screen').html(),
@@ -71,7 +86,7 @@ const AppLoadingScreen = Whisper.View.extend({
 
 Whisper.InboxView = Whisper.View.extend({
   template: () => $('#two-column').html(),
-  className: 'inbox index',
+  className: 'Inbox',
   initialize(
     options: {
       initialLoadComplete?: boolean;
@@ -83,7 +98,6 @@ Whisper.InboxView = Whisper.View.extend({
 
     this.conversation_stack = new ConversationStack({
       el: this.$('.conversation-stack'),
-      model: { window: options.window },
     });
 
     this.renderWhatsNew();
@@ -166,7 +180,7 @@ Whisper.InboxView = Whisper.View.extend({
       JSX: window.Signal.State.Roots.createLeftPane(window.reduxStore),
     });
 
-    this.$('.left-pane-placeholder').append(this.leftPaneView.el);
+    this.$('.left-pane-placeholder').replaceWith(this.leftPaneView.el);
   },
   startConnectionListener() {
     this.interval = setInterval(() => {