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/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -167,7 +167,7 @@ $base-spacing: $text-size;
     @include no-margin('blockquote');
     @include no-margin('pre');
 
-    /* Add spacing between elements using `margin-bottom` only (bottom-out instead of top-down strategy). */
+    /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
     $small-vertical-spacing: math.div($base-vertical-spacing, 2);
     @include bottom-margin('p', $base-vertical-spacing);
     @include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);

src/presentation/components/Scripts/View/Tree/ScriptsTree.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="scripts-tree-container">
+  <div
+    class="scripts-tree-container"
+    :class="{
+      'top-padding': hasTopPadding,
+    }"
+  >
     <template v-if="initialNodes.length">
       <TreeView
         :initial-nodes="initialNodes"
@@ -39,6 +44,10 @@ export default defineComponent({
       type: [Number],
       default: undefined,
     },
+    hasTopPadding: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
@@ -62,8 +71,21 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$padding: 20px;
+
 .scripts-tree-container {
   display: flex; // We could provide `block`, but `flex` is more versatile.
-  overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+
+  /* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */
+  background: $color-scripts-bg;
+
+  padding-bottom: $padding;
+  padding-left: $padding;
+  padding-right: $padding;
+  &.top-padding {
+    padding-top: $padding;
+  }
 }
 </style>

src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue

@@ -98,5 +98,6 @@ export default defineComponent({
 .tree {
   background: $color-tree-bg;
   overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
 }
 </style>

src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss

@@ -1,7 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
 
 /* Tree colors, based on global colors */
-$color-tree-bg                              : $color-primary-darker;
+$color-tree-bg                              : $color-scripts-bg;
 $color-node-arrow                           : $color-on-primary;
 $color-node-fg                              : $color-on-primary;
 $color-node-highlight-bg                    : $color-primary-dark;