From 82396661cf86d7c41285cded2d22523e84f3bc23 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Fri, 8 May 2020 22:21:26 +0100
Subject: [PATCH] Implement nitpicks

- usernames are elipsed
- icon alignment fixed
- replies are more dense
- reply messages respond to name widths
- fixed between message padding problem (flex ftw)
---
 res/css/views/rooms/_IRCLayout.scss | 62 +++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 12 deletions(-)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index fcdeef6590..f5d8664884 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -18,12 +18,19 @@ $name-width: 70px;
 $icon-width: 14px;
 $timestamp-width: 45px;
 $right-padding: 5px;
+$irc-line-height: $font-18px;
 
 .mx_IRCLayout {
 
-    line-height: $font-18px !important;
+    line-height: $irc-line-height !important;
 
     .mx_EventTile {
+
+        // timestamps are links which shouldn't be underlined
+        > a {
+            text-decoration: none;
+        }
+
         display: flex;
         flex-direction: row;
         align-items: flex-start;
@@ -49,7 +56,10 @@ $right-padding: 5px;
             overflow: visible;
         }
 
-        > .mx_EventTile_line {
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
             order: 3;
             flex-grow: 1;
         }
@@ -60,7 +70,7 @@ $right-padding: 5px;
             top: 0;
             left: 0;
             flex-shrink: 0;
-            height: 22px;
+            height: $irc-line-height;
             display: flex;
             align-items: center;
 
@@ -79,10 +89,6 @@ $right-padding: 5px;
             text-align: right;
         }
 
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding: 0;
-        }
-
         .mx_EventTile_e2eIcon {
             position: relative;
             right: unset;
@@ -98,6 +104,8 @@ $right-padding: 5px;
             .mx_ReplyThread_wrapper_empty {
                 display: inline-block;
             }
+
+            
         }
 
         .mx_EvenTile_line .mx_MessageActionBar,
@@ -114,10 +122,25 @@ $right-padding: 5px;
         }
     }
 
+    .mx_EventTile_emote {
+        > .mx_EventTile_avatar {
+            margin-left: calc($name-width + $icon-width + $right-padding);
+        }
+    }
+
+    blockquote {
+        margin: 0;
+    }
+
     .mx_EventListSummary {
         > .mx_EventTile_line {
             padding-left: calc($name-width + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
         }
+
+        .mx_EventListSummary_avatars {
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .mx_EventTile.mx_EventTile_info {
@@ -131,16 +154,16 @@ $right-padding: 5px;
         }
 
         .mx_TextualEvent {
-            line-height: $font-22px;
+            line-height: $irc-line-height;
         }
     }
 
     .mx_EventTile_continuation:not(.mx_EventTile_info) {
-        .mx_EventTile_avatar {
+        > .mx_EventTile_avatar {
             visibility: hidden;
         }
 
-        .mx_SenderProfile {
+        > .mx_SenderProfile {
             visibility: hidden;
         }
     }
@@ -156,8 +179,15 @@ $right-padding: 5px;
     .mx_SenderProfile_hover {
         background-color: $primary-bg-color;
         overflow: hidden;
-        width: $name-width;
-        transition: width 2s;
+
+        > span {
+            display: flex;
+
+            > .mx_SenderProfile_name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
     }
 
     .mx_SenderProfile_hover:hover {
@@ -165,4 +195,12 @@ $right-padding: 5px;
         width: auto;
         z-index: 10;
     }
+
+    .mx_ReplyThread {
+        margin: 0;
+        .mx_SenderProfile {
+            width: unset;
+            max-width: $name-width;
+        }
+    }
 }