From fcd9d522dc062f3fe895c4decad5ad0a70c441c0 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Fri, 8 Sep 2023 19:23:53 +0530 Subject: [PATCH 1/7] #25614 Updated mx_Field select --- res/css/structures/_TabbedView.pcss | 2 +- res/css/views/elements/_Field.pcss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index fd8d6a63ffc..6168198f880 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -150,6 +150,6 @@ limitations under the License. .mx_TabbedView_tabPanelContent { flex-grow: 1; - overflow: auto; + overflow-y: auto; min-height: 0; /* firefox */ } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 218af43a609..4764f4fdc0b 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -53,6 +53,8 @@ limitations under the License. .mx_Field select { -moz-appearance: none; -webkit-appearance: none; + width: 0; + padding-right: 1.75rem; } /* Can't add pseudo-elements to a select directly, so we use its parent. */ From 4bcac89703585da5ec9223f8a7772d093a5376a5 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 9 Sep 2023 09:45:13 +0530 Subject: [PATCH 2/7] making the changes reset --- res/css/structures/_TabbedView.pcss | 2 +- res/css/views/elements/_Field.pcss | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 6168198f880..fd8d6a63ffc 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -150,6 +150,6 @@ limitations under the License. .mx_TabbedView_tabPanelContent { flex-grow: 1; - overflow-y: auto; + overflow: auto; min-height: 0; /* firefox */ } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 4764f4fdc0b..218af43a609 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -53,8 +53,6 @@ limitations under the License. .mx_Field select { -moz-appearance: none; -webkit-appearance: none; - width: 0; - padding-right: 1.75rem; } /* Can't add pseudo-elements to a select directly, so we use its parent. */ From 77019ddd4aca6ad187dba76932e2cbd72dfa1d94 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 9 Sep 2023 09:53:19 +0530 Subject: [PATCH 3/7] #25614 Updated mx_Field select --- res/css/structures/_TabbedView.pcss | 2 +- res/css/views/elements/_Field.pcss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index fd8d6a63ffc..6168198f880 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -150,6 +150,6 @@ limitations under the License. .mx_TabbedView_tabPanelContent { flex-grow: 1; - overflow: auto; + overflow-y: auto; min-height: 0; /* firefox */ } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 218af43a609..4764f4fdc0b 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -53,6 +53,8 @@ limitations under the License. .mx_Field select { -moz-appearance: none; -webkit-appearance: none; + width: 0; + padding-right: 1.75rem; } /* Can't add pseudo-elements to a select directly, so we use its parent. */ From f938230dccdf5157263cb8d73b253d2215b97713 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Tue, 12 Sep 2023 13:48:04 +0530 Subject: [PATCH 4/7] Changes made in the grid and Select tag --- res/css/structures/_TabbedView.pcss | 2 +- res/css/views/elements/_Field.pcss | 3 +-- res/css/views/settings/tabs/_SettingsSection.pcss | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 6168198f880..fd8d6a63ffc 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -150,6 +150,6 @@ limitations under the License. .mx_TabbedView_tabPanelContent { flex-grow: 1; - overflow-y: auto; + overflow: auto; min-height: 0; /* firefox */ } diff --git a/res/css/views/elements/_Field.pcss b/res/css/views/elements/_Field.pcss index 4764f4fdc0b..52ebb0f8955 100644 --- a/res/css/views/elements/_Field.pcss +++ b/res/css/views/elements/_Field.pcss @@ -53,8 +53,7 @@ limitations under the License. .mx_Field select { -moz-appearance: none; -webkit-appearance: none; - width: 0; - padding-right: 1.75rem; + 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 0f911ea6908..6177cff012f 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; From d8bf5996aefdf4946fabf1f4214f6fae094edb13 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Thu, 5 Oct 2023 11:23:40 +0530 Subject: [PATCH 5/7] Adding test for mx_Field overflow --- cypress/e2e/settings/general-room-settings-tab.spec.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cypress/e2e/settings/general-room-settings-tab.spec.ts b/cypress/e2e/settings/general-room-settings-tab.spec.ts index fce294e791f..7f4155c61e8 100644 --- a/cypress/e2e/settings/general-room-settings-tab.spec.ts +++ b/cypress/e2e/settings/general-room-settings-tab.spec.ts @@ -67,5 +67,13 @@ describe("General room settings tab", () => { widths: [580, 796], }, ); + + cy.get(".mx_Dialog").invoke("width").then((dialogWidth) => { + // Locate the div with class mx_Field and get its width. + cy.get(".mx_Field").invoke("width").then((fieldWidth) => { + // Assert that the width of the .mx_Field div is less than the .mx_Dialog div. + expect(fieldWidth).to.be.lessThan(dialogWidth); + }); + }); }); }); From 437ded6667e7046ae41106a07af02743db9407a1 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Fri, 6 Oct 2023 19:45:45 +0530 Subject: [PATCH 6/7] Adding test for mx_Field overflow for long address --- .../general-room-settings-tab.spec.ts | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/settings/general-room-settings-tab.spec.ts b/cypress/e2e/settings/general-room-settings-tab.spec.ts index 7f4155c61e8..4c64d04545a 100644 --- a/cypress/e2e/settings/general-room-settings-tab.spec.ts +++ b/cypress/e2e/settings/general-room-settings-tab.spec.ts @@ -67,11 +67,25 @@ describe("General room settings tab", () => { widths: [580, 796], }, ); - - cy.get(".mx_Dialog").invoke("width").then((dialogWidth) => { - // Locate the div with class mx_Field and get its width. - cy.get(".mx_Field").invoke("width").then((fieldWidth) => { - // Assert that the width of the .mx_Field div is less than the .mx_Dialog div. + }); + + 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); }); }); From d497d8f917a9c0afb6389439f204faa44b8f56b4 Mon Sep 17 00:00:00 2001 From: Abhinav Date: Sat, 7 Oct 2023 05:17:08 +0530 Subject: [PATCH 7/7] Adding test for mx_Field overflow after formatting --- .../settings/general-room-settings-tab.spec.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/cypress/e2e/settings/general-room-settings-tab.spec.ts b/cypress/e2e/settings/general-room-settings-tab.spec.ts index 4c64d04545a..864b57edf6c 100644 --- a/cypress/e2e/settings/general-room-settings-tab.spec.ts +++ b/cypress/e2e/settings/general-room-settings-tab.spec.ts @@ -68,12 +68,12 @@ 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"; + "abcasdhjasjhdaj1jh1asdhasjdhajsdhjavhjksdnfjasdhfjh21jh3j12h3jashfcjbabbabasdbdasjh1j23hk1l2j3lamajshdjkltyiuwioeuqpirjdfmngsdnf8378234jskdfjkdfnbnsdfbasjbdjashdajshfgngnsdkfsdkkqwijeqiwjeiqhrkldfnaskldklasdn"; cy.get("#roomAliases").within(() => { cy.get("input[label='Room address']").type(longString); cy.contains("Add").click(); @@ -83,11 +83,15 @@ describe("General room settings tab", () => { 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); + 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); + }); }); - }); }); });