diff --git a/cypress/e2e/settings/general-room-settings-tab.spec.ts b/cypress/e2e/settings/general-room-settings-tab.spec.ts index fce294e791..864b57edf6 100644 --- a/cypress/e2e/settings/general-room-settings-tab.spec.ts +++ b/cypress/e2e/settings/general-room-settings-tab.spec.ts @@ -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); + }); + }); + }); }); diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 218af43a60..52ebb0f895 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -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. */ diff --git a/res/css/views/settings/tabs/_SettingsSection.pcss b/res/css/views/settings/tabs/_SettingsSection.pcss index 0f911ea690..6177cff012 100644 --- a/res/css/views/settings/tabs/_SettingsSection.pcss +++ b/res/css/views/settings/tabs/_SettingsSection.pcss @@ -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;