From ec34ac1124e8b8ae53bf31a4dbdc88bb078b3d4e Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Tue, 19 Mar 2024 09:09:29 +0100
Subject: [PATCH] Fix tooltip styling inconsistency

This commit fixes inconsistent tooltip styling by setting the font
explicitly on the tooltip container to ensure uniform tooltip fonts.

As tooltip is rendered inside the parent elements' DOM, styling parent
element's font was also styling the font's font due to style
propogation, but setting fonts explicitly on tooltip ensure this does
not happen.
---
 src/presentation/assets/styles/_mixins.scss           | 5 +++++
 src/presentation/assets/styles/base/_index.scss       | 4 +---
 src/presentation/components/Shared/TooltipWrapper.vue | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index 4a998421..20211bc2 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -128,3 +128,8 @@
   $calculated-width-in-em: calc(#{$estimated-width-per-character-in-em} * #{$value-in-ch});
   #{$property}: $calculated-width-in-em;
 }
+
+@mixin base-font-style {
+  font-family: $font-family-main;
+  font-size: $font-size-absolute-normal;
+}
diff --git a/src/presentation/assets/styles/base/_index.scss b/src/presentation/assets/styles/base/_index.scss
index c5a26022..50715f23 100644
--- a/src/presentation/assets/styles/base/_index.scss
+++ b/src/presentation/assets/styles/base/_index.scss
@@ -21,9 +21,7 @@ $base-spacing: 1em;
 
 body {
   background: $color-background;
-  font-family: $font-family-main;
-  font-size: $font-size-absolute-normal;
-
+  @include base-font-style;
   @include apply-uniform-spacing($base-spacing: $base-spacing)
 }
 
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index ac24bdc7..739a3ce1 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -220,7 +220,9 @@ $color-tooltip-background: $color-primary-darkest;
   color: $color-on-primary;
   border-radius: 16px;
   padding: 12px 10px;
-  font-size: $font-size-absolute-normal;
+
+  // Explicitly set font styling for tooltips to prevent inconsistent appearances due to style inheritance from trigger elements.
+  @include base-font-style;
 
   /*
     This margin creates a visual buffer between the tooltip and the edges of the document.