Fix --name-width on _IRCLayout.pcss#9064
Conversation
github-actions
Bot
added
Z-Community-PR
| // calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); | ||
| // = 80 + 14 + 46($MessageTimestamp_width) + 3*5 = 155px | ||
| cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line") | ||
| .should('have.css', 'padding-inline-start', '155px'); |
There was a problem hiding this comment.
Setting this value to 145px (--name-width: 70px) returns an error, therefore --name-width on _IRClayout.pcss should be changed from 70px to 80px, which is a default value on a new room.
There was a problem hiding this comment.
If only CSS properties are asserted without a screenshot this test should be a jest unit-test. You can ask for support on how to do this through the usual channels.
| // calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); | ||
| // = 80 + 14 + 46($MessageTimestamp_width) + 3*5 = 155px | ||
| cy.get(".mx_GenericEventListSummary[data-layout=irc] > .mx_EventTile_line") | ||
| .should('have.css', 'padding-inline-start', '155px'); |
There was a problem hiding this comment.
If only CSS properties are asserted without a screenshot this test should be a jest unit-test. You can ask for support on how to do this through the usual channels.
Except Jest doesn't load CSS due to it being loaded by the Element Web layer, thus needing an end-to-end test given how we structure our components. |
| }); | ||
|
|
||
| it("should create and configure a room on IRC layout", () => { | ||
| it("should configure a room on IRC layout", () => { |
There was a problem hiding this comment.
Because this test does not create a room.
| // calc(var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 3 * var(--right-padding)); | ||
| // = 80 + 14 + 46($MessageTimestamp_width) + 3*5 = 155px | ||
| .should('have.css', 'padding-inline-start', '155px'); | ||
| cy.percySnapshot("EventTile_line of GenericEventListSummary"); |
There was a problem hiding this comment.
This is the same snapshot as in line 153, I would say. One should be enough.
There was a problem hiding this comment.
Right, thanks for pointing out.
|
Hi @luixxiul can you please update your branch and resolve the conflicts? |
|
Hmm 🤔 They are looking both wrong
Were the screenshots taken too early, when the layout is still settling down? |
|
I guess it is due to https://github.com/matrix-org/matrix-react-sdk/pull/9064/files#diff-8aa427661b195fe975f24c7fcc49a73653161921f730b265699f3492821bebd6R173, which is not added by this PR. |
|
That is not what I mean. When looking at the actual app everything is bottom-aligned:
Both screenshots look different. |
|
Ah I see, let me check. |
…n Settings.tsx Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
luixxiul
changed the title
luixxiul
changed the title
|
The test has been already implemented with another PR. The issue related to the |
3 participants
This PR fixes the
--name-widthon _IRCLayout.pcss.The name width
--name-widthwas set to 70px on this line of #4531, while at the same time the default value was set to 80px on this line of the same PR. The reason is not clear, but since the latter value has been respected on the UI anyway, the former should be able to be changed to 80px.Signed-off-by: Suguru Hirahara luixxiul@users.noreply.github.com
type: task
Checklist
This change is marked as an internal change (Task), so will not be included in the changelog.