Improves styling for search input

dremendes · Dec 17, 2022 · f6dc85c · f6dc85c
1 parent e3b7f35
commit f6dc85c
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/pages/launches.tsx b/pages/launches.tsx
@@ -48,11 +48,16 @@ export default function Launches() {
         placeholder="Search by mission name"
         value={search}
         onChange={(event) => setSearch(event.target.value)}
+        flexWrap="wrap"
+        width='550px'
+        alignSelf='center'
+        display='block'
+        margin='20px auto'
       />
       <Flex  align="center" justify="center" flexWrap="wrap">
-      {uniqueLaunches?.filter((launch: launch) =>
-        launch.mission_name.toLowerCase().includes(search.toLowerCase())
-      ).map((launch: launch) => (
+        {uniqueLaunches?.filter((launch: launch) =>
+          launch.mission_name.toLowerCase().includes(search.toLowerCase())
+        ).map((launch: launch) => (
           <Card key={launch.id}>
             <CardHeader>
               <Heading size='md'>Mission: {launch.mission_name.length >= 15 ? (launch.mission_name.slice(0,13) + '...') : launch.mission_name }</Heading>