ref(ui): Improve spacing for scroll bar on carousel (#54742)

1. Hides the scrollbar by not setting any styles

 2. Make room for the scroll bar by giving it 12px of padding. We match
    the padding on the top since otherwise things would not be balanced.

Before

![clipboard.png](https://i.imgur.com/Fq0EoXD.png)

After

![clipboard.png](https://i.imgur.com/xdlkvNk.png)

static/app/components/carousel.tsx

@@ -94,21 +94,20 @@ function Carousel({children}: Props) {
 
 const CarouselContainer = styled('div')`
   position: relative;
-  padding-bottom: ${space(0.5)};
+  /* We provide some margin to make room for the scroll bar. It is applied on
+   * the top and bottom for consistency.
+   */
+  margin: ${space(0.25)};
 `;
 
 const CarouselItems = styled('div')`
   display: flex;
   overflow-x: scroll;
   scroll-behavior: smooth;
-  &::-webkit-scrollbar {
-    background-color: transparent;
-    height: 8px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: ${p => p.theme.gray300};
-    border-radius: 8px;
-  }
+  /* We provide some margin to make room for the scroll bar. It is applied on
+   * the top and bottom for consistency.
+   */
+  padding: ${space(1.5)} 0;
 `;
 
 const Anchor = styled('div')``;