Fix profile resizer to make first character of a line selectable in I…

…RC layout (#10396)
matrix-org · Mar 21, 2023 · d8acdd1 · d8acdd1
1 parent c238e72
commit d8acdd1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)
+        );
     }
 }