style: avoid horizontal scrollbars in chat list

The bug was likely introduced in 0e0d0b8,
where scrollbars got wider on Windows.
So if a contact has a long email or name, it would overflow
the chat list in "search" mode.

The new approach makes the widths less hard-coded
and lets the browser handle widths.

CHANGELOG.md

@@ -5,6 +5,7 @@
 ## Fixed
 - image thumbnails not showing in chat list #4247
 - progress bar not working #4248
+- avoid showing horizontal scrollbars in chat list #4253
 
 <a id="1_47_0"></a>
 

packages/frontend/scss/chat/_chat-list-item.scss

@@ -32,10 +32,12 @@
   }
 
   & > .content {
+    // Ensure it's as wide as the parent allows, but doesn't overflow
+    // the parent if the content is too long.
+    width: 0;
     flex-grow: 1;
+
     margin-left: 10px;
-    // parent - 48px (for avatar) - 10px (our right padding)
-    max-width: calc(100% - 58px);
 
     display: flex;
     flex-direction: column;
@@ -46,7 +48,6 @@
       flex-direction: row;
       align-items: center;
       & > .name {
-        width: 90%;
         flex-grow: 1;
         flex-shrink: 1;
         font-size: 14px;

packages/frontend/scss/contact/_contact.scss

@@ -13,13 +13,14 @@
   }
 
   div.contact-name {
+    // Ensure it's as wide as the parent allows, but doesn't overflow
+    // the parent if the content is too long.
+    width: 0;
+    flex-grow: 1;
+
     display: inline-block;
-    width: calc(100% - 64px);
     // height: 54px;
     margin-left: 10px;
-    .chat-list & {
-      width: calc(100% - 37px);
-    }
     .display-name {
       font-weight: bold;
       margin-bottom: 0px;