PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix timeline search bar being overlapped by the right panel (#10809)

Browse source 
* Set zero min-width to prevent input area blowout

* Set min-width values to mx_SearchBar_input and mx_SearchBar_button

* Prevent the input area and cancel button from being overlapped by BaseCard

* Use custom properties: --size-button-search

* Take Percy snapshot of mx_SearchBar

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Edit a comment

* Feedback

* Edit a comment

* Update cypress/e2e/timeline/timeline.spec.ts

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-05-15 11:58:59 +00:00 committed by GitHub
parent d213dff4c6
commit 4d59a6ff1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
cypress/e2e/timeline/timeline.spec.ts
View file

@ -714,6 +714,12 @@ describe("Timeline", () => {
cy.visit("/#/room/" + roomId);
cy.get(".mx_RoomHeader").findByRole("button", { name: "Search" }).click();
cy.get(".mx_SearchBar").percySnapshotElement("Search bar on the timeline", {
// Emulate narrow timeline
widths: [320, 640],
});
cy.get(".mx_SearchBar_input input").type("Message{enter}");
cy.get(".mx_EventTile:not(.mx_EventTile_contextual) .mx_EventTile_searchHighlight").should("exist");

21
res/css/views/rooms/_SearchBar.pcss
View file

@ -15,22 +15,33 @@ limitations under the License.
*/
.mx_SearchBar {
height: 56px;
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
min-height: 56px;
display: flex;
align-items: center;
border-bottom: 1px solid $primary-hairline-color;
.mx_SearchBar_input {
--size-button-search: 37px; /* size of the search button inside `input` element */
/* border: 1px solid $input-border-color; */
/* font-size: $font-15px; */
flex: 1 1 0;
margin-left: 22px;
/* do not allow the input element to shrink below the width needed for the placeholder 'Search…'
and the search button */
min-width: calc(7em + var(--size-button-search));
input {
box-sizing: border-box; /* include padding value into width calculation */
}
}
.mx_SearchBar_searchButton {
cursor: pointer;
width: 37px;
height: 37px;
width: var(--size-button-search);
height: var(--size-button-search);
background-color: $accent;
mask: url("$(res)/img/feather-customised/search-input.svg");
mask-repeat: no-repeat;
@ -38,7 +49,8 @@ limitations under the License.
}
.mx_SearchBar_buttons {
display: inherit;
display: inherit; /* flex */
min-width: 0; /* have the close button displayed even on a very narrow timeline */
}
.mx_SearchBar_button {
@ -50,6 +62,7 @@ limitations under the License.
color: $primary-content;
border-bottom: 2px solid $accent;
font-weight: var(--font-semi-bold);
word-break: break-all; /* prevent the input area and cancel button from being overlapped by BaseCard */
}
.mx_SearchBar_unselected {