Fix tree view alignment and padding issues

This commit addresses issues with the tree view not fully utilizing the
available width (appearing squeezed on the left) on bigger screens, and
inconsistent padding during searches.

The changes centralize padding and script tree rendering logic to
enforce consistency and prevent regression.

Changes:

- Fix tree view width utilization.
- Refactor SCSS variables for better IDE support.
- Unify padding and tree background color logic for consistent padding
  and coloring around the tree component.
- Fix no padding around the tree in tree view.
- Centralize color SCSS variable for script background for consistent
  application theming.

src/presentation/assets/styles/_colors.scss

@@ -1,7 +1,10 @@
 /*
     Colors used throughout the application
-    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
-    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
+    Inspired by the material color system (https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color).
+    Colors are named according to the Vue Design System guidelines (https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors):
+        - Default: The default base color is `color-{name}`.
+        - Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
+        - Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
 */
 
 // --- Primary | The color displayed most frequently across screens and components
@@ -26,3 +29,12 @@ $color-on-surface           : #4d5156;
 
 // Background | Appears behind scrollable content.
 $color-background           : #e6ecf4;
+
+
+/*
+    Application-specific colors:
+    These are tailored to the specific needs of the application and derived from the above theme colors.
+    Use these colors to ensure consistent styling across components. When adding new colors, reference existing theme colors.
+    This approach maintains a cohesive look and feel and simplifies theme adjustments.
+*/
+$color-scripts-bg: $color-primary-darker;

src/presentation/assets/styles/_mixins.scss

@@ -64,4 +64,4 @@
   margin: 0;
   padding: 0;
   list-style: none;
-}
+}