From 54ca20df4b6b7d4eff7f4917b5c715f903e40100 Mon Sep 17 00:00:00 2001
From: Abhinav Dixit <114552982+ABHIXIT2@users.noreply.github.com>
Date: Mon, 9 Oct 2023 16:25:43 +0530
Subject: [PATCH] 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 <hi@midhun.dev>
---
 .../general-room-settings-tab.spec.ts         | 26 +++++++++++++++++++
 res/css/views/elements/_Field.pcss            |  1 +
 .../views/settings/tabs/_SettingsSection.pcss |  2 +-
 3 files changed, 28 insertions(+), 1 deletion(-)

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;