Prevent select element in General settings overflowing in a room with…

… very long room-id (#11597)

* #25614 Updated mx_Field select

* making the changes reset

* #25614 Updated mx_Field select

* Changes made in the grid and Select tag

* Adding test for mx_Field overflow

* Adding test for mx_Field overflow for long address

* Adding test for mx_Field overflow after formatting

---------

Co-authored-by: R Midhun Suresh <[email protected]>

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

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. */

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;