From a8ed159bf4e5e37f3ba2d6ae9d77e1187fcfd0da Mon Sep 17 00:00:00 2001
From: David <info@thedaviddelta.com>
Date: Wed, 4 May 2022 20:28:59 +0200
Subject: [PATCH] Fix audio being unclickable on textarea focus (#105)

* Fix audio being unclickable on textarea focus

* Small Readme fix
---
 README.md                      | 2 +-
 components/TranslationArea.tsx | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c86547d..3fb33a5 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,7 @@ These are the currently known *Lingva* instances. Feel free to make a Pull Reque
 | [translate.datatunnel.xyz](https://translate.datatunnel.xyz)        | [Hetzner](https://hetzner.com/)           | [Let's Encrypt](https://www.ssllabs.com/ssltest/analyze.html?d=translate.datatunnel.xyz)     |
 | [lingva.esmailelbob.xyz](https://lingva.esmailelbob.xyz/)           | [Kimsufi](https://kimsufi.com/)           | [Let's Encrypt](https://www.ssllabs.com/ssltest/analyze.html?d=lingva.esmailelbob.xyz)       |
 | [translate.plausibility.cloud](https://translate.plausibiity.cloud) | [Hetzner](https://hetzner.com/)           | [Let's Encrypt](https://www.ssllabs.com/ssltest/analyze.html?d=translate.plausibility.cloud) |
-| [lingva.lunar.icu/](https://lingva.lunar.icu/)                      | [Lansol](https://lansol.de/)              | [Cloudflare](https://www.ssllabs.com/ssltest/analyze.html?d=lingva.lunar.icu)                |
+| [lingva.lunar.icu](https://lingva.lunar.icu/)                       | [Lansol](https://lansol.de/)              | [Cloudflare](https://www.ssllabs.com/ssltest/analyze.html?d=lingva.lunar.icu)                |
 
 ## Public APIs
 
diff --git a/components/TranslationArea.tsx b/components/TranslationArea.tsx
index 8bd5c01..cf0dfcf 100644
--- a/components/TranslationArea.tsx
+++ b/components/TranslationArea.tsx
@@ -27,6 +27,7 @@ const TranslationArea: FC<Props> = ({ value, onChange, onSubmit, readOnly, audio
         <Box
             position="relative"
             w="full"
+            isolation="isolate"
         >
             <Textarea
                 value={value}
@@ -44,6 +45,8 @@ const TranslationArea: FC<Props> = ({ value, onChange, onSubmit, readOnly, audio
                 position="absolute"
                 bottom={4}
                 right={4}
+                // Needed because the textarea stacks over on focus
+                zIndex={3}
             >
                 {canCopy && (
                     <Tooltip label={hasCopied ? "Copied!" : "Copy to clipboard"}>