fix: re-introduce dashboard grid (#2997)

Author: David Kim

src/dashboards/components/DashboardsCardGrid.scss

@@ -18,6 +18,48 @@ $dashboard-grid-gap: $cf-marg-a;
 }
 
 .dashboards-card-grid {
+  padding-bottom: $cf-marg-d;
+  display: grid;
+  grid-template-columns: minmax(100%, 1fr);
+  grid-auto-rows: $cf-space-3xl + $cf-space-3xl + $cf-space-m;
+  grid-column-gap: $dashboard-grid-gap;
+  grid-row-gap: $dashboard-grid-gap;
+  height: 100%;
+  width: 100%;
+
+  .cf-resource-card {
+    display: flex;
+    margin-bottom: 0;
+  }
+
+  .cf-resource-card--contents {
+    position: relative;
+  }
+
+  .cf-resource-editable-name {
+    max-width: 80%;
+
+    .cf-resource-name--text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+  .cf-resource-editable-name__editing {
+    .cf-resource-name--text {
+      display: none !important;
+    }
+  }
+
+  .cf-resource-description,
+  .cf-resource-description--preview,
+  #text {
+    max-width: 496px;
+    flex: 1 0 30px;
+    overflow: hidden;
+  }
 }
 
 $dashboard-card-half: calc(50% - #{$dashboard-grid-gap});

src/dashboards/components/dashboard_index/DashboardCards.tsx

@@ -128,7 +128,7 @@ class DashboardCards extends PureComponent<OwnProps & StateProps> {
     const {windowSize, pages, pinnedItems} = this.state
 
     return (
-      <div style={{height: '100%', display: 'grid'}}>
+      <div style={{height: '100%'}}>
         <div className="dashboards-card-grid">
           {sortedDashboards
             .filter(d => d.status === RemoteDataState.Done)