Refactor Intro component layout for improved vertical distribution, ensure scrollable content fills height, and adjust minor component spacing

Author: robertpiosik

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.module.scss

@@ -7,7 +7,7 @@
 .donations {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-10px);
+  gap: var(--padding-8px);
 
   &__heading {
     color: var(--vscode-descriptionForeground);

packages/ui/src/styles/global.scss

@@ -41,3 +41,7 @@ a:focus {
 strong {
   font-weight: 600;
 }
+
+.simplebar-content {
+  height: 100%;
+}

packages/vscode/src/view/frontend/intro/Intro/Intro.module.scss

@@ -9,10 +9,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
   gap: var(--padding-24px);
   height: 100%;
-  width: 100%;
-  padding: var(--padding-5px) var(--padding-12px) var(--padding-12px);
+  padding: var(--padding-5px) var(--padding-12px) 0 var(--padding-12px);
 }
 
 .top {
@@ -59,9 +59,9 @@
   text-align: center;
   gap: var(--padding-8px);
   font-size: var(--font-size-12px);
-  margin-top: auto;
   user-select: text;
   width: 100%; // For easier text selection
+  padding-bottom: var(--padding-12px);
 
   &__links {
     display: flex;