From 5648968a724cd45b17043fc39b48633a8bdb96b3 Mon Sep 17 00:00:00 2001
From: Youri Westerman <tetracon@gmail.com>
Date: Sat, 9 Feb 2019 23:18:08 +0100
Subject: [PATCH] Scaling text input field to keep enough room for the buttons

---
 .../ShopBundle/Resources/private/scss/style.scss     | 12 ++++++++++++
 .../Resources/views/Product/Index/_search.html.twig  |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss b/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss
index a4b03704208..996f8ed2ca2 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss
+++ b/src/Sylius/Bundle/ShopBundle/Resources/private/scss/style.scss
@@ -31,3 +31,15 @@ body {
 .ui.unmargined.segments {
   margin: 0;
 }
+
+#searchbar {
+    display: flex;
+}
+
+#searchbarTextField {
+    flex-grow: 100;
+}
+
+#searchbarButtons {
+    width: fit-content;
+}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_search.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_search.html.twig
index 96315e12dec..1c73b5a80dd 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_search.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_search.html.twig
@@ -1,12 +1,12 @@
 <div class="ui segment">
     <form method="get" action="{{ path('sylius_shop_product_index', {'slug': app.request.attributes.get('slug')}) }}" class="ui loadable form">
-        <div class="ui stackable grid">
-            <div class="eleven wide column">
+        <div class="ui stackable grid" id="searchbar">
+            <div class="column" id="searchbarTextField">
                 {% for filter in products.definition.enabledFilters %}
                     {{ sylius_grid_render_filter(products, filter) }}
                 {% endfor %}
             </div>
-            <div class="three wide column">
+            <div class="right aligned column" id="searchbarButtons">
                 <div class="ui buttons">
                     <button type="submit" class="ui primary icon labeled button"><i class="search icon"></i> {{ 'sylius.ui.search'|trans }}</button>
                     <a href="{{ path('sylius_shop_product_index', {'slug': app.request.attributes.get('slug')}) }}" class="ui negative icon labeled button">