diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index 891703de..e8f031c3 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -94,11 +94,11 @@
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  mask-image: linear-gradient(to top, transparent, black 16px);
+  mask-image: linear-gradient(to bottom, black 3em, transparent);
 }
 .status-translation-block
   .translated-block
-  output.translated-pronunciation-content:is(:active, :focus) {
+  output.translated-pronunciation-content.expand {
   display: block;
   -webkit-line-clamp: unset;
   -webkit-box-orient: unset;
diff --git a/src/components/translation-block.jsx b/src/components/translation-block.jsx
index 91b231ad..1af8b0e6 100644
--- a/src/components/translation-block.jsx
+++ b/src/components/translation-block.jsx
@@ -146,6 +146,9 @@ function TranslationBlock({
                   <output
                     class="translated-pronunciation-content"
                     tabIndex={-1}
+                    onClick={(e) => {
+                      e.target.classList.toggle('expand');
+                    }}
                   >
                     {pronunciationContent}
                   </output>