From a581cf642fa0ff06c27e3d3d95af02aec3abd87d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 3 Nov 2020 23:37:28 +0800
Subject: feat: Enhance home page layout.

---
 FrontEnd/src/app/views/common/SearchInput.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'FrontEnd/src/app/views/common/SearchInput.tsx')

diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index 9833d515..1373bd68 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <Form inline className={clsx("my-2", props.className)}>
+    <Form inline className={clsx(" flex-sm-nowrap", props.className)}>
       <Form.Control
         className="mr-sm-2 flex-grow-1"
         value={props.value}
@@ -44,10 +44,12 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
         onKeyPress={onInputKeyPress}
         placeholder={props.placeholder}
       />
-      <div className="mt-2 mt-sm-0 order-sm-last ml-sm-3">
-        {props.additionalButton}
-      </div>
-      <div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
+      {props.additionalButton ? (
+        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ml-sm-2">
+          {props.additionalButton}
+        </div>
+      ) : null}
+      <div className="mt-2 mt-sm-0 flex-shrink-0 ml-auto ml-sm-0">
         {props.loading ? (
           <Spinner variant="primary" animation="border" />
         ) : (
-- 
cgit v1.2.3