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

[ABHIXIT2]

This PR solves this issue element-hq/element-web#25614

There were three issues:
-The General window in th room setting had a horizontal scroll
-The main address window width wasn't restricted(even after solving first issue it was overflowing)
-The address was overlaping with the button

element-testing-on-the-app-google-chrome-2023-09-09-10-03-39_q2XNQYXZ.mp4

I corrected the first issue and second issue by setting grid-template-columns: 1fr to grid-template-columns: minmax(0, 1fr).

I set the (text-overflow:ellipsis;) to remove the overlapping of address and the button.

Element.1._.Testing.1.-.Google.Chrome.2023-09-09.10-28-36.mp4

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Prevent select element in General settings overflowing in a room with very long room-id (#11597). Contributed by @ABHIXIT2.

[ABHIXIT2]

@andybalaam please review this PR

[andybalaam]

@andybalaam please review this PR

@ABHIXIT2 there is no need to mention someone specifically - we regularly review new PRs and will get back to you. Thanks for your contribution!

[MidhunSureshR]

Hello 👋, thanks for the PR!

[ABHIXIT2]

I've commited the changes as suggested and reversed done by me that were not useful.

[MidhunSureshR]

You need to sign off this PR; you can just comment Signed-off-by: Your Name <your@email.example.org>.

[ABHIXIT2]

Signed-off-by: Abhinav Dixit dabhinav378@gmail.com

[MidhunSureshR]

Can you write a cypress test for this in https://github.com/matrix-org/matrix-react-sdk/blob/7a7e1fb43b49b994b1c901e9151125d0642f5a52/cypress/e2e/settings/general-room-settings-tab.spec.ts? You can assert that the width of the select element is less than that of .mx_Dialog.

[ABHIXIT2]

Can you write a cypress test for this in https://github.com/matrix-org/matrix-react-sdk/blob/7a7e1fb43b49b994b1c901e9151125d0642f5a52/cypress/e2e/settings/general-room-settings-tab.spec.ts? You can assert that the width of the select element is less than that of .mx_Dialog.

Okay,I'll try

[ABHIXIT2]

Can you write a cypress test for this in https://github.com/matrix-org/matrix-react-sdk/blob/7a7e1fb43b49b994b1c901e9151125d0642f5a52/cypress/e2e/settings/general-room-settings-tab.spec.ts? You can assert that the width of the select element is less than that of .mx_Dialog.

Okay,I'll try

I had been trying, not very familiar with the technology and also how it works here.
Can you please guide me, would be great help.

[andybalaam]

I had been trying, not very familiar with the technology and also how it works here. Can you please guide me, would be great help.

There are several tests inside https://github.com/matrix-org/matrix-react-sdk/tree/develop/cypress/e2e/settings that might help you to design one. Do ask if you have specific questions.

There are some instructions at https://github.com/matrix-org/matrix-react-sdk/blob/develop/docs/cypress.md that should get you started.

[rashmitpankhania]

Can you write a cypress test for this in https://github.com/matrix-org/matrix-react-sdk/blob/7a7e1fb43b49b994b1c901e9151125d0642f5a52/cypress/e2e/settings/general-room-settings-tab.spec.ts? You can assert that the width of the select element is less than that of .mx_Dialog.

Okay,I'll try

Hi @ABHIXIT2
You can add assertion like below rashmitpankhania@fe7f2f0

[ABHIXIT2]

Can you write a cypress test for this in https://github.com/matrix-org/matrix-react-sdk/blob/7a7e1fb43b49b994b1c901e9151125d0642f5a52/cypress/e2e/settings/general-room-settings-tab.spec.ts? You can assert that the width of the select element is less than that of .mx_Dialog.

I've added the test but I wasn't sure about the message and comments so I followed other commits .

[MidhunSureshR]

Thanks but you need to first set the room-address to something really long before checking for overflow:

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

[MidhunSureshR]

Format cypress/e2e/settings/general-room-settings-tab.spec.ts with prettier and we're good to merge!

[MidhunSureshR]

Thank you 🎉

[ABHIXIT2]

Thank you @MidhunSureshR @rashmitpankhania @andybalaam for the help.

[BhargavaCreates]

I am new to OSC, and this PR showed me how to work collaboratively and seek help. Thanks @ABHIXIT2 @MidhunSureshR @andybalaam for setting such good example.