diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index 20211bc2..6a14e527 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -29,9 +29,9 @@
   for interactive elements during hover or touch interactions.
 */
 @mixin clickable($cursor: 'pointer') {
-  cursor: #{$cursor};
   user-select: none;
   -webkit-tap-highlight-color: transparent; // Removes blue tap highlight
+  cursor: #{$cursor};
 }
 
 @mixin fade-transition($name) {
@@ -120,13 +120,13 @@
 }
 
 @mixin set-property-ch-value-with-fallback($property, $value-in-ch) {
-  @supports (width: 1ch) {
-    #{$property}: #{$value-in-ch}ch;
-  }
-  // For browsers that does not support `ch` unit (e.g., Opera Mini):
+  // For browsers that do not support `ch` unit (e.g., Opera Mini):
   $estimated-width-per-character-in-em: calc(1em / 2); // 1 character is approximately half the font size
   $calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
   #{$property}: $calculated-width-in-em;
+  @supports (width: 1ch) {
+    #{$property}: #{$value-in-ch}ch; // Override `em` value if `ch` is supported.
+  }
 }
 
 @mixin base-font-style {
diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index 8d05b1e7..eca628e7 100644
--- a/src/presentation/components/App.vue
+++ b/src/presentation/components/App.vue
@@ -78,15 +78,17 @@ function getOptionalDevToolkitComponent(): Component | undefined {
   margin-right: auto;
   margin-left: auto;
   max-width: 1600px;
+
   .app__wrapper {
+    display:flex;
+    flex-direction: column;
+
     background-color: $color-surface;
     color: $color-on-surface;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
 
     @include responsive-spacing;
 
-    display:flex;
-    flex-direction: column;
     .app__row {
       margin-bottom: $spacing-absolute-large;
     }
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index 82764fa2..0701495a 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -79,12 +79,12 @@ export default defineComponent({
   box-shadow: 0 3px 9px $color-primary-darkest;
   border-radius: 4px;
 
+  @include clickable;
+
   .button__icon {
     font-size: $font-size-absolute-x-large;
   }
 
-  @include clickable;
-
   @include hover-or-touch {
     background: $color-surface;
     box-shadow: 0px 2px 10px 5px $color-secondary;
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
index 95a142b4..9daff501 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
@@ -110,8 +110,9 @@ export default defineComponent({
   @include apply-icon-color($color-danger);
 }
 .recommendation {
+  align-items: center;
+
   @include horizontal-stack;
   @include apply-icon-color($color-caution);
-  align-items: center;
 }
 </style>
diff --git a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
index dfcf6b25..bdb8450c 100644
--- a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
+++ b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
@@ -68,9 +68,11 @@ export default defineComponent({
   @include horizontal-stack;
   @include apply-icon-color($color-caution);
 }
+
 .description {
+  align-items: center;
+
   @include horizontal-stack;
   @include apply-icon-color($color-success);
-  align-items: center;
 }
 </style>
diff --git a/src/presentation/components/Scripts/Slider/SliderHandle.vue b/src/presentation/components/Scripts/Slider/SliderHandle.vue
index e2c1b98f..a6c9a2a7 100644
--- a/src/presentation/components/Scripts/Slider/SliderHandle.vue
+++ b/src/presentation/components/Scripts/Slider/SliderHandle.vue
@@ -58,8 +58,19 @@ $color-hover    : $color-primary;
 $cursor         : v-bind(cursorCssValue);
 
 .handle {
+  cursor: $cursor;
+
   @include reset-button;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin-right: $spacing-absolute-small;
+  margin-left: $spacing-absolute-small;
+
   @include clickable($cursor: $cursor);
+
   @include hover-or-touch {
     .line {
       background: $color-hover;
@@ -68,11 +79,7 @@ $cursor         : v-bind(cursorCssValue);
       color: $color-hover;
     }
   }
-  cursor: $cursor;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   .line {
     flex: 1;
     background: $color;
@@ -81,7 +88,5 @@ $cursor         : v-bind(cursorCssValue);
   .icon {
     color: $color;
   }
-  margin-right: $spacing-absolute-small;
-  margin-left: $spacing-absolute-small;
 }
 </style>
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 d080f025..a5de5e34 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
@@ -78,17 +78,20 @@ export default defineComponent({
     }
   }
   .docs {
+    color: $color-on-primary;
     background: $color-primary-darkest;
+
     margin-left: $spacing-absolute-small;
     margin-top: $spacing-relative-x-small;
-    color: $color-on-primary;
-    text-transform: none;
     padding: $spacing-absolute-medium;
+
+    text-transform: none;
+    cursor: auto;
+    user-select: text;
+
     &-collapsed {
       display: none;
     }
-    cursor: auto;
-    user-select: text;
   }
 }
 </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 36084749..9f8cd3ec 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
@@ -133,14 +133,14 @@ export default defineComponent({
 .expansible-node {
   display: flex;
   flex-direction: row;
+
+  align-items: center;
+
   .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;
-
   .expand-collapse-caret {
     $caret-size: 24px;
     $padding-right: $spacing-absolute-small;
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index e44b43f5..2c89e354 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -220,9 +220,6 @@ $color-tooltip-background: $color-primary-darkest;
 }
 
 .tooltip__overlay {
-  @include set-visibility(false);
-  @include fixed-fullscreen;
-
   /*
     The z-index is set for both visible and invisible states to ensure it maintains its stacking order
     above other elements during transitions. This approach prevents the tooltip from falling behind other
@@ -235,6 +232,9 @@ $color-tooltip-background: $color-primary-darkest;
     This prevents unintentional layout issues or overflow.
   */
   white-space: normal;
+
+  @include set-visibility(false);
+  @include fixed-fullscreen;
 }
 
 .tooltip__trigger {
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index f6643ee9..36b96c75 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -116,6 +116,8 @@ export default defineComponent({
   }
   &__section {
     display: flex;
+    flex-wrap: wrap;
+
     @media screen and (max-width: $media-screen-big-width) {
       justify-content: space-around;
       width: 100%;
@@ -124,7 +126,7 @@ export default defineComponent({
         margin-top: $spacing-relative-small;
       }
     }
-    flex-wrap: wrap;
+
     &__item:not(:first-child) {
       &::before {
         content: "|";