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>

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;