made header sticky

Author: felipenmoura

src/App.scss

@@ -10,8 +10,10 @@ body {
   display: flex;
   gap: 5px;
   justify-content: center;
-  background: linear-gradient(0deg, #494 10px, transparent);
+  background: linear-gradient(0deg, #494 10px, white);
   padding: 10px;
+  position: sticky;
+  top: 0;
 }
 
 .header button {

src/components/cities-grid/index.js

@@ -45,7 +45,7 @@ export default function CitiesGrid (props) {
         <tbody>
           {cities.map((city) => {
             return (
-              <tr>
+              <tr key={city.nome}>
                 <td>{city.nome}</td>
                 <td>{city.municipio.microrregiao.nome}</td>
               </tr>

src/components/cities-grid/index.scss

@@ -8,6 +8,8 @@
   color: white;
   text-align: center;
   font-weight: bold;
+  position: sticky;
+  top: 50px;
 }
 
 .cities-table td {