Enhance search bar in home page.

2 files changed, 5 insertions, 5 deletions

diff --git a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
index 12e61a5c..9833d515 100644
--- a/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
+++ b/Timeline/ClientApp/src/app/views/common/SearchInput.tsx
@@ -36,9 +36,9 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <div className={clsx("form-inline my-2", props.className)}>
+    <Form inline className={clsx("my-2", props.className)}>
       <Form.Control
-        className="mr-sm-2"
+        className="mr-sm-2 flex-grow-1"
         value={props.value}
         onChange={onInputChange}
         onKeyPress={onInputKeyPress}
@@ -56,7 +56,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
           </Button>
         )}
       </div>
-    </div>
+    </Form>
   );
 };
 
diff --git a/Timeline/ClientApp/src/app/views/home/index.tsx b/Timeline/ClientApp/src/app/views/home/index.tsx
index 11672c10..760adcea 100644
--- a/Timeline/ClientApp/src/app/views/home/index.tsx
+++ b/Timeline/ClientApp/src/app/views/home/index.tsx
@@ -34,8 +34,8 @@ const HomePage: React.FC = () => {
   return (
     <>
       <Container fluid>
-        <Row>
-          <Col>
+        <Row className="justify-content-center">
+          <Col xs={12} sm={10} md={8} lg={6}>
             <SearchInput
               className="justify-content-center"
               value={navText}