From 745ddc21acb82ea0caa876fd8bd35e7c6b391efb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?=
 <jaroslaw.sadzinski@gmail.com>
Date: Thu, 18 Nov 2021 17:21:53 +0100
Subject: [PATCH] (core) Expanding search textbox to full height.

Summary: Expanding search input field to full available height, to make the clickable area bigger.

Test Plan: Manual tests on browserstack

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3145
---
 app/client/ui2018/search.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/client/ui2018/search.ts b/app/client/ui2018/search.ts
index 071b3367..56f8cd83 100644
--- a/app/client/ui2018/search.ts
+++ b/app/client/ui2018/search.ts
@@ -24,7 +24,7 @@ const searchWrapper = styled('div', `
   align-items: center;
   box-sizing: border-box;
   border: 1px solid transparent;
-  padding: 16px;
+  padding: 0px 16px;
   width: 50px;
   height: 100%;
   max-height: 50px;
@@ -48,6 +48,7 @@ const expandedSearch = styled('div', `
   align-items: center;
   width: 0;
   opacity: 0;
+  align-self: stretch;
   transition: width ${EXPAND_TIME}s, opacity ${EXPAND_TIME / 2}s ${EXPAND_TIME / 2}s;
   .${searchWrapper.className}-expand > & {
     width: auto;
@@ -63,6 +64,7 @@ const searchInput = styled(input, `
   padding: 0;
   padding-left: 4px;
   box-sizing: border-box;
+  align-self: stretch;
   width: 0;
   transition: width ${EXPAND_TIME}s;
   .${searchWrapper.className}-expand & {