consider scrolling for hover function

website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md

@@ -7,13 +7,18 @@ With the Discovery API, you can query the metadata in dbt Cloud to learn more ab
 
 You can use the API in a variety of ways to get answers to your business questions. Below describes some of the uses of the API and is meant to give you an idea of the questions this API can help you answer.
 
+<div className="scroll-table">
+<table>
 | Use Case | Outcome | Example Questions |
 | --- | --- | --- |
-| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure costs and improve timeliness. | <ul><li>What’s the latest status of each model?</li> <li>Do I need to run this model?</li><li>How long did my DAG take to run?</li> </ul>|
-| [Quality](#quality) | Monitor data source freshness and test results to resolve issues and drive trust in data. | <ul><li>How fresh are my data sources?</li><li>Which tests and models failed?</li><li>What’s my project’s test coverage?</li></ul>  |
-| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with rich context and metadata. | <ul><li>What do these tables and columns mean?</li><li>What’s the full data lineage?</li><li>Which metrics can I query?</li> </ul> |
-| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. | <ul><li>Who is responsible for this model?</li><li>How do I contact the model’s owner?</li><li>Who can use this model?</li></ul>|
-| [Development](#development) | Understand dataset changes and usage and gauge impacts to inform project definition. | <ul><li>How is this metric used in BI tools?</li><li>Which nodes depend on this data source?</li><li>How has a model changed? What impact?</li> </ul>|
+| [Performance](#performance) | Identify inefficiencies in pipeline execution to reduce infrastructure<br /> costs and improve timeliness. | <ul><li>What's the latest status of each model?</li> <li>Do I need to run this model?</li><li>How long did my DAG take to run?</li> </ul>|
+| [Quality](#quality) | Monitor data source freshness and test results to resolve issues<br /> and drive trust in data. | <ul><li>How fresh are my data sources?</li><li>Which tests and models failed?</li><li>What's my project's test coverage?</li></ul>  |
+| [Discovery](#discovery) | Find and understand relevant datasets and semantic nodes with<br /> rich context and metadata. | <ul><li>What do these tables and columns mean?</li><li>What's the full data lineage?</li><li>Which metrics can I query?</li> </ul> |
+| [Governance](#governance) | Audit data development and facilitate collaboration within and between teams. | <ul><li>Who is responsible for this model?</li><li>How do I contact the model's owner?</li><li>Who can use this model?</li></ul>|
+| [Development](#development) | Understand dataset changes and usage and gauge impacts<br /> to inform project definition. | <ul><li>How is this metric used in BI tools?</li><li>Which nodes depend on this data source?</li><li>How has a model changed? What impact?</li> </ul>|
+
+</table>
+</div>
 
 ## Performance
 

website/src/components/detailsToggle/index.js

@@ -3,33 +3,49 @@ import styles from './styles.module.css';
 
 function detailsToggle({ children, alt_header = null }) {
   const [isOn, setOn] = useState(false);
-  const [hoverActive, setHoverActive] = useState(true);
+  const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling
   const [hoverTimeout, setHoverTimeout] = useState(null);
 
   const handleToggleClick = () => {
-    setHoverActive(true); // Disable hover when clicked
     setOn(current => !current); // Toggle the current state
-};
-
-const handleMouseEnter = () => {
-  if (isOn) return; // Ignore hover if already open
-  setHoverActive(true); // Enable hover
-  const timeout = setTimeout(() => {
-      if (hoverActive) setOn(true);
-  }, 500); 
-  setHoverTimeout(timeout);
-};
-
-const handleMouseLeave = () => {
-  if (!isOn) {
+  };
+
+  const handleMouseEnter = () => {
+    if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling
+    const timeout = setTimeout(() => {
+      if (!isScrolling) setOn(true);
+    }, 700); // 
+    setHoverTimeout(timeout);
+  };
+
+  const handleMouseLeave = () => {
+    if (!isOn) {
       clearTimeout(hoverTimeout);
       setOn(false);
-  }
-};
+    }
+  };
+
+  const handleScroll = () => {
+    setIsScrolling(true);
+    clearTimeout(hoverTimeout);
+    setOn(false);
+
+    // Reset scrolling state after a  delay
+    setTimeout(() => {
+      setIsScrolling(false);
+    }, 800);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
-useEffect(() => {
-  return () => clearTimeout(hoverTimeout);
-}, [hoverTimeout]);
+  useEffect(() => {
+    return () => clearTimeout(hoverTimeout);
+  }, [hoverTimeout]);
 
   return (
     <div className='detailsToggle'>

website/src/css/custom.css

@@ -2086,6 +2086,12 @@ h2.anchor.clicked a.hash-link:before {
   color: #fff; /* Change color on hover if desired */
 }
 
+.scroll-table {
+  max-width: 100%; /* Set the maximum width for the table */
+  overflow-x: auto; /* Add a scrollbar if content overflows */
+  white-space: nowrap; /* Prevent table cell content from wrapping */
+}
+
 @media (max-width: 996px) {
   .quickstart-container {
     flex-direction: column;