refactor(ui): display dashboard cards in a grid (#15211)

* refactor(ui): display dashboard cards in a grid

* chore(ui): update changelog

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 ### UI Improvements
 
+1. [15211](https://github.com/influxdata/influxdb/pull/15211): Display dashboards index as a grid
 1. [15099](https://github.com/influxdata/influxdb/pull/15099): Add viewport scaling to html meta for responsive mobile scaling
 1. [15056](https://github.com/influxdata/influxdb/pull/15056): Remove rename and delete functionality from system buckets
 1. [15056](https://github.com/influxdata/influxdb/pull/15056): Prevent new buckets from being named with the reserved "\_" prefix

ui/src/dashboards/components/DashboardsCardGrid.scss

@@ -0,0 +1,39 @@
+/*
+  Dashboards Card Grid Styles
+  ------------------------------------------------------------------------------
+*/
+
+.dashboards-card-grid {
+   display: grid;
+   grid-template-columns: 1fr;
+   grid-template-rows: 150px 150px 150px;
+   grid-column-gap: $ix-marg-a;
+   grid-row-gap: $ix-marg-a;
+
+   .cf-resource-card {
+      margin-bottom: 0;
+   }
+
+   .resource-description {
+      height: 60px;
+      overflow: hidden;
+   }
+}
+
+@media screen and (min-width: $grid--breakpoint-sm) {
+  .dashboards-card-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (min-width: $grid--breakpoint-md) {
+  .dashboards-card-grid {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+@media screen and (min-width: $grid--breakpoint-lg) {
+  .dashboards-card-grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}

ui/src/dashboards/components/dashboard_index/Table.tsx

@@ -70,7 +70,10 @@ class DashboardsTable extends PureComponent<Props, State> {
             onClick={this.handleClickColumn}
           />
         </ResourceList.Header>
-        <ResourceList.Body emptyState={this.emptyState}>
+        <ResourceList.Body
+          emptyState={this.emptyState}
+          className="dashboards-card-grid"
+        >
           {!!dashboards.length && (
             <DashboardCards
               dashboards={dashboards}

ui/src/style/chronograf.scss

@@ -124,6 +124,7 @@
 @import 'src/alerting/components/SentTableField.scss';
 @import 'src/alerting/components/notifications/RuleOverlayFooter.scss';
 @import 'src/alerting/components/SearchBar.scss';
+@import 'src/dashboards/components/DashboardsCardGrid.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';