Refactor styles to match new CSS nesting behavior

This commit refactors SCSS to resolve deprecation warnings related to
mixed declaration after nested rules.

Sass is changing how it processes declarations that appear after nested
rules to align with CSS standards. Previously, Sass would hoist
declarations to avoid duplicating selectors, However, this behavior will
soon change to make declarations apply in the order they appear, as per
CSS standards.

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 {

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;
     }

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;

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>

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>

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>

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>

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;

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 {

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