From 99b1f8e3e9967dde242fbfa95a8457bc7589fb06 Mon Sep 17 00:00:00 2001
From: mirnawong1 <mirna.wong@fishtownanalytics.com>
Date: Mon, 15 Jan 2024 16:32:37 +0000
Subject: [PATCH] add css

---
 .../discovery-use-cases-and-examples.md           | 15 ++++++++++-----
 website/src/css/custom.css                        |  6 ++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md b/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md
index 8efb1ec0d37..fdfd1111424 100644
--- a/website/docs/docs/dbt-cloud-apis/discovery-use-cases-and-examples.md
+++ b/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
 
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 094c3501e06..9aab4a57e7a 100644
--- a/website/src/css/custom.css
+++ b/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;