From 1895ff03db9bc295f559fdca7adec5ddfea29db6 Mon Sep 17 00:00:00 2001
From: Felix Henninger <mailbox@felixhenninger.com>
Date: Tue, 11 Aug 2020 14:35:24 +0200
Subject: [PATCH] Re-apply grid styles

---
 .../components/Content/Loop/Grid/index.js     | 10 +++++++-
 .../components/Content/Loop/Grid/style.css    | 23 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css

diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
index 46c99986e..2ec1c2bcf 100644
--- a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/index.js
@@ -1,10 +1,13 @@
 import React, { Fragment } from 'react'
 
 import { FastField, useFormikContext } from 'formik'
+import classnames from 'classnames'
 
 import Header from './header'
 import { Table, DefaultRow } from '../../../../../Form/table'
 
+import './style.css'
+
 const Row = ({ index: rowIndex, name, data, arrayHelpers }) =>
   <DefaultRow
     index={ rowIndex } arrayHelpers={ arrayHelpers }
@@ -32,6 +35,11 @@ export default () => {
     columns={ columns }
     header={ Header }
     defaultItem={ Array(columns).fill('') }
-    className="border-top-0"
+    className={ classnames({
+      'table': true,
+      'grid': true,
+      'grid-slim': columns > 5,
+      'border-top-0 border-bottom': true,
+    }) }
   />
 }
diff --git a/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css
new file mode 100644
index 000000000..e8057e24a
--- /dev/null
+++ b/packages/builder/src/components/ComponentOptions/components/Content/Loop/Grid/style.css
@@ -0,0 +1,23 @@
+/* Reduce padding in a grid dropdown-toggle button */
+table.grid th .input-group button.dropdown-toggle {
+  padding: 0.5rem 0.8rem;
+}
+
+/* Reduce size of input group dropdown toggle,
+   and hide icon, if columns are very narrow. */
+table.grid.grid-slim th .input-group button.dropdown-toggle {
+  padding: 0.5rem;
+}
+
+table.grid.grid-slim th .input-group button.dropdown-toggle i {
+  display: none;
+}
+
+table.grid.grid-slim th .input-group button.dropdown-toggle::after {
+  margin-left: 0;
+}
+
+/* Highlight active dropdown item */
+.dropdown-menu .dropdown-item.dropdown-item-active {
+  background-color: var(--light);
+}