Fix rendering of inline code blocks for docs

E2E tests can be added rather easily to this.

Styling of codeblocks:

- Uniform margins as other documentation elements.
- Add small margin for inline code-blocks.
- Use different background color for inline code-blocks.
- Introduce `inline-code` and `code-block` mixins for clarity in
  styling.

Overflowing of codeblocks:

- Improve flex layout of the tree component to be handle overflowing
  content and providing maximum available width. To be able to correctly
  provide maximum available width in card content, card expansion layout
  is changed so both close button and the content gets their full width.
- Other refactorings to support this:
  - Introduce separate Vue component for checkboxes of nodes for better
    separation of concerns and improved maintainability.
  - Refactor `LeafTreeNode` to make it simpler, separating layout concerns
    from other styling.
  - `ScriptsTree.vue`: Prefer `<div>`s instead of `<span>`s as they
    represent large content.
  - Remove unnecessary `<div>`s and use `<template>`s to reduce HTML
    complexity.
  - Update script documentation to not include unnecessary left padding
    on script code blocks.

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:
                             -

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%; // Ensure the inner content does not horizontally grow (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;
     }

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>
 

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue

@@ -62,14 +62,15 @@ export default defineComponent({
 .container {
   display: flex;
   flex-direction: column;
+  width: 100%; // This prevents content overflowing on smaller screens
   *:not(:first-child) {
     margin-left: 5px;
   }
   .header {
     display: flex;
     flex-direction: row;
     .content {
-        flex: 1;
+      flex: 1;
     }
   }
   .docs {

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -60,15 +60,47 @@ function renderAsMarkdownListItem(content: string): string {
 $text-color: $color-on-primary;
 $text-size: 0.75em; // Lower looks bad on Firefox
 
+@mixin code-block() {
+  pre {
+    // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
+    @content;
+  }
+}
+
+@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
+  $standard-gap: $text-size;
+
+  @include code {
     font-family: $font-normal;
     font-weight: 600;
   }
+
+  @include inline-code {
+    word-break: break-all; // Inline code should wrap with the line, or whole text overflows
+  }
+
+  @include code-block {
+    padding: $standard-gap;
+    background: $color-primary-darker;
+    display: block;
+    overflow: auto;
+  }
+
   a {
     &[href] {
       word-break: break-word; // So URLs don't overflow
@@ -135,6 +167,7 @@ $text-size: 0.75em; // Lower looks bad on Firefox
     @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);
@@ -144,6 +177,7 @@ $text-size: 0.75em; // Lower looks bad on Firefox
     @include bottom-margin('li', $small-gap);
     @include bottom-margin('table', $vertical-gap);
     @include bottom-margin('blockquote', $vertical-gap);
+    @include bottom-margin('pre', $vertical-gap);
   }
 
   @mixin apply-uniform-horizontal-spacing($horizontal-gap) {
@@ -167,7 +201,7 @@ $text-size: 0.75em; // Lower looks bad on Firefox
   }
 
   blockquote {
-    padding: 0 1em;
+    padding: 0 $standard-gap;
     border-left: .25em solid $color-primary;
   }
 }

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;

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; // Ensure the inner content does not horizontally grow (e.g., when a code block is shown)
+}
+</style>

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; // Ensure the node is expanded horizontally, so the its content can utilize all width and align its items (e.g., icons, text)
+    overflow: auto; // Ensure the inner content does not horizontally grow (e.g., when a code block is shown)
+  }
+
   flex-direction: row;
   align-items: center;
   @include hover-or-touch {