diff --git a/res/css/_common.scss b/res/css/_common.scss
index 87336a1c03..6e9d252659 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -21,6 +21,11 @@ limitations under the License.
 
 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
 
+$EventTile_e2e_state_indicator_width: 4px;
+
+$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
+$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
+
 :root {
     font-size: 10px;
 }
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 429ac7ed4b..92b218e937 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -421,15 +421,15 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: $e2e-verified-color 4px solid;
+    border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 4px solid;
+    border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    border-left: $e2e-unknown-color 4px solid;
+    border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@@ -447,8 +447,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
+    width: $MessageTimestamp_width_hover;
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
diff --git a/res/css/views/rooms/_GroupLayout.scss b/res/css/views/rooms/_GroupLayout.scss
index 50ef50110f..543e6ed685 100644
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@@ -34,7 +34,7 @@ $left-gutter: 64px;
 
         .mx_MessageTimestamp {
             position: absolute;
-            width: 46px; /* 8 + 30 (avatar) + 8 */
+            width: $MessageTimestamp_width;
         }
 
         .mx_EventTile_line, .mx_EventTile_reply {