From 9b5530e30473d38bbc85854ac4109f76f23ab074 Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Mon, 20 Mar 2023 10:29:07 -0400
Subject: [PATCH] Fix the comparison table images width

---
 .../components/comparisonTable/ComparisonTableCell.tsx    | 6 +++++-
 .../plots/components/comparisonTable/styles.module.scss   | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx
index 6f0c7e7cad..d83e5fb9c5 100644
--- a/webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx
+++ b/webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx
@@ -42,7 +42,11 @@ export const ComparisonTableCell: React.FC<ComparisonTableCellProps> = ({
   }
 
   return (
-    <button onClick={() => zoomPlot(plot.url)} data-testid="image-plot-button">
+    <button
+      className={styles.imageWrapper}
+      onClick={() => zoomPlot(plot.url)}
+      data-testid="image-plot-button"
+    >
       <img
         draggable={false}
         src={plot.url}
diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss
index a2b8a51968..380a0a9cd5 100644
--- a/webview/src/plots/components/comparisonTable/styles.module.scss
+++ b/webview/src/plots/components/comparisonTable/styles.module.scss
@@ -87,6 +87,13 @@ $gap: 4px;
   transform: rotate(0deg);
 }
 
+.imageWrapper {
+  width: 100%;
+  display: block;
+  padding: 0;
+  border: 0;
+}
+
 .noImage {
   background-color: $bg-color;
   border-style: solid;
@@ -119,6 +126,7 @@ $gap: 4px;
   position: sticky;
   left: 0;
   z-index: 1;
+  background-color: $bg-color;
 
   &::before {
     content: '';