Better tooltip positioning for single lettered content

unisonweb · Jul 26, 2024 · 480c1c9 · 480c1c9
1 parent f45bd6c
commit 480c1c9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/Code/Syntax/SyntaxSegment.elm b/src/Code/Syntax/SyntaxSegment.elm
@@ -7,7 +7,7 @@ import Code.HashQualified as HQ
 import Code.Syntax.Linked exposing (Linked(..))
 import Code.Syntax.SyntaxSegmentHelp as SyntaxSegmentHelp
 import Html exposing (Html, span, text)
-import Html.Attributes exposing (class)
+import Html.Attributes exposing (class, classList)
 import Html.Events exposing (onMouseEnter, onMouseLeave)
 import Json.Decode as Decode exposing (andThen, at, field)
 import Json.Decode.Extra exposing (when)
@@ -329,7 +329,14 @@ view linked ((SyntaxSegment sType sText) as segment) =
                             in
                             Tooltip.view
                                 (span
-                                    [ class "syntax-help", class className ]
+                                    [ class "syntax-help"
+                                    , class className
+                                    , classList
+                                        [ ( "single-letter"
+                                          , String.length (String.trim sText) == 1
+                                          )
+                                        ]
+                                    ]
                                     [ c ]
                                 )
                                 tooltip

diff --git a/src/css/code/syntax.css b/src/css/code/syntax.css
@@ -49,9 +49,15 @@ code a:active .tooltip-trigger.tooltip_show .tooltip {
 }
 
 .tooltip-trigger:has(> .syntax-help) .tooltip {
-  margin-left: -1rem;
   font-family: var(--font-sans-serif);
 }
+.tooltip-trigger:has(> .syntax-help) .tooltip {
+  margin-left: -0.5rem;
+}
+
+.tooltip-trigger:has(> .syntax-help.single-letter) .tooltip {
+  margin-left: -15px;
+}
 
 .tooltip-trigger:has(> .syntax-help) .tooltip code {
   display: inline-block;