feat: initial quickstart tile changes

newrelic · Jan 4, 2022 · 0e717ce · 0e717ce
1 parent 9dafd4e
commit 0e717ce
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/src/components/PackTile.js b/src/components/PackTile.js
@@ -93,10 +93,10 @@ const PackTile = ({
         logoUrl={logoUrl}
         packName={title || name}
         css={css`
-          height: 200px;
+          height: 100px;
           object-fit: scale-down;
           width: ${view === VIEWS.GRID ? 100 : 25}%;
-          padding: 0 ${view === VIEWS.GRID ? 5 : 1}%;
+          padding: 5% ${view === VIEWS.GRID ? 5 : 1}%;
           margin: 0 auto 10px;
 
           .dark-mode & {
@@ -122,6 +122,7 @@ const PackTile = ({
         css={css`
           padding: 1em;
           flex: 1 1 auto;
+          min-height: 0; /* needed to stop the summary text from pushing outside the flexbox */
           ${view === VIEWS.LIST &&
           css`
             width: 100%;
@@ -140,6 +141,10 @@ const PackTile = ({
           css={css`
             font-size: 0.875rem;
             color: var(--secondary-text-color);
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
           `}
         >
           {summary || 'No summary provided'}
@@ -148,6 +153,7 @@ const PackTile = ({
       <div
         css={css`
           padding: 1em;
+          margin-top: 1rem;
           display: flex;
           justify-content: flex-end;
           ${view === VIEWS.LIST &&

diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
@@ -191,7 +191,7 @@ const QuickstartsPage = ({ data, location }) => {
       <IOBanner />
       <div
         css={css`
-          --sidebar-width: 300px;
+          --sidebar-width: 377px;
           --banner-height: 308px;
 
           display: grid;
@@ -498,9 +498,12 @@ const QuickstartsPage = ({ data, location }) => {
           <div
             css={css`
               display: grid;
-              grid-gap: 1rem;
+              grid-gap: 2rem;
               grid-template-columns: repeat(4, 1fr);
-              grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
+              grid-auto-rows: minmax(
+                var(--guide-list-row-height, 150px),
+                287px
+              );
 
               @media (max-width: 1450px) {
                 grid-template-columns: repeat(3, 1fr);