Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Prevent select element in General settings overflowing in a room with very long room-id #11597

Merged
merged 8 commits into from
Oct 9, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions cypress/e2e/settings/general-room-settings-tab.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,30 @@ describe("General room settings tab", () => {
},
);
});

it("long address should not cause dialog to overflow", () => {
cy.openRoomSettings("General");
// 1. Set the room-address to be a really long string
const longString =
"abcasdhjasjhdaj1jh1asdhasjdhajsdhjavhjksdnfjasdhfjh21jh3j12h3jashfcjbabbabasdbdasjh1j23hk1l2j3lamajshdjkltyiuwioeuqpirjdfmngsdnf8378234jskdfjkdfnbnsdfbasjbdjashdajshfgngnsdkfsdkkqwijeqiwjeiqhrkldfnaskldklasdn";
cy.get("#roomAliases").within(() => {
cy.get("input[label='Room address']").type(longString);
cy.contains("Add").click();
});

// 2. wait for the new setting to apply ...
cy.get("#canonicalAlias").should("have.value", `#${longString}:localhost`);

// 3. Check if the dialog overflows
cy.get(".mx_Dialog")
.invoke("outerWidth")
.then((dialogWidth) => {
cy.get("#canonicalAlias")
.invoke("outerWidth")
.then((fieldWidth) => {
// Assert that the width of the select element is less than that of .mx_Dialog div.
expect(fieldWidth).to.be.lessThan(dialogWidth);
});
});
});
});
1 change: 1 addition & 0 deletions res/css/views/elements/_Field.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ limitations under the License.
.mx_Field select {
-moz-appearance: none;
-webkit-appearance: none;
text-overflow: ellipsis;
}

/* Can't add pseudo-elements to a select directly, so we use its parent. */
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/settings/tabs/_SettingsSection.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ limitations under the License.

.mx_SettingsSection_subSections {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: minmax(0, 1fr);
grid-gap: $spacing-32;

padding: $spacing-16 0;
Expand Down