Move translation pronunciation down and collapse to max 3 lines

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;
+  padding-top: 0.75em;
-  border-top: var(--hairline-width) solid var(--bg-color);
+  border-top: var(--hairline-width) solid var(--outline-color);
-  border-bottom: 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;
 }

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>
+                )}
               </>
             )
           )}