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) + ); } }