[MERGE] Forward-port of branch 12.0 to 13.0

extensions/odoo_theme/layout.html

@@ -91,10 +91,6 @@
             {%- set main_classes = main_classes + ['o_fullwidth_page'] %}
         {%- endif %}
 
-        <div class="px-3 py-4 d-lg-none">
-            <!-- Searchbox only visible in mobile -->
-            {%- include "layout_templates/searchbox.html" %}
-        </div>
         <main class="container-fluid {{ ' '.join(main_classes) }}">
             {%- if pagename == master_doc %}
                 {# Custom landing page on the root of the documentation #}

extensions/odoo_theme/layout_templates/searchbox.html

@@ -1,6 +1,5 @@
 {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
-{# NOTE: currently renamed to '_searchbox' to hide the button until it receives proper styling #}
-<div id="_searchbox" class="o_search_wrapper flex-grow-1 justify-content-stretch justify-content-lg-start pe-lg-2" role="search">
+<div id="searchbox" class="o_search_wrapper flex-grow-1 pe-lg-2" role="search">
     <form class="o_search" action="{{ pathto('search') }}" method="get">
         <input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
         <input type="hidden" name="area" value="default">

extensions/odoo_theme/static/style.scss

@@ -72,17 +72,22 @@ header.o_main_header{
         }
     }
     .o_search_wrapper {
+        display: flex;
         @include media-breakpoint-down(lg) {
-           display: none !important;
+            display: block;
+            position: absolute;
+            width: 100%;
+            padding: 0 10px;
+            top: calc(100% + 30px);
        }
     }
 
     .highlight-link {
         margin-bottom: 0;
-        display: flex;
-        align-items: center;
+        padding: 0 1rem;
+        text-align: center;
+        align-self: center;
         a {
-            padding: 0 1rem;
             @include font-size($font-size-secondary);
         }
     }
@@ -369,6 +374,9 @@ header.o_main_header{
     main {
         position: relative;
         padding-top: 3rem;
+        @include media-breakpoint-down(lg) {
+            padding-top: 7rem;
+        }
         padding-bottom: 3rem;
 
         @include media-breakpoint-up(lg) {