From 480c1c95661feb9e7992cd82253d2076fd45cca9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?= <r.hackr@gmail.com>
Date: Thu, 25 Jul 2024 20:02:03 -0400
Subject: [PATCH] Better tooltip positioning for single lettered content

---
 src/Code/Syntax/SyntaxSegment.elm | 11 +++++++++--
 src/css/code/syntax.css           |  8 +++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Code/Syntax/SyntaxSegment.elm b/src/Code/Syntax/SyntaxSegment.elm
index 4a57bfcd..1cb0d3fd 100644
--- 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
index c328bb9d..6e0580db 100644
--- 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;