fix(search): fixes search inputs being too small

src/__tests__/patients/view/ViewPatient.test.tsx

@@ -113,7 +113,6 @@ describe('ViewPatient', () => {
     setup()
 
     const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
-    console.log(actualButtons)
     expect(actualButtons.length).toEqual(0)
   })
 

src/patients/appointments/AppointmentsList.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
+import { TextInput, Button, List, ListItem, Container, Row, Column } from '@hospitalrun/components'
 import { RootState } from '../../store'
 import { fetchPatientAppointments } from '../../scheduling/appointments/appointments-slice'
 import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
@@ -54,18 +54,23 @@ const AppointmentsList = (props: Props) => {
 
   return (
     <Container>
-      <form className="form-inline" onSubmit={onSearchFormSubmit}>
-        <div className="input-group" style={{ width: '100%' }}>
-          <TextInput
-            size="lg"
-            value={searchText}
-            placeholder={t('actions.search')}
-            onChange={onSearchBoxChange}
-          />
-          <div className="input-group-append">
-            <Button onClick={onSearchFormSubmit}>{t('actions.search')}</Button>
-          </div>
-        </div>
+      <form className="form" onSubmit={onSearchFormSubmit}>
+        <Row>
+          <Column md={10}>
+            <TextInput
+              size="lg"
+              type="text"
+              onChange={onSearchBoxChange}
+              value={searchText}
+              placeholder={t('actions.search')}
+            />
+          </Column>
+          <Column md={2}>
+            <Button size="large" onClick={onSearchFormSubmit}>
+              {t('actions.search')}
+            </Button>
+          </Column>
+        </Row>
       </form>
 
       <Row>

src/patients/list/Patients.tsx

@@ -2,7 +2,16 @@ import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
-import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
+import {
+  Spinner,
+  Button,
+  List,
+  ListItem,
+  Container,
+  Row,
+  TextInput,
+  Column,
+} from '@hospitalrun/components'
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import { RootState } from '../../store'
 import { fetchPatients, searchPatients } from '../patients-slice'
@@ -67,18 +76,23 @@ const Patients = () => {
 
   return (
     <Container>
-      <form className="form-inline" onSubmit={onSearchFormSubmit}>
-        <div className="input-group" style={{ width: '100%' }}>
-          <TextInput
-            size="lg"
-            value={searchText}
-            placeholder={t('actions.search')}
-            onChange={onSearchBoxChange}
-          />
-          <div className="input-group-append">
-            <Button onClick={onSearchFormSubmit}>{t('actions.search')}</Button>
-          </div>
-        </div>
+      <form className="form" onSubmit={onSearchFormSubmit}>
+        <Row>
+          <Column md={10}>
+            <TextInput
+              size="lg"
+              type="text"
+              onChange={onSearchBoxChange}
+              value={searchText}
+              placeholder={t('actions.search')}
+            />
+          </Column>
+          <Column md={2}>
+            <Button size="large" onClick={onSearchFormSubmit}>
+              {t('actions.search')}
+            </Button>
+          </Column>
+        </Row>
       </form>
 
       <Row>