CSS fix: prevent underlining when hovering buttons within links (#8311)

Signed-off-by: Denis FL <denisfl@pm.me>

packages/theme/styles/_layouts.scss

@@ -21,26 +21,34 @@ a {
   text-decoration: none;
   color: var(--theme-content-color);
   outline: none;
+  
   &:hover {
     color: var(--theme-caption-color);
-    text-decoration: underline;
+    
+    &:not(:has(button)):not(.stealth):not(.no-underline) {
+      text-decoration: underline;
+    }
   }
+  
   &:active {
     color: var(--theme-content-color);
-    text-decoration: underline;
+    
+    &:not(:has(button)):not(.stealth):not(.no-underline) {
+      text-decoration: underline;
+    }
   }
-  &:visited { color: var(--theme-content-color); }
-
-  &.stealth,
-  &.no-underline {
-    &:hover, &:active { text-decoration: none; }
+  
+  &:visited { 
+    color: var(--theme-content-color); 
   }
+  
   &.stealth {
     display: inline-flex;
     align-items: center;
     width: 100%;
   }
 }
+
 button {
   display: flex;
   justify-content: center;

plugins/workbench-resources/src/components/HelpAndSupport.svelte

@@ -246,6 +246,7 @@
     align-items: flex-end;
     margin: 0 0.5rem 0.5rem;
     padding-top: 0.625rem;
+    gap: 0.25rem;
   }
   .key-box {
     padding: 0 0.5rem;