From 5fe5d976110ad0017ab1cca8976bb8f30786d4df Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 31 Mar 2023 09:44:12 +0800
Subject: [PATCH] Move translation pronunciation down and collapse to max 3
 lines

---
 src/components/translation-block.css | 21 +++++++++++++++++----
 src/components/translation-block.jsx | 13 ++++++++-----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index c36a50ec..891703de 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -82,13 +82,26 @@
 }
 .status-translation-block .translated-block output {
   display: block;
-  margin-top: 1em;
+  margin-top: 0.75em;
 }
 .status-translation-block
   .translated-block
   output.translated-pronunciation-content {
   opacity: 0.75;
-  padding-bottom: 1em;
-  border-top: var(--hairline-width) solid var(--bg-color);
-  border-bottom: var(--hairline-width) solid var(--outline-color);
+  padding-top: 0.75em;
+  border-top: var(--hairline-width) solid var(--outline-color);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  mask-image: linear-gradient(to top, transparent, black 16px);
+}
+.status-translation-block
+  .translated-block
+  output.translated-pronunciation-content:is(:active, :focus) {
+  display: block;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: unset;
+  overflow: visible;
+  mask-image: none;
 }
diff --git a/src/components/translation-block.jsx b/src/components/translation-block.jsx
index 161b778e..91b231ad 100644
--- a/src/components/translation-block.jsx
+++ b/src/components/translation-block.jsx
@@ -139,14 +139,17 @@ function TranslationBlock({
           ) : (
             !!translatedContent && (
               <>
-                {!!pronunciationContent && (
-                  <output class="translated-pronunciation-content">
-                    {pronunciationContent}
-                  </output>
-                )}
                 <output class="translated-content" lang={targetLang}>
                   {translatedContent}
                 </output>
+                {!!pronunciationContent && (
+                  <output
+                    class="translated-pronunciation-content"
+                    tabIndex={-1}
+                  >
+                    {pronunciationContent}
+                  </output>
+                )}
               </>
             )
           )}