style: avoid horizontal scrollbars in chat list

deltachat · Oct 24, 2024 · 5852561 · 5852561
1 parent 382a806
commit 5852561
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - image thumbnails not showing in chat list #4247
 - progress bar not working #4248
 
+
 <a id="1_47_0"></a>
 
 ## [1.47.0] - 2024-09-22

diff --git a/packages/frontend/scss/chat/_chat-list-item.scss b/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;

diff --git a/packages/frontend/scss/contact/_contact.scss b/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;