apply review

Author: schultek

site/lib/_sass/components/_tooltip.scss

@@ -1,57 +1,61 @@
 .tooltip-wrapper {
-    position: relative;
-
-    a.tooltip-target {
-        color: inherit;
-        text-decoration: underline dotted;
+  position: relative;
+
+  a.tooltip-target {
+    color: inherit;
+    text-decoration: underline dotted;
+  }
+
+  .tooltip {
+    visibility: hidden;
+
+    display: flex;
+    position: absolute;
+    z-index: var(--site-z-floating);
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+
+    flex-flow: column nowrap;
+    width: 16rem;
+
+    background: var(--site-raised-bgColor);
+    border: 0.05rem solid rgba(0, 0, 0, .125);
+    border-radius: 0.75rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
+    padding: 0.8rem;
+
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: normal;
+
+    .tooltip-header {
+      font-size: 1.2rem;
+      font-weight: 500;
+      margin-bottom: 0.25rem;
     }
 
-    .tooltip {
-        visibility: hidden;
-
-        display: flex;
-        position: absolute;
-        z-index: 100;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-
-        flex-flow: column nowrap;
-        width: 250px;
-
-        background: var(--site-raised-bgColor);
-        border: 0.05rem solid rgba(0, 0, 0, .125);
-        border-radius: 0.75rem;
-        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
-        padding: 0.8rem;
-
-        .tooltip-header {
-            font-size: 1.2rem;
-            font-weight: 500;
-            margin-bottom: 0.25rem;
-        }
-
-        .tooltip-content {
-            font-size: 0.875rem;
-            color: var(--site-secondary-textColor);
-        }
+    .tooltip-content {
+      font-size: 0.875rem;
+      color: var(--site-secondary-textColor);
     }
+  }
 
-    // On non-touch devices, show tooltip on hover or focus.
-    @media all and not (pointer: coarse) {
-        &:hover .tooltip {
-            visibility: visible;
-        }
+  // On non-touch devices, show tooltip on hover or focus.
+  @media all and not (pointer: coarse) {
+    &:hover .tooltip {
+      visibility: visible;
+    }
 
-        &:has(.tooltip-target:focus) .tooltip {
-            visibility: visible;
-        }
+    &:focus-within .tooltip {
+      visibility: visible;
     }
+  }
 
-    // On touch devices, show tooltip on click (see global_scripts.dart).
-    @media all and (pointer: coarse) {
-        .tooltip.visible {
-            visibility: visible;
-        }
+  // On touch devices, show tooltip on click (see global_scripts.dart).
+  @media all and (pointer: coarse) {
+    .tooltip.visible {
+      visibility: visible;
     }
+  }
 }

site/lib/src/extensions/glossary_link_processor.dart

@@ -6,6 +6,7 @@ import 'package:jaspr/jaspr.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 
 import '../pages/glossary.dart';
+import '../util.dart';
 
 /// A node-processing, page extension for Jaspr Content that looks for links to
 /// glossary entries and enhances them with interactive glossary tooltips.
@@ -21,9 +22,7 @@ class GlossaryLinkProcessor implements PageExtension {
   List<Node> _processNodes(List<Node> nodes, Glossary glossary) {
     final processedNodes = <Node>[];
 
-    for (var i = 0; i < nodes.length; i++) {
-      final node = nodes[i];
-
+    for (final node in nodes) {
       if (node is ElementNode &&
           node.tag == 'a' &&
           node.attributes['href']?.startsWith('/resources/glossary') == true) {
@@ -46,8 +45,10 @@ class GlossaryLinkProcessor implements PageExtension {
             [
               ElementNode('a', {
                 ...node.attributes,
-                'class': '${node.attributes['class'] ?? ''} tooltip-target'
-                    .trim(),
+                'class': [
+                  ?node.attributes['class'],
+                  'tooltip-target',
+                ].toClasses,
               }, node.children),
               ComponentNode(GlossaryTooltip(entry: entry)),
             ],

site/lib/src/style_hash.dart

@@ -2,4 +2,4 @@
 // dart format off
 
 /// The generated hash of the `main.css` file.
-const generatedStylesHash = '5w6vLV6V2ZWf';
+const generatedStylesHash = '39pNG/D9v051';