changed scroll bar styling

Author: Hannah Dunsmore

src/Components/RoverDetails/RoverDetails.scss

@@ -81,6 +81,20 @@
         gap: 1rem;
         padding: 1rem;
         scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        white-space: nowrap;
+
+        &::-webkit-scrollbar {
+            height: 10px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #999;
+        }
 
         button {
             flex: 0 0 auto;

src/Components/RoverDetails/RoverDetails.tsx

@@ -37,7 +37,7 @@ function RoverDetails() {
   return (
     <div id="rover-information-container">
       <h2 id="rover-header">CHOOSE A ROVER</h2>
-      <span id="scroll-message">Scroll to pick a rover!</span>
+      <span id="scroll-message">Scroll to pick!</span>
       <div id="rover-button-container" className="button-carousel">
         <button
           className={