fix: scrollbar ui (#1880)

### What does it do?

- Added `margin`
- Removed `padding-inline`
- Added `border-radius`

### Why is it needed?

See #1875.

### How to test it?

You'll need to check the preview.

### Related issue(s)/PR(s)

fixes #1875

Author: HichamELBSI

.changeset/cool-mayflies-arrive.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: scrollbar ui

packages/design-system/src/utilities/ScrollArea/ScrollArea.tsx

@@ -39,7 +39,6 @@ const ScrollAreaRoot = styled(ScrollArea.Root)`
 
 const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   min-width: 100%;
-  padding-inline: 4px;
 `;
 
 const Scrollbar = styled(ScrollArea.Scrollbar)`
@@ -51,19 +50,21 @@ const Scrollbar = styled(ScrollArea.Scrollbar)`
 
   &[data-orientation='vertical'] {
     width: 0.4rem;
+    margin: 0.4rem;
   }
 
   &[data-orientation='horizontal'] {
     flex-direction: column;
     height: 0.4rem;
+    margin: 0.4rem;
   }
 `;
 
 const Thumb = styled(ScrollArea.Thumb)`
   position: relative;
   flex: 1;
   background-color: ${(props) => props.theme.colors.neutral150};
-  border-radius: var(--scrollbar-size);
+  border-radius: 0.4rem;
 
   /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
   &::before {