From 8ea8b4692c4708e7fb7613517ca1cbee9a400bcc Mon Sep 17 00:00:00 2001
From: Joris Van den Bossche <jorisvandenbossche@gmail.com>
Date: Wed, 27 Oct 2021 18:00:22 +0200
Subject: [PATCH] ARROW-14189: [Docs] Version dropdown side-by-side with search
 box

---
 docs/source/_static/theme_overrides.css      | 19 +++++++++++++++++++
 docs/source/_templates/docs-sidebar.html     |  6 +++++-
 docs/source/_templates/version-switcher.html |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/docs/source/_static/theme_overrides.css b/docs/source/_static/theme_overrides.css
index 0edc5c5023a..d7d0bdfdbe1 100644
--- a/docs/source/_static/theme_overrides.css
+++ b/docs/source/_static/theme_overrides.css
@@ -93,6 +93,25 @@ Details: min(15vh, 110px) for the logo size, 8rem for search box etc*/
   }
 }
 
+/* Styling to get the version dropdown and search box side-by-side on wide screens */
+
+#version-search-wrapper {
+  overflow: hidden;
+  width: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: center;
+}
+
+#version-button {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+#search-box {
+  flex: 1 0 12em;
+}
 
 /* Fix table text wrapping in RTD theme,
  * see https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html
diff --git a/docs/source/_templates/docs-sidebar.html b/docs/source/_templates/docs-sidebar.html
index 9ae2e19031f..fde4435df30 100644
--- a/docs/source/_templates/docs-sidebar.html
+++ b/docs/source/_templates/docs-sidebar.html
@@ -3,13 +3,17 @@
   <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
 </a>
 
+<div id="version-search-wrapper">
+
 {% include "version-switcher.html" %}
 
-<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
+<form id="search-box" class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
   <i class="icon fas fa-search"></i>
   <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ theme_search_bar_text }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
 </form>
 
+</div>
+
 <nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
   <div class="bd-toc-item active">
     {% if "python/api" in pagename or "python/generated" in pagename %}
diff --git a/docs/source/_templates/version-switcher.html b/docs/source/_templates/version-switcher.html
index 297a2b0e4f4..24a8c15ac01 100644
--- a/docs/source/_templates/version-switcher.html
+++ b/docs/source/_templates/version-switcher.html
@@ -1,4 +1,4 @@
-<div class="dropdown">
+<div id="version-button" class="dropdown">
     <button type="button" class="btn btn-secondary btn-sm navbar-btn dropdown-toggle" id="version_switcher_button" data-toggle="dropdown">
         {{ release }}
         <span class="caret"></span>