Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 11 commits into from
May 15, 2023
6 changes: 6 additions & 0 deletions cypress/e2e/timeline/timeline.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -713,6 +713,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 (apply the same values used on decryption-failure.spec.ts)
luixxiul marked this conversation as resolved.
Show resolved Hide resolved
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");
Expand Down
21 changes: 17 additions & 4 deletions res/css/views/rooms/_SearchBar.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,42 @@ 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;
mask-position: center;
}

.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 {
Expand All @@ -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 {
Expand Down