From 36d9b8b92f4bc37e33305fea2e35a21eee4b0cef Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 21 Nov 2023 19:40:54 +0700
Subject: [PATCH] fix(ui-components): improve text readability in Arabic
 (#52366)

---
 client/src/components/layouts/global.css | 1 +
 tools/ui-components/src/normalize.css    | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 8a435130558..071093d0c57 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -156,6 +156,7 @@ p {
 a {
   color: inherit;
   text-decoration: underline;
+  /* This is required in order to improve text readability in Arabic */
   text-underline-position: under;
 }
 
diff --git a/tools/ui-components/src/normalize.css b/tools/ui-components/src/normalize.css
index ed83fa5a24d..7ed5a9369c7 100644
--- a/tools/ui-components/src/normalize.css
+++ b/tools/ui-components/src/normalize.css
@@ -39,6 +39,14 @@ template {
 }
 a {
   background-color: transparent;
+  text-decoration: underline;
+  /* This is required in order to improve text readability in Arabic */
+  text-underline-position: under;
+}
+@supports not (text-underline-position: under) {
+  a {
+    text-underline-offset: 1em;
+  }
 }
 abbr[title] {
   border-bottom: 1px dotted;