From af4d9da19fe52887e9ea3106b52958d8161bec80 Mon Sep 17 00:00:00 2001
From: maryliag <marylia@cockroachlabs.com>
Date: Fri, 4 Nov 2022 11:05:22 -0400
Subject: [PATCH] ui: add horizontal scroll txn insight details

Previously, the table of "waiten on" inside the Transaction
Insights details didn't have a horizontal scroll, not
letting the user to see the full page on CC console.
This commits adds the proper scroll to it.

Fixes #91199

Release note (bug fix): Add horizontal scroll on "waited on"
table on Transaction Insight details page.
---
 .../workloadInsightDetails/transactionInsightDetails.tsx     | 2 +-
 .../cluster-ui/src/insightsTable/insightsTable.module.scss   | 5 +++++
 .../db-console/src/views/app/containers/layout/layout.styl   | 3 +--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
index e3a5f3ed6218..2fd79fe235ab 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
@@ -177,7 +177,7 @@ export class TransactionInsightDetails extends React.Component<TransactionInsigh
                   insightDetails.execType,
                 )}
               </Heading>
-              <div className={tableCx("margin-bottom-large")}>
+              <div className={tableCx("table-area")}>
                 <WaitTimeDetailsTable
                   data={blockingExecutions}
                   execType={insightDetails.execType}
diff --git a/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss b/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss
index 75a97ba918c9..fde0f8b318be 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/insightsTable/insightsTable.module.scss
@@ -23,6 +23,11 @@
   }
 }
 
+.table-area {
+  overflow-x: scroll;
+  padding-bottom: 30px;
+}
+
 .margin-bottom {
   margin-bottom: 20px;
 }
diff --git a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/layout.styl b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/layout.styl
index 36840ed9303c..2423e588db3a 100644
--- a/pkg/ui/workspaces/db-console/src/views/app/containers/layout/layout.styl
+++ b/pkg/ui/workspaces/db-console/src/views/app/containers/layout/layout.styl
@@ -64,8 +64,7 @@ $subnav-background  = $background-color
 
 .section
   flex 0 0 auto
-  padding 12px 24px 12px 0px
-  max-width $max-window-width
+  padding 12px 40px 12px 0px
   clearfix()
 
   &--heading