fix

index.html

@@ -40,13 +40,13 @@
         <div id="status" data-tooltip data-tooltip-left>
           <i class="icon icon-loading"></i>
           <div id="progress">
-            <div class="progress-bar">
-              <!-- <div class="progress-value"></div> -->
-            </div>
+            <div class="progress-bar"></div>
           </div>
         </div>
         <div>
-          <button id="showBuildPanel" data-tooltip="Run code"><i class="icon icon-run"></i></button>
+          <button id="showBuildPanel" data-tooltip="Run code">
+            <i class="icon icon-run"></i>
+          </button>
           <button id="toggleTheme" data-tooltip="Toggle theme">
             <i class="icon icon-toggle-theme"></i>
           </button>

src/server.ts

@@ -14,7 +14,7 @@ export async function createServer() {
         break;
       }
       case "progress": {
-        setClangdStatus(e.data.value, e.data.progress);
+        setClangdStatus(e.data.value, e.data.max);
         break;
       }
     }

src/style.css

@@ -150,6 +150,8 @@ body {
     display: inline-flex;
     align-items: center;
     gap: 0.25em;
+    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
+      border-color 0.2s ease-in-out;
   }
   button:hover:not([disabled], .disabled, :disabled) {
     color: var(--btn-text-hover-color, var(--btn-text-color));
@@ -404,7 +406,8 @@ a {
 }
 
 [data-tooltip]::after {
-  display: none;
+  visibility: hidden;
+  display: block;
   content: var(--tooltip-text, attr(data-tooltip));
   position: absolute;
   top: -0.5em;
@@ -418,11 +421,12 @@ a {
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 20;
 }
 
 [data-tooltip]:hover::after {
-  display: block;
+  visibility: visible;
   opacity: 1;
 }