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

* 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>

cypress/e2e/timeline/timeline.spec.ts

@@ -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");

res/css/views/rooms/_SearchBar.pcss

@@ -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;
+        width: var(--size-button-search);
-        height: 37px;
+        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 {