diff --git a/src/application/collections/windows.yaml b/src/application/collections/windows.yaml
index 2b9dfde6..35c60e91 100644
--- a/src/application/collections/windows.yaml
+++ b/src/application/collections/windows.yaml
@@ -7196,9 +7196,9 @@ actions:
                             To view all the scheduled tasks related to Windows Update, you can use the following PowerShell command:
 
                             ```powershell
-                                @('\Microsoft\Windows\UpdateOrchestrator\*', '\Microsoft\Windows\WindowsUpdate\*', '\Microsoft\Windows\WaaSMedic\*', '\Microsoft\Windows\InstallService\*') `
-                                    | ForEach-Object { Get-ScheduledTask -TaskName '*' -TaskPath $_ -ErrorAction SilentlyContinue } `
-                                    | ForEach-Object { Write-Host "$($_.TaskPath)$($_.TaskName)" }
+                            @('\Microsoft\Windows\UpdateOrchestrator\*', '\Microsoft\Windows\WindowsUpdate\*', '\Microsoft\Windows\WaaSMedic\*', '\Microsoft\Windows\InstallService\*') `
+                                | ForEach-Object { Get-ScheduledTask -TaskName '*' -TaskPath $_ -ErrorAction SilentlyContinue } `
+                                | ForEach-Object { Write-Host "$($_.TaskPath)$($_.TaskName)" }
                             ```
                         children:
                             -
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 5d751202..3f12a132 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -30,15 +30,15 @@
       />
     </div>
     <div class="card__expander" @click.stop>
-      <div class="card__expander__content">
-        <ScriptsTree :category-id="categoryId" />
-      </div>
       <div class="card__expander__close-button">
         <AppIcon
           icon="xmark"
           @click="collapse()"
         />
       </div>
+      <div class="card__expander__content">
+        <ScriptsTree :category-id="categoryId" />
+      </div>
     </div>
   </div>
 </template>
@@ -184,20 +184,24 @@ $card-horizontal-gap    : $card-gap;
     position: relative;
     background-color: $color-primary-darker;
     color: $color-on-primary;
+
     display: flex;
     align-items: center;
+    flex-direction: column;
 
     &__content {
-      flex: 1;
       display: flex;
       justify-content: center;
       word-break: break-word;
+      margin-bottom: 1em;
+      margin-left: 0.5em;
+      margin-right: 0.5em;
+      max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
     }
 
     &__close-button {
-      width: auto;
       font-size: 1.5em;
-      align-self: flex-start;
+      align-self: flex-end;
       margin-right: 0.25em;
       @include clickable;
       color: $color-primary-light;
@@ -242,8 +246,6 @@ $card-horizontal-gap    : $card-gap;
 
     .card__expander {
       min-height: 200px;
-      // max-height: 1000px;
-      // overflow-y: auto;
       margin-top: $expanded-margin-top;
       opacity: 1;
     }
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index f0d481dd..f7742b92 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="scripts">
-    <div v-if="!isSearching">
+    <template v-if="!isSearching">
       <template v-if="currentView === ViewType.Cards">
         <CardList />
       </template>
@@ -9,8 +9,8 @@
           <ScriptsTree />
         </div>
       </template>
-    </div>
-    <div v-else>
+    </template>
+    <template v-else>
       <!-- Searching -->
       <div class="search">
         <div class="search__query">
@@ -33,7 +33,7 @@
       <div v-if="searchHasMatches" class="tree tree--searching">
         <ScriptsTree />
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
index f1687fed..638545af 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
@@ -62,6 +62,8 @@ export default defineComponent({
 .container {
   display: flex;
   flex-direction: column;
+  flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
+  max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
   *:not(:first-child) {
     margin-left: 5px;
   }
@@ -69,7 +71,7 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
     .content {
-        flex: 1;
+      flex: 1; // Expands the content to fill available width, aligning the documentation button to the right.
     }
   }
   .docs {
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
index 3dcdc08c..63ee7dce 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -59,19 +59,49 @@ function renderAsMarkdownListItem(content: string): string {
 
 $text-color: $color-on-primary;
 $text-size: 0.75em; // Lower looks bad on Firefox
+$base-spacing: $text-size;
+
+@mixin code-block() {
+  pre {
+    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
+  }
+}
+
+@mixin inline-code() {
+  :not(pre) > code {
+    @content;
+  }
+}
+
+@mixin code() {
+  code {
+    @content;
+  }
+}
 
 .documentation-text {
   color: $text-color;
   font-size: $text-size;
   font-family: $font-main;
-  code {
-    word-break: break-all; // Inline code should wrap with the line, or whole text overflows
+
+  @include code {
     font-family: $font-normal;
     font-weight: 600;
   }
+
+  @include inline-code {
+    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
+  }
+
+  @include code-block {
+    padding: $base-spacing;
+    background: $color-primary-darker;
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  }
+
   a {
     &[href] {
-      word-break: break-word; // So URLs don't overflow
+      word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
     }
     &[href^="http"]{
       &:after {
@@ -116,47 +146,49 @@ $text-size: 0.75em; // Lower looks bad on Firefox
     }
   }
 
-  @mixin left-padding($selectors, $horizontal-gap) {
+  @mixin left-padding($selectors, $horizontal-spacing) {
     #{$selectors} {
-      padding-inline-start: $horizontal-gap;
+      padding-inline-start: $horizontal-spacing;
     }
   }
 
-  @mixin bottom-margin($selectors, $vertical-gap) {
+  @mixin bottom-margin($selectors, $vertical-spacing) {
     #{$selectors} {
       &:not(:last-child) {
-        margin-bottom: $vertical-gap;
+        margin-bottom: $vertical-spacing;
       }
     }
   }
 
-  @mixin apply-uniform-vertical-spacing($vertical-gap) {
+  @mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
     /* Reset default top/bottom margins added by browser. */
     @include no-margin('p');
     @include no-margin('h1, h2, h3, h4, h5, h6');
     @include no-margin('blockquote');
+    @include no-margin('pre');
 
     /* Add spacing between elements using `margin-bottom` only (bottom-out instead of top-down strategy). */
-    $small-gap: math.div($vertical-gap, 2);
-    @include bottom-margin('p', $vertical-gap);
-    @include bottom-margin('h1, h2, h3, h4, h5, h6', $vertical-gap);
-    @include bottom-margin('ul, ol', $vertical-gap);
-    @include bottom-margin('li', $small-gap);
-    @include bottom-margin('table', $vertical-gap);
-    @include bottom-margin('blockquote', $vertical-gap);
+    $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);
+    @include bottom-margin('ul, ol', $base-vertical-spacing);
+    @include bottom-margin('li', $small-vertical-spacing);
+    @include bottom-margin('table', $base-vertical-spacing);
+    @include bottom-margin('blockquote', $base-vertical-spacing);
+    @include bottom-margin('pre', $base-vertical-spacing);
   }
 
-  @mixin apply-uniform-horizontal-spacing($horizontal-gap) {
+  @mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
     /* Reset default left/right paddings added by browser. */
     @include no-padding('ul, ol');
 
     /* Add spacing for list items. */
-    $list-spacing: $horizontal-gap * 2;
-    @include left-padding('ul, ol', $list-spacing);
+    $large-horizontal-spacing: $base-horizontal-spacing * 2;
+    @include left-padding('ul, ol', $large-horizontal-spacing);
   }
 
-  @include apply-uniform-vertical-spacing($text-size);
-  @include apply-uniform-horizontal-spacing($text-size);
+  @include apply-uniform-vertical-spacing($base-spacing);
+  @include apply-uniform-horizontal-spacing($base-spacing);
 
   ul {
     /*
@@ -167,7 +199,7 @@ $text-size: 0.75em; // Lower looks bad on Firefox
   }
 
   blockquote {
-    padding: 0 1em;
+    padding: 0 $base-spacing;
     border-left: .25em solid $color-primary;
   }
 }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
index 57f24726..c2d49623 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
@@ -40,6 +40,7 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+
   .text {
     display: flex;
     align-items: center;
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 51a20182..7611b508 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
@@ -1,6 +1,6 @@
 <template>
-  <span id="container">
-    <span v-if="initialNodes.length">
+  <div class="scripts-tree-container">
+    <template v-if="initialNodes.length">
       <TreeView
         :initial-nodes="initialNodes"
         :selected-leaf-node-ids="selectedScriptNodeIds"
@@ -11,9 +11,11 @@
           <NodeContent :node-metadata="nodeMetadata" />
         </template>
       </TreeView>
-    </span>
-    <span v-else>Nooo 😢</span>
-  </span>
+    </template>
+    <template v-else>
+      Nooo 😢
+    </template>
+  </div>
 </template>
 
 <script lang="ts">
@@ -58,3 +60,10 @@ export default defineComponent({
   },
 });
 </script>
+
+<style scoped lang="scss">
+.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)
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
index cc3c3802..71c4a2c5 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
@@ -5,7 +5,6 @@
       :style="{
         'padding-left': `${currentNode.hierarchy.depthInTree * 24}px`,
       }"
-      @click="toggleCheck"
     >
       <div
         class="expand-collapse-arrow"
@@ -15,16 +14,17 @@
         }"
         @click.stop="toggleExpand"
       />
-      <LeafTreeNode
-        :node-id="nodeId"
-        :tree-root="treeRoot"
-      >
-        <template #node-content="slotProps">
-          <slot name="node-content" v-bind="slotProps" />
-        </template>
-      </LeafTreeNode>
+      <div class="leaf-node">
+        <LeafTreeNode
+          :node-id="nodeId"
+          :tree-root="treeRoot"
+        >
+          <template #node-content="slotProps">
+            <slot name="node-content" v-bind="slotProps" />
+          </template>
+        </LeafTreeNode>
+      </div>
     </div>
-
     <transition name="children-transition">
       <ul
         v-if="hasChildren && expanded"
@@ -132,6 +132,12 @@ export default defineComponent({
 
 .expansible-node {
   display: flex;
+  flex-direction: row;
+  .leaf-node {
+    flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  }
+
   flex-direction: row;
   align-items: center;
   @include hover-or-touch {
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
index 4677d10c..9b1412c3 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
@@ -1,25 +1,21 @@
 <template>
   <li
-    class="wrapper"
+    class="node focusable"
+    tabindex="-1"
+    :class="{
+      'keyboard-focus': hasKeyboardFocus,
+    }"
     @click.stop="toggleCheckState"
+    @focus="onNodeFocus"
   >
-    <div
-      class="node focusable"
-      :class="{
-        'keyboard-focus': hasKeyboardFocus,
-      }"
-      tabindex="-1"
-      @focus="onNodeFocus"
-    >
-      <div
-        class="checkbox"
-        :class="{
-          checked: checked,
-          indeterminate: indeterminate,
-        }"
-      />
-
-      <div class="content">
+    <div class="node__layout">
+      <div class="node__checkbox">
+        <NodeCheckbox
+          :node-id="nodeId"
+          :tree-root="treeRoot"
+        />
+      </div>
+      <div class="node__content content">
         <slot
           name="node-content"
           :node-metadata="currentNode.metadata"
@@ -36,10 +32,13 @@ import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
 import { useNodeState } from './UseNodeState';
 import { useKeyboardInteractionState } from './UseKeyboardInteractionState';
 import { TreeNode } from './TreeNode';
-import { TreeNodeCheckState } from './State/CheckState';
+import NodeCheckbox from './NodeCheckbox.vue';
 import type { PropType } from 'vue';
 
 export default defineComponent({
+  components: {
+    NodeCheckbox,
+  },
   props: {
     nodeId: {
       type: String,
@@ -53,22 +52,14 @@ export default defineComponent({
   setup(props) {
     const { isKeyboardBeingUsed } = useKeyboardInteractionState();
     const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot'));
-    const currentNode = computed<TreeNode>(
-      () => nodes.value.getNodeById(props.nodeId),
-    );
+    const currentNode = computed<TreeNode>(() => nodes.value.getNodeById(props.nodeId));
     const { state } = useNodeState(currentNode);
 
-    const hasFocus = computed<boolean>(() => state.value.isFocused);
-    const checked = computed<boolean>(() => state.value.checkState === TreeNodeCheckState.Checked);
-    const indeterminate = computed<boolean>(
-      () => state.value.checkState === TreeNodeCheckState.Indeterminate,
-    );
-
     const hasKeyboardFocus = computed<boolean>(() => {
       if (!isKeyboardBeingUsed.value) {
         return false;
       }
-      return hasFocus.value;
+      return state.value.isFocused;
     });
 
     const onNodeFocus = () => {
@@ -82,8 +73,6 @@ export default defineComponent({
     return {
       onNodeFocus,
       toggleCheckState,
-      indeterminate,
-      checked,
       currentNode,
       hasKeyboardFocus,
     };
@@ -95,91 +84,59 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 @use "./../tree-colors" as *;
 
-.wrapper {
+.node__layout {
+  display: flex;
+  align-items: center;
   flex: 1;
+
+  .node__checkbox {
+    flex-shrink: 0; // Always render the checkbox properly on small screens
+  }
+  .node__content {
+    flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  }
+}
+
+.focusable {
+  outline: none; // We handle keyboard focus through own styling
+}
+.node {
+  margin-bottom: 3px;
+  margin-top: 3px;
   padding-bottom: 3px;
   padding-top: 3px;
-  .focusable {
-    outline: none; // We handle keyboard focus through own styling
+  padding-right: 6px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  &.keyboard-focus {
+    background: $color-node-highlight-bg;
   }
-  .node {
-    display: flex;
-    align-items: center;
-    padding-bottom: 3px;
-    padding-top: 3px;
+
+  @include hover-or-touch {
+    background: $color-node-highlight-bg;
+  }
+
+  .content {
+    display: flex; // We could provide `block`, but `flex` is more versatile.
+    color: $color-node-fg;
+    padding-left: 9px;
     padding-right: 6px;
-    cursor: pointer;
-    width: 100%;
-    box-sizing: border-box;
+    text-decoration: none;
+    user-select: none;
 
-    &.keyboard-focus {
-      background: $color-node-highlight-bg;
-    }
-
-    @include hover-or-touch {
-      background: $color-node-highlight-bg;
-    }
-
-    .checkbox {
-      flex-shrink: 0;
-      position: relative;
-      width: 30px;
-      height: 30px;
-      box-sizing: border-box;
-      border: 1px solid $color-node-checkbox-border-unchecked;
-      border-radius: 2px;
-      transition: border-color .25s, background-color .25s;
-      background: $color-node-checkbox-bg-unchecked;
-
-      &:after {
-        position: absolute;
-        display: block;
-        content: "";
-      }
-
-      &.indeterminate {
-        border-color: $color-node-checkbox-border-unchecked;
-
-        &:after {
-          background-color: $color-node-checkbox-border-indeterminate;
-          top: 50%;
-          left: 20%;
-          right: 20%;
-          height: 2px;
-        }
-      }
-
-      &.checked {
-        background: $color-node-checkbox-bg-checked;
-        border-color: $color-node-checkbox-border-checked;
-
-        &:after {
-          box-sizing: content-box;
-          border: 1.5px solid $color-node-checkbox-tick-checked;
-          /* probably width would be rounded in most cases */
-          border-left: 0;
-          border-top: 0;
-          left: 9px;
-          top: 3px;
-          height: 15px;
-          width: 8px;
-          transform: rotate(45deg) scaleY(1);
-          transition: transform .25s;
-          transform-origin: center;
-        }
-      }
-    }
-
-    .content {
-      padding-left: 9px;
-      padding-right: 6px;
-      flex-grow: 2;
-      text-decoration: none;
-      color: $color-node-fg;
-      line-height: 24px;
-      user-select: none;
-      font-size: 1.5em;
-    }
+    font-size: 1.5em;
+    line-height: 24px;
+    /*
+      Following is a workaround fixing overflow-y caused by line height being smaller than font.
+      It should be removed once a proper line-height matching the font-size (not smaller than) is used.
+    */
+    $line-height-compensation: calc((1.5em - 24px) / 4);
+    padding-top: $line-height-compensation;
+    padding-bottom: $line-height-compensation;
+    margin-top: calc(-1 * $line-height-compensation);
+    margin-bottom: calc(-1 * $line-height-compensation);
   }
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
new file mode 100644
index 00000000..f2399b38
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue
@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="checkbox"
+    :class="{
+      checked: checked,
+      indeterminate: indeterminate,
+    }"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, toRef } from 'vue';
+import { TreeRoot } from '../TreeRoot/TreeRoot';
+import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
+import { useNodeState } from './UseNodeState';
+import { TreeNode } from './TreeNode';
+import { TreeNodeCheckState } from './State/CheckState';
+import type { PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    nodeId: {
+      type: String,
+      required: true,
+    },
+    treeRoot: {
+      type: Object as PropType<TreeRoot>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { nodes } = useCurrentTreeNodes(toRef(props, 'treeRoot'));
+    const currentNode = computed<TreeNode>(
+      () => nodes.value.getNodeById(props.nodeId),
+    );
+    const { state } = useNodeState(currentNode);
+
+    const checked = computed<boolean>(() => state.value.checkState === TreeNodeCheckState.Checked);
+    const indeterminate = computed<boolean>(
+      () => state.value.checkState === TreeNodeCheckState.Indeterminate,
+    );
+
+    return {
+      indeterminate,
+      checked,
+      currentNode,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+@use "./../tree-colors" as *;
+
+$sideSizeInPx: 30px;
+
+.checkbox {
+  position: relative;
+
+  width: $sideSizeInPx;
+  height: $sideSizeInPx;
+
+  box-sizing: border-box;
+  border: 1px solid $color-node-checkbox-border-unchecked;
+  border-radius: 2px;
+  transition: border-color .25s, background-color .25s;
+  background: $color-node-checkbox-bg-unchecked;
+
+  &:after {
+    position: absolute;
+    display: block;
+    content: "";
+  }
+
+  &.indeterminate {
+    border-color: $color-node-checkbox-border-unchecked;
+
+    &:after {
+      background-color: $color-node-checkbox-border-indeterminate;
+      top: 50%;
+      left: 20%;
+      right: 20%;
+      height: 2px;
+    }
+  }
+
+  &.checked {
+    background: $color-node-checkbox-bg-checked;
+    border-color: $color-node-checkbox-border-checked;
+
+    &:after {
+      box-sizing: content-box;
+      border: 1.5px solid $color-node-checkbox-tick-checked;
+      border-left: 0;
+      border-top: 0;
+      left: 9px;
+      top: 3px;
+      height: 15px;
+      width: 8px;
+      transform: rotate(45deg) scaleY(1);
+      transition: transform .25s;
+      transform-origin: center;
+    }
+  }
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue b/src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue
index 32bcf3f3..e25a615f 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue
@@ -63,8 +63,5 @@ export default defineComponent({
 
 .tree-root {
   @include reset-ul;
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-  padding-inline-start: 3px;
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
index 31153370..3ca105b4 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
@@ -96,7 +96,7 @@ export default defineComponent({
 @use "./tree-colors" as *;
 
 .tree {
-  overflow: auto;
   background: $color-tree-bg;
+  overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
 }
 </style>