From 6d1b7f34b5902441757535c5c7d7b678c3138117 Mon Sep 17 00:00:00 2001
From: Jaro Habiger <jarohabiger@googlemail.com>
Date: Wed, 11 Oct 2023 19:47:20 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20bugs=20in=20LanguageSettin?=
 =?UTF-8?q?gs=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/pages/LanguageSettings.tsx | 40 ++++++++++++++++--------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/app/src/pages/LanguageSettings.tsx b/app/src/pages/LanguageSettings.tsx
index 88839b9c..d93c290b 100644
--- a/app/src/pages/LanguageSettings.tsx
+++ b/app/src/pages/LanguageSettings.tsx
@@ -103,21 +103,23 @@ function ModelTable({
         isDefault={null}
         action={
           <Tooltip content={`downloading model ${Math.round(model.progress * 100)}%`}>
-            <HoverSwitcher
-              onClick={() => dispatch(cancelDownload(model.task_uuid))}
-              hoverChild={<IconButton icon={StopIcon} />}
-              defaultChild={
-                <Button appearance={'minimal'} padding={0}>
-                  <Circle
-                    style={{ height: majorScale(3) }}
-                    percent={model.progress * 100}
-                    strokeWidth={50}
-                    trailWidth={0}
-                    strokeLinecap={'butt'}
-                  />
-                </Button>
-              }
-            />
+            <Pane>
+              <HoverSwitcher
+                onClick={() => dispatch(cancelDownload(model.task_uuid))}
+                hoverChild={<IconButton icon={StopIcon} />}
+                defaultChild={
+                  <Button appearance={'minimal'} padding={0}>
+                    <Circle
+                      style={{ height: majorScale(3) }}
+                      percent={model.progress * 100}
+                      strokeWidth={50}
+                      trailWidth={0}
+                      strokeLinecap={'butt'}
+                    />
+                  </Button>
+                }
+              />
+            </Pane>
           </Tooltip>
         }
         key={model.model_id}
@@ -221,19 +223,19 @@ function HoverSwitcher({
   hoverChild: JSX.Element;
   defaultChild: JSX.Element;
 }): JSX.Element {
-  const [shownChild, setShownChild] = useState(defaultChild);
+  const [hover, setHover] = useState(false);
 
   return (
     <Pane
       {...switcherProps}
       onMouseLeave={() => {
-        setShownChild(defaultChild);
+        setHover(false);
       }}
       onMouseOver={() => {
-        setShownChild(hoverChild);
+        setHover(true);
       }}
     >
-      {shownChild}
+      {hover ? hoverChild : defaultChild}
     </Pane>
   );
 }