Bump Vue to latest and fix universal selector CSS

This commit updates the Vue package from v3.4.21 to v3.4.27.

This version change addressed styling issues introduced by changes in
CSS universal selector handling in Vue 3.4.22.
The change that has caused this:
- vuejs/core#10551
- vuejs/core#10548
- vuejs/core@54a6afa75a

This commit fixes two main issues that this has led to:

1. Universal CSS selector causing 'Revert' buttons to stretch and
   truncate incorrectly.
   This is fixed by modifying selectors to apply styles more
   specifically, maintaining correct display of toggle buttons.
2. Universal `*` selector that's used to understand parent HTML
   structure causing information tooltip icons to be misaligned.
   This is fixed by replacing `*` with a new `InfoTooltipWrapper`
   component, which manages layout concerns more explicitly and
   maintainably.
This commit is contained in:
undergroundwires
2024-05-19 15:02:38 +02:00
parent 2390530d92
commit aae5434451
9 changed files with 305 additions and 266 deletions

View File

@@ -68,9 +68,7 @@ export default defineComponent({
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: $spacing-absolute-small;
}
.header {
display: flex;
flex-direction: row;
@@ -80,6 +78,7 @@ export default defineComponent({
}
.docs {
background: $color-primary-darkest;
margin-left: $spacing-absolute-small;
margin-top: $spacing-relative-x-small;
color: $color-on-primary;
text-transform: none;