Add vertical scrollbar track margins for modern UI mode

- as we scroll down, the mode button appears. the issue is that we experience a slight jitter
- why [Pasted text] does work, but [Pasted text] doesn't? we have modern-ui set and somethign like this in other place works [Pasted text]

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       └── Home
│                           ├── Home.module.scss
│                           ├── Home.tsx
│                           ├── hooks
│                           │   ├── use-sticky-mode.ts
│                           │   └── use-tasks.ts
│                           └── index.ts
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   └── DropdownMenu
                    │       └── DropdownMenu.module.scss
                    └── prompt
                        └── ModeButton
                            ├── ModeButton.module.scss
                            ├── ModeButton.stories.tsx
                            └── ModeButton.tsx

Author: robertpiosik

packages/ui/src/components/editor/common/DropdownMenu/DropdownMenu.module.scss

@@ -14,6 +14,14 @@
     border: 1px solid var(--cwc-border-color-dimmed);
     box-shadow: 0 0 8px 2px var(--vscode-widget-shadow);
     overflow: hidden;
+
+    :global([data-modern-ui='true']) & {
+      :global {
+        .simplebar-track.simplebar-vertical {
+          margin: 4px 0;
+        }
+      }
+    }
   }
 }
 

packages/ui/src/components/editor/settings/Layout/Layout.module.scss

@@ -54,6 +54,13 @@
   flex: 1;
   overflow: hidden;
   display: flex;
+  :global([data-modern-ui='true']) & {
+    :global {
+      .simplebar-track.simplebar-vertical {
+        margin: 4px 0;
+      }
+    }
+  }
 
   &__inner {
     display: flex;