fix(CatalogTile): Fix to not allow the description text to overflow t…

…he tile (patternfly#804) Description text could overflow the tile in Firefox. This is a better CSS constraint.
redallen · Oct 17, 2018 · 9bd4541 · 9bd4541
1 parent 3548f06
commit 9bd4541
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less b/packages/patternfly-3/patternfly-react-extensions/less/catalog-tile.less
@@ -63,6 +63,7 @@
   display: flex;
   flex-direction: column;
   margin-top: 15px;
+  min-height: 0;
 
   .catalog-tile-pf-title {
     font-size: (@font-size-base + 1);
@@ -75,6 +76,7 @@
   }
 
   .catalog-tile-pf-description {
+    flex: 1;
     margin-top: 15px;
     overflow-y: hidden;
   }

diff --git a/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss b/...ternfly-3/patternfly-react-extensions/sass/patternfly-react-extensions/_catalog-tile.scss
@@ -63,6 +63,7 @@
   display: flex;
   flex-direction: column;
   margin-top: 15px;
+  min-height: 0;
 
   .catalog-tile-pf-title {
     font-size: ($font-size-base + 1);
@@ -75,6 +76,7 @@
   }
 
   .catalog-tile-pf-description {
+    flex: 1;
     margin-top: 15px;
     overflow-y: hidden;
   }

diff --git a/...patternfly-react-extensions/src/components/CatalogTile/__images__/OpenShift.svg b/...patternfly-react-extensions/src/components/CatalogTile/__images__/OpenShift.svg
diff --git a/...rnfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js b/...rnfly-3/patternfly-react-extensions/src/components/CatalogTileView/__mocks__/mockItems.js
@@ -7,6 +7,7 @@ import instagram from 'patternfly/dist/img/instagram-logo.png';
 import twitter from 'patternfly/dist/img/twitter-logo.svg';
 import skype from 'patternfly/dist/img/skype-logo.svg';
 import ngnix from '../../CatalogTile/__images__/nginx.png';
+import openshift from '../../CatalogTile/__images__/OpenShift.svg';
 
 export const mockItems = [
   {
@@ -89,6 +90,19 @@ export const mockItems = [
         certified: true,
         approved: true
       },
+      {
+        title: 'JBoss BPM Suite 6.4 intelligent process server + A-MQ + MySQL (Ephemeral with https)',
+        image: openshift,
+        vendor: 'provided by Red Hat, Inc',
+        description:
+          'Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, ' +
+          'volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. ' +
+          'Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ' +
+          'ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.',
+        featured: false,
+        certified: true,
+        approved: false
+      },
       {
         title: 'GitHub Desktop',
         image: github,