Re-apply grid styles

Author: FelixHenninger

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,
+    }) }
   />
 }

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);
+}