From ae172000a64416e5a3e2b2e32b7846f039f445f0 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Fri, 12 Apr 2024 18:38:12 +0200
Subject: [PATCH] Centralize and use global spacing variables

This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.

- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
  absolute and relative, to standardize the spacing throughout the application.
  This new approach ensures a consistent spacing logic across all components and
  layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
  harmonizes the spacing across different parts of the application, aligning with
  the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.

Other supporting changes per component:

- RatingCircle: Update style names to match convention and simplify
  hacky way to inject circle width value through CSS variables. Add
  tests for the new behavior and refactor existing tests for easier
  extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
  from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
  5d940b57ef2a4c219932cd15201401f8550cfb41.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
  - Use `v-bind` instead of hacky way to inject SCSS values through variables.
  - Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
  components that it styles. Update structure documentation.

The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.
---
 docs/presentation.md                          | 10 ++-
 src/presentation/assets/styles/_spacing.scss  | 16 +++++
 .../assets/styles/base/_index.scss            | 19 +++---
 .../assets/styles/base/_margin-padding.scss   | 35 +++++-----
 .../assets/styles/components/_card.scss       |  1 -
 src/presentation/assets/styles/main.scss      |  3 +-
 src/presentation/components/App.vue           | 23 ++++---
 .../Code/CodeButtons/IconButton.vue           |  1 -
 .../RunInstructions/Steps/CopyableCommand.vue |  6 +-
 .../Code/CodeButtons/TheCodeButtons.vue       |  5 +-
 .../components/DevToolkit/DevToolkit.vue      |  6 +-
 .../Scripts/Menu/MenuOptionList.vue           |  2 +-
 .../Recommendation/Rating/CircleRating.vue    |  4 +-
 .../Recommendation/Rating/RatingCircle.vue    | 48 +++++++-------
 .../RecommendationDocumentation.vue           |  2 +-
 .../Menu/Revert/RevertStatusDocumentation.vue |  2 +-
 .../Scripts/Menu/TheScriptsMenu.vue           | 12 ++--
 .../Scripts/Slider/HorizontalResizeSlider.vue | 23 ++-----
 .../Scripts/Slider/SliderHandle.vue           |  4 +-
 .../components/Scripts/TheScriptArea.vue      | 13 +++-
 .../Scripts/View/Cards/CardList.vue           |  3 +-
 .../Scripts/View/Cards/CardListItem.vue       | 11 ++--
 .../Scripts/View/Cards/card-gap.scss          |  3 +
 .../Scripts/View/TheScriptsView.vue           | 14 ++--
 .../Documentation/DocumentableNode.vue        |  6 +-
 .../View/Tree/NodeContent/NodeContent.vue     |  2 +-
 .../View/Tree/NodeContent/RevertToggle.vue    |  2 +-
 .../View/Tree/NodeContent/ToggleSwitch.vue    |  8 +--
 .../Scripts/View/Tree/ScriptsTree.vue         | 11 ++--
 .../TreeView/Node/HierarchicalTreeNode.vue    | 34 ++++++----
 .../View/Tree/TreeView/Node/LeafTreeNode.vue  | 14 ++--
 .../components/Shared/FlatButton.vue          |  2 +-
 .../components/Shared/Modal/ModalContent.vue  |  2 +-
 .../components/Shared/Modal/ModalDialog.vue   | 12 +++-
 .../components/Shared/TooltipWrapper.vue      |  6 +-
 .../components/TheFooter/DownloadUrlList.vue  |  6 +-
 .../components/TheFooter/TheFooter.vue        |  9 +--
 src/presentation/components/TheSearchBar.vue  |  7 +-
 tests/checks/external-urls/main.spec.ts       |  1 -
 .../Rating/RatingCircle.spec.ts               | 66 +++++++++++--------
 40 files changed, 251 insertions(+), 203 deletions(-)
 create mode 100644 src/presentation/assets/styles/_spacing.scss
 delete mode 100644 src/presentation/assets/styles/components/_card.scss
 create mode 100644 src/presentation/components/Scripts/View/Cards/card-gap.scss

diff --git a/docs/presentation.md b/docs/presentation.md
index b85f44ad..21c7ebd4 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -14,14 +14,13 @@ The presentation layer uses an event-driven architecture for bidirectional react
   - [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
   - [**`index.html`**](./../src/presentation/index.html): The `index.html` entry file, located at the root of the project as required by Vite
   - [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue components and plugins.
-  - [**`components/`**](./../src/presentation/components/): Contains Vue components and helpers.
+  - [**`components/`**](./../src/presentation/components/): Contains Vue components, helpers and styles coupled to Vue components.
     - [**`Shared/`**](./../src/presentation/components/Shared): Contains shared Vue components and helpers.
       - [**`Hooks`**](../src/presentation/components/Shared/Hooks): Hooks used by components through [dependency injection](#dependency-injections).
   - [**`/public/`**](../src/presentation/public/): Contains static assets.
   - [**`assets/`**](./../src/presentation/assets/styles/): Contains assets processed by Vite.
     - [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts.
     - [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles.
-      - [**`components/`**](./../src/presentation/assets/styles/components): Contains styles coupled to Vue components.
       - [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint..
   - [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
     - [`/main/` **`index.ts`**](./../src/presentation/main.ts): Main entry for Electron, managing application windows and lifecycle events.
@@ -38,6 +37,13 @@ The presentation layer uses an event-driven architecture for bidirectional react
   They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
 - **Borders**:
   privacy.sexy prefers sharper edges in its design language.
+- **Fonts**:
+  - Use the primary font for regular text and monospace font for code or specific data.
+  - Use cursive and logo fonts solely for branding.
+  - Refer to [standardized font size variables](../src/presentation/assets/styles/_typography.scss) for font sizing, avoiding arbitrary `px`, `em`, `rem`, or percentage values.
+- **Spacing**:
+  Use [global spacing variables](../src/presentation/assets/styles/_spacing.scss) for consistent margin, padding, and gap definitions.
+  This provides uniform spatial distribution and alignment of elements, enhancing visual harmony and making the UI more scalable and maintainable.
 
 ## Application data
 
diff --git a/src/presentation/assets/styles/_spacing.scss b/src/presentation/assets/styles/_spacing.scss
new file mode 100644
index 00000000..7b25c19a
--- /dev/null
+++ b/src/presentation/assets/styles/_spacing.scss
@@ -0,0 +1,16 @@
+// Use for fixed-size elements where consistent spacing is important
+// regardless of context.
+$spacing-absolute-xx-small: 3px;
+$spacing-absolute-x-small : 4px;
+$spacing-absolute-small   : 6px;
+$spacing-absolute-medium  : 10px;
+$spacing-absolute-large   : 15px;
+$spacing-absolute-x-large : 20px;
+$spacing-absolute-xx-large: 30px;
+
+// Use for elements with text content where spacing should
+// scale with text size.
+$spacing-relative-x-small : 0.25em;
+$spacing-relative-small   : 0.5em;
+$spacing-relative-medium  : 1em;
+$spacing-relative-large   : 2em;
diff --git a/src/presentation/assets/styles/base/_index.scss b/src/presentation/assets/styles/base/_index.scss
index 50715f23..45edc2bb 100644
--- a/src/presentation/assets/styles/base/_index.scss
+++ b/src/presentation/assets/styles/base/_index.scss
@@ -5,16 +5,15 @@
   CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers
 */
 
-@use "@/presentation/assets/styles/colors" as *;
-@use "@/presentation/assets/styles/mixins" as *;
-@use "@/presentation/assets/styles/vite-path" as *;
-@use "@/presentation/assets/styles/typography" as *;
+@use "../colors" as *;
+@use "../mixins" as *;
+@use "../vite-path" as *;
+@use "../typography" as *;
+@use "../spacing" as *;
 @use "_code-styling" as *;
 @use "_margin-padding" as *;
 @use "_link-styling" as *;
 
-$base-spacing: 1em;
-
 * {
   box-sizing: border-box;
 }
@@ -22,7 +21,7 @@ $base-spacing: 1em;
 body {
   background: $color-background;
   @include base-font-style;
-  @include apply-uniform-spacing($base-spacing: $base-spacing)
+  @include apply-uniform-spacing;
 }
 
 input {
@@ -30,12 +29,12 @@ input {
 }
 
 blockquote {
-  padding: 0 $base-spacing;
-  border-left: .25em solid $color-primary;
+  padding: 0 $spacing-relative-medium;
+  border-left: $spacing-absolute-x-small solid $color-primary;
 }
 
 @include style-code-elements(
-  $code-block-padding: $base-spacing,
+  $code-block-padding: $spacing-relative-medium,
   $color-background: $color-primary-darker,
 );
 
diff --git a/src/presentation/assets/styles/base/_margin-padding.scss b/src/presentation/assets/styles/base/_margin-padding.scss
index 5fbf4eda..9699e072 100644
--- a/src/presentation/assets/styles/base/_margin-padding.scss
+++ b/src/presentation/assets/styles/base/_margin-padding.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use "../spacing" as *;
 
 @mixin no-margin($selectors) {
   #{$selectors} {
@@ -26,7 +27,7 @@
   }
 }
 
-@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
+@mixin apply-uniform-vertical-spacing {
   /* Reset default top/bottom margins added by browser. */
   @include no-margin('p');
   @include no-margin('h1, h2, h3, h4, h5, h6');
@@ -36,29 +37,27 @@
   @include no-margin('ul, ol');
 
   /* 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('li > p', $small-vertical-spacing); // Reduce margin for paragraphs directly within list items to visually group related content.
-  @include bottom-margin('h1, h2, h3, h4, h5, h6', $small-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);
-  @include bottom-margin('article', $base-vertical-spacing);
-  @include bottom-margin('hr', $base-vertical-spacing);
+  @include bottom-margin('p', $spacing-relative-medium);
+  @include bottom-margin('li > p', $spacing-relative-small); // Reduce margin for paragraphs directly within list items to visually group related content.
+  @include bottom-margin('h1, h2, h3, h4, h5, h6', $spacing-relative-small);
+  @include bottom-margin('ul, ol', $spacing-relative-medium);
+  @include bottom-margin('li', $spacing-relative-small);
+  @include bottom-margin('table', $spacing-relative-medium);
+  @include bottom-margin('blockquote', $spacing-relative-medium);
+  @include bottom-margin('pre', $spacing-relative-medium);
+  @include bottom-margin('article', $spacing-relative-medium);
+  @include bottom-margin('hr', $spacing-relative-medium);
 }
 
-@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
+@mixin apply-uniform-horizontal-spacing {
   /* Reset default left/right paddings added by browser. */
   @include no-padding('ul, ol');
 
   /* Add spacing for list items. */
-  $large-horizontal-spacing: $base-horizontal-spacing * 2;
-  @include left-padding('ul, ol', $large-horizontal-spacing);
+  @include left-padding('ul, ol', $spacing-relative-large);
 }
 
-@mixin apply-uniform-spacing($base-spacing) {
-  @include apply-uniform-vertical-spacing($base-spacing);
-  @include apply-uniform-horizontal-spacing($base-spacing);
+@mixin apply-uniform-spacing {
+  @include apply-uniform-vertical-spacing;
+  @include apply-uniform-horizontal-spacing;
 }
diff --git a/src/presentation/assets/styles/components/_card.scss b/src/presentation/assets/styles/components/_card.scss
deleted file mode 100644
index 2e31d34a..00000000
--- a/src/presentation/assets/styles/components/_card.scss
+++ /dev/null
@@ -1 +0,0 @@
-$card-gap: 15px;
diff --git a/src/presentation/assets/styles/main.scss b/src/presentation/assets/styles/main.scss
index 8f5c9dfa..74be8db3 100644
--- a/src/presentation/assets/styles/main.scss
+++ b/src/presentation/assets/styles/main.scss
@@ -5,6 +5,5 @@
 @forward "./media";
 @forward "./colors";
 @forward "./base";
+@forward "./spacing";
 @forward "./mixins";
-
-@forward "./components/card";
diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index 4881ef98..8d05b1e7 100644
--- a/src/presentation/components/App.vue
+++ b/src/presentation/components/App.vue
@@ -53,20 +53,25 @@ function getOptionalDevToolkitComponent(): Component | undefined {
 @use 'sass:math';
 
 @mixin responsive-spacing {
-  $spacing-absolute-small: math.div($base-spacing, 2);
-  $spacing-absolute-extra-small: math.div($base-spacing, 4);
   // Avoid using percentage-based values for spacing the avoid unintended layout shifts.
-  margin-left: $base-spacing;
-  margin-right: $base-spacing;
+  margin-left: $spacing-absolute-medium;
+  margin-right: $spacing-absolute-medium;
+  padding: $spacing-absolute-xx-large;
   @media screen and (max-width: $media-screen-big-width) {
     margin-left: $spacing-absolute-small;
     margin-right: $spacing-absolute-small;
+    padding: $spacing-absolute-x-large;
   }
   @media screen and (max-width: $media-screen-medium-width) {
-    margin-left: $spacing-absolute-extra-small;
-    margin-right: $spacing-absolute-extra-small;
+    margin-left: $spacing-absolute-x-small;
+    margin-right: $spacing-absolute-x-small;
+    padding: $spacing-absolute-medium;
+  }
+  @media screen and (max-width: $media-screen-small-width) {
+    margin-left: 0;
+    margin-right: 0;
+    padding: $spacing-absolute-small;
   }
-  padding: $spacing-absolute-small;
 }
 
 #app {
@@ -83,10 +88,10 @@ function getOptionalDevToolkitComponent(): Component | undefined {
     display:flex;
     flex-direction: column;
     .app__row {
-      margin-bottom: 10px;
+      margin-bottom: $spacing-absolute-large;
     }
     .app__code-buttons {
-      padding-bottom: 10px;
+      padding-bottom: $spacing-absolute-medium;
     }
   }
 }
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index f0a0ac71..82764fa2 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -74,7 +74,6 @@ export default defineComponent({
   color: $color-on-secondary;
 
   border: none;
-  padding: 20px;
   transition-duration: 0.4s;
   overflow: hidden;
   box-shadow: 0 3px 9px $color-primary-darkest;
diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
index 4d6efee6..768a1061 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
@@ -54,14 +54,14 @@ export default defineComponent({
 
 .copyable-command {
   display: inline-flex;
-  padding: 0.25em;
+  padding: $spacing-relative-x-small;
   font-size: $font-size-absolute-small;
   .dollar {
-    margin-right: 0.5rem;
+    margin-right: $spacing-relative-small;
     user-select: none;
   }
   .copy-action-container {
-    margin-left: 1rem;
+    margin-left: $spacing-relative-medium;
   }
 }
 </style>
diff --git a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
index cd3bb45b..9cc1dc91 100644
--- a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
+++ b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
@@ -34,12 +34,15 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .container {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: 30px;
+  gap: $spacing-absolute-xx-large;
 }
+
 .code-button {
   width: 10%;
   min-width: 90px;
diff --git a/src/presentation/components/DevToolkit/DevToolkit.vue b/src/presentation/components/DevToolkit/DevToolkit.vue
index f7d226d6..dbdd5510 100644
--- a/src/presentation/components/DevToolkit/DevToolkit.vue
+++ b/src/presentation/components/DevToolkit/DevToolkit.vue
@@ -77,7 +77,7 @@ interface DevAction {
   right: 0;
   background-color: rgba($color-on-surface, 0.5);
   color: $color-on-primary;
-  padding: 10px;
+  padding: $spacing-absolute-medium;
   z-index: 10000;
 
   display:flex;
@@ -113,14 +113,14 @@ interface DevAction {
   .action-buttons {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: $spacing-absolute-medium;
     @include reset-ul;
 
     .action-button {
       @include reset-button;
 
       display: block;
-      padding: 5px 10px;
+      padding: $spacing-absolute-x-small $spacing-absolute-medium;
       background-color: $color-primary;
       color: $color-on-primary;
       border: none;
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionList.vue b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
index fd698efe..6fbc6126 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionList.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
@@ -25,7 +25,7 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$gap: 0.25rem;
+$gap: $spacing-relative-x-small;
 .list {
   display: flex;
   :deep(.items) {
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue b/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue
index 6f7603ff..7232bc0b 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue
@@ -37,8 +37,10 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .circle-rating {
   display: inline-flex;
-  gap: 0.2em;
+  gap: $spacing-relative-x-small;
 }
 </style>
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue b/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
index 8cc8c755..67b89832 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
@@ -1,19 +1,17 @@
 <template>
-  <svg
-    :style="{
-      '--circle-stroke-width': `${circleStrokeWidthInPx}px`,
-    }"
-    :viewBox="viewBox"
-  >
-    <circle
-      :cx="circleRadiusInPx"
-      :cy="circleRadiusInPx"
-      :r="circleRadiusWithoutStrokeInPx"
-      :class="{
-        filled,
-      }"
-    />
-  </svg>
+  <span class="circle-container">
+    <svg :viewBox="viewBox">
+      <circle
+        :cx="circleRadiusInPx"
+        :cy="circleRadiusInPx"
+        :r="circleRadiusWithoutStrokeInPx"
+        :stroke-width="circleStrokeWidthStyleValue"
+        :class="{
+          filled,
+        }"
+      />
+    </svg>
+  </span>
 </template>
 
 <script lang="ts">
@@ -43,10 +41,13 @@ export default defineComponent({
       const height = circleDiameterInPx + circleStrokeWidthInPx;
       return `${minX} ${minY} ${width} ${height}`;
     });
+    const circleStrokeWidthStyleValue = computed(() => {
+      return `${circleStrokeWidthInPx}px`;
+    });
     return {
       circleRadiusInPx,
       circleDiameterInPx,
-      circleStrokeWidthInPx,
+      circleStrokeWidthStyleValue,
       circleRadiusWithoutStrokeInPx,
       viewBox,
     };
@@ -55,17 +56,18 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-$circleColor: currentColor;
-$circleHeight: 0.8em;
-$circleStrokeWidth: var(--circle-stroke-width);
+@use "@/presentation/assets/styles/main" as *;
+
+$circle-color: currentColor;
+$circle-height: $font-size-relative-smaller;
 
 svg {
-  height: $circleHeight;
+  font-size: $circle-height;
+  height: 1em;
   circle {
-    stroke: $circleColor;
-    stroke-width: $circleStrokeWidth;
+    stroke: $circle-color;
     &.filled {
-      fill: $circleColor;
+      fill: $circle-color;
     }
   }
 }
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
index 6112f2a2..95a142b4 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 
 @mixin horizontal-stack {
   display: flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
 }
 
 @mixin apply-icon-color($color) {
diff --git a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
index fcfadcfe..dfcf6b25 100644
--- a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
@@ -55,7 +55,7 @@ export default defineComponent({
 
 @mixin horizontal-stack {
   display: flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
 }
 
 @mixin apply-icon-color($color) {
diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index e2d80bcf..6baae0cd 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -70,8 +70,6 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 @use 'sass:math';
 
-$spacing-small: math.div($base-spacing, 2);
-
 @mixin center-middle-flex-item {
   &:first-child, &:last-child {
     flex-grow: 1;
@@ -87,12 +85,12 @@ $responsive-alignment-breakpoint: $media-screen-medium-width;
 .scripts-menu {
   display: flex;
   flex-wrap: wrap;
-  column-gap: $base-spacing;
-  row-gap: $base-spacing;
+  column-gap: $spacing-relative-medium;
+  row-gap: $spacing-relative-small;
   flex-wrap: wrap;
   align-items: center;
-  margin-left: $spacing-small;
-  margin-right: $spacing-small;
+  margin-left: $spacing-absolute-small;
+  margin-right: $spacing-absolute-small;
   @media screen and (max-width: $responsive-alignment-breakpoint) {
     justify-content: space-around;
   }
@@ -106,7 +104,7 @@ $responsive-alignment-breakpoint: $media-screen-medium-width;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    row-gap: 0.5em;
+    row-gap: $spacing-relative-x-small;
   }
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
index 26a4ffb8..fa021dc3 100644
--- a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
+++ b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
@@ -1,13 +1,5 @@
 <template>
-  <div
-    class="slider"
-    :style="{
-      '--vertical-margin': verticalMargin,
-      '--first-min-width': firstMinWidth,
-      '--first-initial-width': firstInitialWidth,
-      '--second-min-width': secondMinWidth,
-    }"
-  >
+  <div class="slider">
     <div ref="firstElement" class="first">
       <slot name="first" />
     </div>
@@ -27,10 +19,6 @@ export default defineComponent({
     SliderHandle,
   },
   props: {
-    verticalMargin: {
-      type: String,
-      required: true,
-    },
     firstMinWidth: {
       type: String,
       required: true,
@@ -71,21 +59,18 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   .first {
-    min-width: var(--first-min-width);
-    width: var(--first-initial-width);
+    min-width: v-bind(firstMinWidth);
+    width: v-bind(firstInitialWidth);
   }
   .second {
     flex: 1;
-    min-width: var(--second-min-width);
+    min-width: v-bind(secondMinWidth);
   }
   @media screen and (max-width: $media-vertical-view-breakpoint) {
     flex-direction: column;
     .first {
       width: auto !important;
     }
-    .second {
-      margin-top: var(--vertical-margin);
-    }
     .handle {
       display: none;
     }
diff --git a/src/presentation/components/Scripts/Slider/SliderHandle.vue b/src/presentation/components/Scripts/Slider/SliderHandle.vue
index dd321c4c..e2c1b98f 100644
--- a/src/presentation/components/Scripts/Slider/SliderHandle.vue
+++ b/src/presentation/components/Scripts/Slider/SliderHandle.vue
@@ -81,7 +81,7 @@ $cursor         : v-bind(cursorCssValue);
   .icon {
     color: $color;
   }
-  margin-right: 5px;
-  margin-left: 5px;
+  margin-right: $spacing-absolute-small;
+  margin-left: $spacing-absolute-small;
 }
 </style>
diff --git a/src/presentation/components/Scripts/TheScriptArea.vue b/src/presentation/components/Scripts/TheScriptArea.vue
index b4ade9db..0a88456e 100644
--- a/src/presentation/components/Scripts/TheScriptArea.vue
+++ b/src/presentation/components/Scripts/TheScriptArea.vue
@@ -2,8 +2,7 @@
   <div class="script-area">
     <TheScriptsMenu @view-changed="currentView = $event" />
     <HorizontalResizeSlider
-      class="row"
-      vertical-margin="15px"
+      class="horizontal-slider"
       first-initial-width="55%"
       first-min-width="20%"
       second-min-width="20%"
@@ -42,9 +41,17 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .script-area {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: $spacing-absolute-medium;
+}
+
+.horizontal-slider {
+  // Add row gap between lines on mobile (smaller screens)
+  // when the slider turns into rows.
+  row-gap: $spacing-absolute-large;
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index faeefe25..249bc021 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardList.vue
@@ -125,6 +125,7 @@ function isClickable(element: Element) {
 
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
+@use "./card-gap" as *;
 
 .cards {
   display: flex;
@@ -135,7 +136,7 @@ function isClickable(element: Element) {
     It ensures that there's room to grow, so the animation is shown without overflowing
     with scrollbars.
   */
-  padding: 10px;
+  padding: $spacing-absolute-medium;
 }
 
 .error {
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index ea5c0d3a..454167f0 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -138,9 +138,10 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
+@use "./card-gap" as *;
 
-$card-inner-padding     : 30px;
-$expanded-margin-top    : 30px;
+$card-inner-padding     : $spacing-absolute-xx-large;
+$expanded-margin-top    : $spacing-absolute-xx-large;
 $card-horizontal-gap    : $card-gap;
 
 .card {
@@ -178,13 +179,13 @@ $card-horizontal-gap    : $card-gap;
     .card__inner__selection_indicator {
       height: $card-inner-padding;
       margin-right: -$card-inner-padding;
-      padding-right: 10px;
+      padding-right: $spacing-absolute-medium;
       display: flex;
       justify-content: flex-end;
     }
     .card__inner__expand-icon {
       width: 100%;
-      margin-top: .25em;
+      margin-top: $spacing-relative-x-small;
       vertical-align: middle;
       font-size: $font-size-absolute-normal;
     }
@@ -209,7 +210,7 @@ $card-horizontal-gap    : $card-gap;
     .card__expander__close-button {
       font-size: $font-size-absolute-large;
       align-self: flex-end;
-      margin-right: 0.25em;
+      margin-right: $spacing-absolute-small;
       @include clickable;
       color: $color-primary-light;
       @include hover-or-touch {
diff --git a/src/presentation/components/Scripts/View/Cards/card-gap.scss b/src/presentation/components/Scripts/View/Cards/card-gap.scss
new file mode 100644
index 00000000..f46a7e00
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Cards/card-gap.scss
@@ -0,0 +1,3 @@
+@use "@/presentation/assets/styles/main" as *;
+
+$card-gap: $spacing-absolute-large;
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index a21805d2..7bbac2aa 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -128,10 +128,7 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$margin-inner: 4px;
-
 .scripts-view {
-  margin-top: $margin-inner;
   @media screen and (min-width: $media-vertical-view-breakpoint) {
     // so the current code is always visible
     overflow: auto;
@@ -143,16 +140,17 @@ $margin-inner: 4px;
   display: flex;
   flex-direction: column;
   background-color: $color-scripts-bg;
+  padding-top: $spacing-absolute-large;
+  padding-bottom:$spacing-absolute-large;
   .search__query {
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
-    margin-top: 1em;
     color: $color-primary-light;
     .search__query__close-button {
       font-size: $font-size-absolute-large;
-      margin-left: 0.25rem;
+      margin-left: $spacing-relative-x-small;
     }
   }
   .search-no-matches {
@@ -161,11 +159,9 @@ $margin-inner: 4px;
     word-break:break-word;
     color: $color-on-primary;
     font-size: $font-size-absolute-large;
-    padding:10px;
+    padding: $spacing-absolute-medium;
     text-align:center;
-    > div {
-      padding-bottom:13px;
-    }
+    gap: $spacing-relative-small;
     a {
       color: $color-primary;
     }
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 8eaf72cd..bcfb4940 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
@@ -69,7 +69,7 @@ export default defineComponent({
   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;
+    margin-left: $spacing-absolute-small;
   }
   .header {
     display: flex;
@@ -80,10 +80,10 @@ export default defineComponent({
   }
   .docs {
     background: $color-primary-darkest;
-    margin-top: 0.25em;
+    margin-top: $spacing-relative-x-small;
     color: $color-on-primary;
     text-transform: none;
-    padding: 0.5em;
+    padding: $spacing-absolute-medium;
     &-collapsed {
       display: none;
     }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
index 8043e022..06f26429 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
@@ -55,7 +55,7 @@ export default defineComponent({
     flex-wrap: wrap;
 
     .node-content-item:not(:first-child) {
-      margin-left: 5px;
+      margin-left: $spacing-relative-small;
     }
   }
 }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
index dbfe85ff..a4f66b1a 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
@@ -2,7 +2,7 @@
   <ToggleSwitch
     v-model="isReverted"
     :stop-click-propagation="true"
-    :label="'Revert'"
+    label="Revert"
   />
 </template>
 
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
index 124c62df..9b546f20 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
@@ -83,12 +83,12 @@ $color-text-unchecked         : $color-on-primary;
 $color-text-checked           : $color-on-secondary;
 $color-bg-unchecked           : $color-primary;
 $color-bg-checked             : $color-secondary;
-$padding-horizontal           : calc($font-size * 0.4);
-$padding-vertical             : calc($font-size * 0.3);
+$padding-horizontal           : $spacing-relative-small;
+$padding-vertical             : $spacing-absolute-small;
 $size-height                  : calc($font-size + ($padding-vertical * 2));
-$size-circle                  : math.div($size-height * 2, 3);
+$size-circle                  : calc($size-height * 2/3);
 
-$gap-between-circle-and-text  : 0.25em;
+$gap-between-circle-and-text  : $spacing-relative-x-small;
 
 @mixin locateNearCircle($direction: 'left') {
   $circle-width: calc(#{$size-circle} + #{$padding-horizontal});
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 63eb30ad..daf58d76 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
@@ -73,7 +73,8 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$padding: 20px;
+$padding-horizontal : $spacing-absolute-large;
+$padding-vertical   : $spacing-absolute-x-large;
 
 .scripts-tree-container {
   display: flex; // We could provide `block`, but `flex` is more versatile.
@@ -84,11 +85,11 @@ $padding: 20px;
 
   flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
 
-  padding-bottom: $padding;
-  padding-left: $padding;
-  padding-right: $padding;
+  padding-bottom: $padding-vertical;
+  padding-left: $padding-horizontal;
+  padding-right: $padding-horizontal;
   &.top-padding {
-    padding-top: $padding;
+    padding-top: $padding-vertical;
   }
 }
 </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 09625b92..36084749 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
@@ -9,7 +9,7 @@
       :tree-root="treeRoot"
     >
       <div
-        class="expand-collapse-arrow"
+        class="expand-collapse-caret"
         :class="{
           expanded: isExpanded,
           'has-children': hasChildren,
@@ -141,10 +141,13 @@ export default defineComponent({
   flex-direction: row;
   align-items: center;
 
-  .expand-collapse-arrow {
+  .expand-collapse-caret {
+    $caret-size: 24px;
+    $padding-right: $spacing-absolute-small;
+
     flex-shrink: 0;
-    height: 30px;
-    margin-left: 30px;
+    height: $caret-size;
+    margin-left: $caret-size + $padding-right;
     width: 0;
 
     @include clickable;
@@ -157,25 +160,32 @@ export default defineComponent({
 
     &.has-children {
       margin-left: 0;
-      width: 30px;
+      width: $caret-size + $padding-right;
       position: relative;
 
+      $caret-dimension: $caret-size * 0.375;
+      $caret-stroke-width: 1.5px;
       &:after {
-        border: 1.5px solid $color-node-arrow;
+        border: $caret-stroke-width solid $color-node-arrow;
         position: absolute;
         border-left: 0;
         border-top: 0;
-        left: 9px;
+        left: $caret-dimension;
         top: 50%;
-        height: 9px;
-        width: 9px;
-        transform: rotate(-45deg) translateY(-50%) translateX(0);
+        height: $caret-dimension;
+        width: $caret-dimension;
+        transform:
+          rotate(-45deg)
+          translateY(-50%)
+          translateX($caret-dimension * 0.2);
         transition: transform .25s;
         transform-origin: center;
       }
-
       &.expanded:after {
-        transform: rotate(45deg) translateY(-50%) translateX(-5px);
+        transform:
+          rotate(45deg)
+          translateY(-50%)
+          translateX($caret-dimension * -0.5);
       }
     }
   }
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 01a0fefa..7772081e 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
@@ -76,18 +76,18 @@ export default defineComponent({
   }
 }
 .node {
-  margin-bottom: 3px;
-  margin-top: 3px;
-  padding-bottom: 3px;
-  padding-top: 3px;
-  padding-right: 6px;
+  margin-bottom: $spacing-absolute-xx-small;
+  margin-top: $spacing-absolute-xx-small;
+  padding-bottom: $spacing-absolute-xx-small;
+  padding-top: $spacing-absolute-xx-small;
+  padding-right: $spacing-absolute-small;
   box-sizing: border-box;
 
   .content {
     display: flex; // We could provide `block`, but `flex` is more versatile.
     color: $color-node-fg;
-    padding-left: 9px;
-    padding-right: 6px;
+    padding-left: $spacing-relative-small;
+    padding-right: $spacing-absolute-x-small;
     text-decoration: none;
     user-select: none;
   }
diff --git a/src/presentation/components/Shared/FlatButton.vue b/src/presentation/components/Shared/FlatButton.vue
index 4164851a..9ca98fd3 100644
--- a/src/presentation/components/Shared/FlatButton.vue
+++ b/src/presentation/components/Shared/FlatButton.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 
 .flat-button {
   display: inline-flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
   &.disabled {
     @include flat-button($disabled: true);
   }
diff --git a/src/presentation/components/Shared/Modal/ModalContent.vue b/src/presentation/components/Shared/Modal/ModalContent.vue
index 8b620777..60ef2c61 100644
--- a/src/presentation/components/Shared/Modal/ModalContent.vue
+++ b/src/presentation/components/Shared/Modal/ModalContent.vue
@@ -55,7 +55,7 @@ export default defineComponent({
 $modal-content-transition-duration: 400ms;
 $modal-content-color-shadow: $color-on-surface;
 $modal-content-color-background: $color-surface;
-$modal-content-offset-upward: 20px;
+$modal-content-offset-upward: $spacing-absolute-x-large;
 
 @mixin scrollable() {
   overflow-y: auto;
diff --git a/src/presentation/components/Shared/Modal/ModalDialog.vue b/src/presentation/components/Shared/Modal/ModalDialog.vue
index b5e5d34d..c8c3f9c9 100644
--- a/src/presentation/components/Shared/Modal/ModalDialog.vue
+++ b/src/presentation/components/Shared/Modal/ModalDialog.vue
@@ -63,19 +63,25 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .dialog {
-  margin-bottom: 10px;
+  margin-bottom: $spacing-absolute-medium;
   display: flex;
   flex-direction: row;
 
   &__content {
-    margin: 5%;
+    margin: $spacing-absolute-xx-large;
+    @media screen and (max-width: $media-screen-big-width) {
+      margin: $spacing-absolute-x-large;
+    }
+    @media screen and (max-width: $media-screen-medium-width) {
+      margin: $spacing-absolute-large;
+    }
   }
 
   .dialog__close-button {
     color: $color-primary-dark;
     width: auto;
     font-size: $font-size-absolute-large;
-    margin-right: 0.25em;
+    margin-right: $spacing-absolute-small;
     align-self: flex-start;
   }
 }
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index 739a3ce1..ccdcb2a0 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -219,7 +219,7 @@ $color-tooltip-background: $color-primary-darkest;
   background: $color-tooltip-background;
   color: $color-on-primary;
   border-radius: 16px;
-  padding: 12px 10px;
+  padding: $spacing-absolute-large $spacing-absolute-medium;
 
   // Explicitly set font styling for tooltips to prevent inconsistent appearances due to style inheritance from trigger elements.
   @include base-font-style;
@@ -230,8 +230,8 @@ $color-tooltip-background: $color-primary-darkest;
     and balanced layout.
     Avoiding setting vertical margin as it disrupts the arrow rendering.
   */
-  margin-left: 2px;
-  margin-right: 2px;
+  margin-left: $spacing-absolute-xx-small;
+  margin-right: $spacing-absolute-xx-small;
 
   // Setting max-width increases readability and consistency reducing overlap and clutter.
   @include set-property-ch-value-with-fallback(
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 14b3a725..c1176bb4 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -67,10 +67,10 @@ export default defineComponent({
   }
   .description {
     &__icon {
-      margin-right: 0.5em;
+      margin-right: $spacing-relative-small;
     }
     &__text {
-      margin-right: 0.3em;
+      margin-right: $spacing-relative-x-small;
     }
   }
 }
@@ -79,7 +79,7 @@ export default defineComponent({
     &:not(:first-child)::before {
       content: "|";
       font-size: $font-size-absolute-x-small;
-      padding: 0 5px;
+      padding: 0 $spacing-relative-small;
     }
   }
 }
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index 7b51186a..f6643ee9 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .icon {
-  margin-right: 0.5em;
+  margin-right: $spacing-relative-small;
 }
 
 .footer {
@@ -119,18 +119,19 @@ export default defineComponent({
     @media screen and (max-width: $media-screen-big-width) {
       justify-content: space-around;
       width: 100%;
+      column-gap: $spacing-relative-medium;
       &:not(:first-child) {
-        margin-top: 0.7em;
+        margin-top: $spacing-relative-small;
       }
     }
     flex-wrap: wrap;
     &__item:not(:first-child) {
       &::before {
         content: "|";
-        padding: 0 5px;
+        padding: 0 $spacing-relative-small;
       }
       @media screen and (max-width: $media-screen-big-width) {
-        margin-top: 3px;
+        margin-top: $spacing-absolute-xx-small;
         &::before {
           content: "";
           padding: 0;
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 8cf9d3af..e342541b 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -106,10 +106,9 @@ export default defineComponent({
   min-width: 60px;
   border: 1.5px solid $color-primary;
   border-right: none;
-  height: 36px;
   border-radius: 3px 0 0 3px;
-  padding-left:10px;
-  padding-right:10px;
+  padding-left: $spacing-absolute-medium;
+  padding-right: $spacing-absolute-medium;
   outline: none;
   color: $color-primary;
   font-size: $font-size-absolute-normal;
@@ -127,6 +126,6 @@ export default defineComponent({
   color: $color-on-primary;
   border-radius: 0 5px 5px 0;
   font-size: $font-size-absolute-large;
-  padding:5px;
+  padding: $spacing-absolute-x-small;
 }
 </style>
diff --git a/tests/checks/external-urls/main.spec.ts b/tests/checks/external-urls/main.spec.ts
index 707707e7..47538424 100644
--- a/tests/checks/external-urls/main.spec.ts
+++ b/tests/checks/external-urls/main.spec.ts
@@ -43,7 +43,6 @@ logger.logLabeledInformation('Scheduled test duration', convertMillisecondsToHum
 logger.logTestSectionEndDelimiter();
 test(`all URLs (${urls.length}) should be alive`, async () => {
   // act
-  console.log('URLS', urls); // TODO: Delete
   const results = await getUrlStatusesInParallel(urls, requestOptions);
   // assert
   const deadUrls = results.filter((r) => r.code === undefined || !isOkStatusCode(r.code));
diff --git a/tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts b/tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts
index a84a035f..1d3e3403 100644
--- a/tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts
+++ b/tests/unit/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
 import RatingCircle from '@/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue';
+import { formatAssertionMessage } from '@tests/shared/FormatAssertionMessage';
 
 const DOM_SVG_SELECTOR = 'svg';
 const DOM_CIRCLE_SELECTOR = `${DOM_SVG_SELECTOR} > circle`;
@@ -39,12 +40,6 @@ describe('RatingCircle.vue', () => {
   });
 
   describe('SVG and circle styles', () => {
-    it('sets --circle-stroke-width style correctly', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const svgElement = wrapper.find(DOM_SVG_SELECTOR).element;
-      expect(svgElement.style.getPropertyValue('--circle-stroke-width')).to.equal('2px');
-    });
-
     it('renders circle with correct fill attribute when filled prop is true', () => {
       const wrapper = shallowMount(RatingCircle, {
         propsData: {
@@ -58,32 +53,49 @@ describe('RatingCircle.vue', () => {
 
     it('renders circle with the correct viewBox property', () => {
       const wrapper = shallowMount(RatingCircle);
-      const circle = wrapper.find(DOM_SVG_SELECTOR);
+      const circleElement = wrapper.find(DOM_SVG_SELECTOR);
 
-      expect(circle.attributes('viewBox')).to.equal('-1 -1 22 22');
+      expect(circleElement.attributes('viewBox')).to.equal('-1 -1 22 22');
     });
   });
 
   describe('circle attributes', () => {
-    it('renders circle with the correct cx attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('cx')).to.equal('10'); // Based on circleDiameterInPx = 20
-    });
-
-    it('renders circle with the correct cy attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('cy')).to.equal('10'); // Based on circleDiameterInPx = 20
-    });
-
-    it('renders circle with the correct r attribute', () => {
-      const wrapper = shallowMount(RatingCircle);
-      const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
-
-      expect(circleElement.attributes('r')).to.equal('9'); // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
+    const testScenarios: ReadonlyArray<{
+      readonly attributeKey: string;
+      readonly expectedValue: string;
+    }> = [
+      {
+        attributeKey: 'stroke-width',
+        expectedValue: '2px', // Based on circleStrokeWidthInPx = 2
+      },
+      {
+        attributeKey: 'cx',
+        expectedValue: '10', // Based on circleDiameterInPx = 20
+      },
+      {
+        attributeKey: 'cy',
+        expectedValue: '10', // Based on circleStrokeWidthInPx = 2
+      },
+      {
+        attributeKey: 'r',
+        expectedValue: '9', // Based on circleRadiusWithoutStrokeInPx = circleDiameterInPx / 2 - circleStrokeWidthInPx / 2
+      },
+    ];
+    testScenarios.forEach(({
+      attributeKey, expectedValue,
+    }) => {
+      it(`renders circle with the correct ${attributeKey} attribute`, () => {
+        // act
+        const wrapper = shallowMount(RatingCircle);
+        const circleElement = wrapper.find(DOM_CIRCLE_SELECTOR);
+        const actualValue = circleElement.attributes(attributeKey);
+        // assert
+        expect(actualValue).to.equal(expectedValue, formatAssertionMessage([
+          `Expected value: ${expectedValue}`,
+          `Actual value: ${actualValue}`,
+          `Attribute: ${attributeKey}`,
+        ]));
+      });
     });
   });
 });