Merge pull request #1507 from Abhash-Chakraborty/Abhash/fix-toast-overlay-1500

fix: dismiss leaderboard toast cleanly

Author: sanjay-kv

src/css/custom.css

@@ -147,9 +147,6 @@ a.menu__link.menu__link--active div span:first-child {
   font-weight: 600;
 }
 
-
-
-
 /* Technical theme */
 .custom-sidebar-technical > .menu__list-item-collapsible > .menu__link {
   background: linear-gradient(135deg, #ff6b6b, #ee5a24);
@@ -407,7 +404,9 @@ body {
   padding: 6px;
   border-radius: 6px;
   color: var(--ifm-navbar-link-color);
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
 }
 
 .navbar-social-icon:hover {
@@ -1450,10 +1449,34 @@ html {
 }
 
 .algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut {
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 3px !important;
+  height: 20px;
   margin-left: 10px;
+  padding: 0 6px !important;
+  border: 1px solid var(--ifm-color-emphasis-300) !important;
+  border-radius: 5px !important;
+  background: var(--ifm-color-emphasis-100) !important;
+  color: var(--ifm-color-emphasis-700) !important;
+  font-size: 12px !important;
+  line-height: 1 !important;
   flex-shrink: 0;
 }
 
+.algolia-sitesearch-navbar .sitesearch-button .keyboard-shortcut > * {
+  min-width: 0 !important;
+  height: auto !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
+  font: inherit !important;
+  line-height: inherit !important;
+}
+
 [data-theme="dark"] .explore-btn:hover {
   color: white;
 }

src/theme/Root.tsx

@@ -36,9 +36,11 @@ export default function Root({ children }: { children: React.ReactNode }) {
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const location = useLocation();
   const [isInitialLoad, setIsInitialLoad] = useState(true);
-  
+
   // Check if current page is sponsors page
-  const isSponsorsPage = location.pathname === '/our-sponsors/' || location.pathname === '/our-sponsors';
+  const isSponsorsPage =
+    location.pathname === "/our-sponsors/" ||
+    location.pathname === "/our-sponsors";
 
   // Theme detection logic
   useEffect(() => {
@@ -63,26 +65,28 @@ export default function Root({ children }: { children: React.ReactNode }) {
 
   // Show toast on initial load for all pages
   useEffect(() => {
-    if (isInitialLoad) {
-      setShowToast(true);
-      timerRef.current = setTimeout(() => setShowToast(false), 10000);
-      setIsInitialLoad(false);
-    }
+    setShowToast(true);
+    timerRef.current = setTimeout(() => {
+      setShowToast(false);
+      timerRef.current = null;
+    }, 10000);
+    setIsInitialLoad(false);
 
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
+        timerRef.current = null;
       }
     };
-  }, [isInitialLoad]);
+  }, []);
 
   // Show toast on navigation only for sponsors page
   useEffect(() => {
     if (!isInitialLoad && isSponsorsPage) {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
-      
+
       setShowToast(false);
       const showTimer = setTimeout(() => {
         setShowToast(true);