PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix long display name overflowing reply tile on IRC layout (#10343)

Browse source 
* Prevent long name blowout from Replytile on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a test to check long strings do not overflow

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_DisambiguatedProfile

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-03-10 10:47:14 +00:00 committed by GitHub
parent 6141cca652
commit d244b9065c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 87 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
cypress/e2e/timeline/timeline.spec.ts
View file

@ -670,5 +670,90 @@ describe("Timeline", () => {
percyCSS,
});
});
it("should send, reply, and display long strings without overflowing", () => {
// Max 256 characters for display name
const LONG_STRING =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut " +
"et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
"aliquip";
// Create a bot with a long display name
let bot: MatrixClient;
cy.getBot(homeserver, {
displayName: LONG_STRING,
autoAcceptInvites: false,
}).then((_bot) => {
bot = _bot;
});
// Create another room with a long name, invite the bot, and open the room
cy.createRoom({ name: LONG_STRING })
.as("testRoomId")
.then((_roomId) => {
roomId = _roomId;
cy.inviteUser(roomId, bot.getUserId());
bot.joinRoom(roomId);
cy.visit("/#/room/" + roomId);
});
// Wait until configuration is finished
cy.contains(
".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
"created and configured the room.",
).should("exist");
// Set the display name to "LONG_STRING 2" in order to avoid a warning in Percy tests from being triggered
// due to the generated random mxid being displayed inside the GELS summary.
cy.setDisplayName(`${LONG_STRING} 2`);
// Have the bot send a long message
cy.get<string>("@testRoomId").then((roomId) => {
bot.sendMessage(roomId, {
body: LONG_STRING,
msgtype: "m.text",
});
});
// Wait until the message is rendered
cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").should("have.text", LONG_STRING);
// Reply to the message
cy.get(".mx_EventTile_last")
.realHover()
.within(() => {
cy.get('[aria-label="Reply"]').click({ force: false });
});
cy.getComposer().type(`${reply}{enter}`);
// Make sure the reply tile and the reply are displayed
cy.get(".mx_EventTile_last").within(() => {
cy.get(".mx_ReplyTile .mx_MTextBody").should("have.text", LONG_STRING);
cy.get(".mx_EventTile_line > .mx_MTextBody").should("have.text", reply);
});
// Exclude timestamp and read marker from snapshots
const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
// Make sure the strings do not overflow on IRC layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on IRC layout", { percyCSS });
// Make sure the strings do not overflow on modern layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line > .mx_MTextBody").should(
"have.text",
reply,
);
cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on modern layout", { percyCSS });
// Make sure the strings do not overflow on bubble layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
cy.get(".mx_EventTile_last[data-layout='bubble'] .mx_EventTile_line > .mx_MTextBody").should(
"have.text",
reply,
);
cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on bubble layout", { percyCSS });
});
});
});

3
res/css/views/rooms/_IRCLayout.pcss
View file

@ -184,9 +184,10 @@ $irc-line-height: $font-18px;
.mx_ReplyChain {
.mx_DisambiguatedProfile {
order: unset;
width: unset;
background: transparent;
order: unset;
flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */
}
.mx_EventTile_emote {