fix: improve layout responsiveness

Author: barjin

apify-docs-theme/src/theme/SearchBar/index.js

@@ -63,11 +63,9 @@ export default function SearchBar({ onClick }) {
     return (
         <BrowserOnly>
             {() => (
-                <div
-                    style={{ display: 'flex', alignItems: 'center' }}
-                >
+                <div className="SearchButton-Container">
 
-                <div onClick={onClick} style={{ marginRight: '12px' }}>
+                <div onClick={onClick} className="AlgoliaContainer" style={{ marginRight: '12px' }}>
                     <ApifySearch
                         algoliaAppId={siteConfig.themeConfig.algolia.appId}
                         algoliaIndexName='apify_sdk_v2'

apify-docs-theme/src/theme/SearchBar/styles.css

@@ -42,20 +42,34 @@
   transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
 
-.navbar-sidebar .DocSearch-Button {
+.SearchButton-Container {
+  display: flex;
+  align-items: center;
+}
+
+.navbar-sidebar .SearchButton-Container {
   display: none;
 }
 
 @media (max-width: 768px) {
+    .SearchButton-Container {
+      width: 100%;
+    }
+
+    .AlgoliaContainer {
+      flex: 1;
+    }
+
     .DocSearch-Button {
       width: 100%;
+      justify-content: space-between;
     }
 
-    .navbar__inner .DocSearch-Button {
+    .navbar__inner .SearchButton-Container {
       display: none;
     }
 
-    .navbar-sidebar .DocSearch-Button {
+    .navbar-sidebar .SearchButton-Container {
       display: flex;
     }