live activity changes and popup leaderboar tweak

Author: sanjay-kv

src/components/MockTerminal/MockTerminal.css

@@ -115,10 +115,15 @@
 }
 
 .mock-terminal__hint {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  vertical-align: bottom;
   font-size: 11.5px;
-  font-style: italic;
   color: rgba(55, 65, 70, 0.4);
   transition: color 0.2s ease;
+  /* 32ch = length of "click to see live user activity" */
+  animation: mock-terminal-typing 5s steps(32, end) infinite;
 }
 
 [data-theme="dark"] .mock-terminal__hint {
@@ -133,6 +138,18 @@
   color: rgba(244, 246, 243, 0.6);
 }
 
+@keyframes mock-terminal-typing {
+  0% {
+    width: 0;
+  }
+  55% {
+    width: 32ch;
+  }
+  100% {
+    width: 32ch;
+  }
+}
+
 @keyframes mock-terminal-blink {
   0%,
   100% {

src/components/MockTerminal/index.tsx

@@ -53,10 +53,10 @@ const MockTerminal: React.FC<MockTerminalProps> = ({ onPromptClick }) => {
           }}
         >
           <span className="mock-terminal__prompt">$</span>{" "}
-          <span className="mock-terminal__cursor" />{" "}
           <span className="mock-terminal__hint">
             click to see live user activity
           </span>
+          <span className="mock-terminal__cursor" />
         </div>
       </div>
     </div>

src/theme/Root.module.css

@@ -1,7 +1,8 @@
 /* Base styles for the toast container */
 .toastContainer {
   position: fixed;
-  top: 40px;
+  /* Sit just below the navbar instead of overlapping it */
+  top: calc(var(--ifm-navbar-height, 60px) + 10px);
   right: 24px;
   border: 1px solid oklch(0.69 0 0);
   border-radius: 8px; /* Docusaurus --radius var is often 8px */