From d8acdd1750b78526887229b91227d25f1a0bef39 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 21 Mar 2023 09:10:13 +0000
Subject: [PATCH] Fix profile resizer to make first character of a line
 selectable in IRC layout (#10396)

---
 cypress/e2e/timeline/timeline.spec.ts | 19 +++++++++++++++++--
 res/css/_common.pcss                  |  1 +
 res/css/structures/_RoomView.pcss     |  6 +++++-
 res/css/views/rooms/_IRCLayout.pcss   | 16 ++++++++++++++--
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts
index 1ea4d5d129..2f3b588a03 100644
--- a/cypress/e2e/timeline/timeline.spec.ts
+++ b/cypress/e2e/timeline/timeline.spec.ts
@@ -161,8 +161,23 @@ describe("Timeline", () => {
                 "created and configured the room.",
             ).should("exist");
 
-            // Check room name line-height is reset
-            cy.get(".mx_IRCLayout .mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
+            cy.get(".mx_IRCLayout").within(() => {
+                // Check room name line-height is reset
+                cy.get(".mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
+
+                // Check the profile resizer's place
+                // See: _IRCLayout
+                // --RoomView_MessageList-padding = 18px (See: _RoomView.pcss)
+                // --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss)
+                // --icon-width = 14px
+                // --right-padding = 5px
+                // --name-width = 80px
+                // --resizer-width = 15px
+                // --resizer-a11y = 3px
+                // 18px + 46px + 14px + 5px + 80px + 5px - 15px - 3px
+                // = 150px
+                cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "150px");
+            });
 
             cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
         });
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index 7b0d4c8d87..bec6fe8844 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -42,6 +42,7 @@ $timeline-image-border-radius: 8px;
 
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
+    --MessageTimestamp-width: $MessageTimestamp_width;
 }
 
 @media (prefers-reduced-motion) {
diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss
index 755ec98ae2..b03ea7d0ab 100644
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+:root {
+    --RoomView_MessageList-padding: 18px; /* TODO: use a variable */
+}
+
 .mx_RoomView_wrapper {
     display: flex;
     flex-direction: column;
@@ -176,7 +180,7 @@ limitations under the License.
 
 .mx_RoomView_MessageList {
     list-style-type: none;
-    padding: 18px;
+    padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
     margin: 0;
     /* needed as min-height is set to clientHeight in ScrollPanel
     to prevent shrinking when WhoIsTypingTile is hidden */
diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss
index 61a7c5e090..21a7eab6e9 100644
--- a/res/css/views/rooms/_IRCLayout.pcss
+++ b/res/css/views/rooms/_IRCLayout.pcss
@@ -217,11 +217,23 @@ $irc-line-height: $font-18px;
     }
 
     .mx_ProfileResizer {
+        --resizer-width: 15px;
+        --resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
+
         position: absolute;
         height: 100%;
-        width: 15px;
-        left: calc(80px + var(--name-width));
+        width: var(--resizer-width);
         cursor: col-resize;
         z-index: 100;
+
+        /* Add width of every element rendered before the resizer (including padding for the avatar and the display
+           name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
+           the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
+           Please note that MessageTimestamp does not have inline padding. */
+        inset-inline-start: calc(
+            var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
+                var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
+                var(--resizer-a11y)
+        );
     }
 }