Fix table corner radius visual artifact

narukami894 · Dec 29, 2017 · d9948e2 · d9948e2
1 parent f2c0dea
commit d9948e2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/frontend/src/metabase/visualizations/components/TableInteractive.css b/frontend/src/metabase/visualizations/components/TableInteractive.css
@@ -1,12 +1,24 @@
+:root {
+    --table-border-radius: 6px;
+}
+
 .TableInteractive {
-  border-radius: 6px;
+  border-radius: var(--table-border-radius);
   overflow: hidden;
 }
 
 .TableInteractive-headerCellData {
   font-weight: 700;
 }
 
+.TableInteractive-headerCellData.TableInteractive-cellWrapper--firstColumn {
+  border-top-left-radius: var(--table-border-radius);
+}
+
+.TableInteractive-headerCellData.TableInteractive-cellWrapper--lastColumn {
+  border-top-right-radius: var(--table-border-radius);
+}
+
 .TableInteractive-headerCellData .Icon {
   opacity: 0;
 }
@@ -77,4 +89,3 @@
   background-color: var(--brand-color);
   color: white;
 }
-
diff --git a/frontend/src/metabase/visualizations/components/TableInteractive.jsx b/frontend/src/metabase/visualizations/components/TableInteractive.jsx
@@ -227,6 +227,7 @@ export default class TableInteractive extends Component {
                 key={key} style={style}
                 className={cx("TableInteractive-cellWrapper", {
                     "TableInteractive-cellWrapper--firstColumn": columnIndex === 0,
+                    "TableInteractive-cellWrapper--lastColumn": columnIndex === cols.length - 1,
                     "cursor-pointer": isClickable,
                     "justify-end": isColumnRightAligned(column),
                     "link": isClickable && isID(column)
@@ -281,6 +282,7 @@ export default class TableInteractive extends Component {
                 style={{ ...style, overflow: "visible" /* ensure resize handle is visible */ }}
                 className={cx("TableInteractive-cellWrapper TableInteractive-headerCellData", {
                     "TableInteractive-cellWrapper--firstColumn": columnIndex === 0,
+                    "TableInteractive-cellWrapper--lastColumn": columnIndex === cols.length - 1,
                     "TableInteractive-headerCellData--sorted": isSorted,
                     "cursor-pointer": isClickable,
                     "justify-end": isRightAligned