From 849844f7d3e75155a17d26d3b3baa17ac8eeaf8d Mon Sep 17 00:00:00 2001
From: Tibor Leupold <tibor@lpld.io>
Date: Sun, 8 Dec 2024 08:57:56 -0800
Subject: [PATCH] Use inline-block instead of flex to fix underline issue in
 safari

This is a known bug: https://bugs.webkit.org/show_bug.cgi?id=276156
---
 lpld/templates/atoms/chevron-link/chevron-link.html | 5 ++---
 lpld/templates/atoms/chevron-link/chevron-link.yaml | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lpld/templates/atoms/chevron-link/chevron-link.html b/lpld/templates/atoms/chevron-link/chevron-link.html
index e15ec0ba..b2444fdc 100644
--- a/lpld/templates/atoms/chevron-link/chevron-link.html
+++ b/lpld/templates/atoms/chevron-link/chevron-link.html
@@ -6,9 +6,8 @@
                 {{ word }}
             {% else %}
                 {# Span wrapper to avoid line-break between icon and last word. #}
-                <span class="inline-flex items-center underline decoration-1 group-hover:decoration-2">
-                    {{ word }}
-                    {% heroicon_mini "chevron-right" class="transition ease-linear group-hover:translate-x-0.5 delay-[10] duration-[10]" %}
+                <span class="inline-block nowrap underline decoration-1 group-hover:decoration-2">
+                    {{ word }}{% heroicon_mini "chevron-right" class="inline-block transition ease-linear group-hover:translate-x-0.5 delay-[10] duration-[10]" %}
                 </span>
             {% endif %}
         {% endfor %}
diff --git a/lpld/templates/atoms/chevron-link/chevron-link.yaml b/lpld/templates/atoms/chevron-link/chevron-link.yaml
index d675a445..09bbcdeb 100644
--- a/lpld/templates/atoms/chevron-link/chevron-link.yaml
+++ b/lpld/templates/atoms/chevron-link/chevron-link.yaml
@@ -1,3 +1,3 @@
 context:
-  text: 'Listing link title'
+  text: 'This is a much longer link title to check linebreaks'
   href: 'https://www.example.com'