Fix: searchbox is wrapping under the separation line on few screen sizes

tapaswenipathak · tapaswenipathak · commit 214e06ab5b04 · 2019-10-15T06:00:13.000+05:30
Fixes #7.
diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html
@@ -13,13 +13,15 @@
 {# modified from sphinx/themes/basic/searchbox.html #}
     {%- if builder != "htmlhelp" %}
     <div class="inline-search" style="display: none" role="search">
-        <form class="inline-search" action="{{ pathto('search') }}" method="get">
-          <input placeholder="{{ _('Quick search') }}" type="text" name="q" />
-          <input type="submit" value="{{ _('Go') }}" />
-          <input type="hidden" name="check_keywords" value="yes" />
-          <input type="hidden" name="area" value="default" />
+		<div class="flex-container">
+			<form class="inline-search" action="{{ pathto('search') }}" method="get">
+			<input placeholder="{{ _('Quick search') }}" type="text" name="q" />
+			<input type="submit" value="{{ _('Go') }}" />
+			<input type="hidden" name="check_keywords" value="yes" />
+			<input type="hidden" name="area" value="default" />
         </form>
-    </div>
+		</div>
+	</div>
     <script type="text/javascript">$('.inline-search').show(0);</script>
     {%- endif %}
 {%- endmacro %}
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -22,6 +22,14 @@ div.related:first-child {
     border-bottom: 1px solid #ccc;
 }
 
+.flex.container {
+	display: flex;
+}
+
+.fill-width {
+	flex: 1;
+}
+
 .inline-search {
     display: inline;
 }
