From 0c9b4565f1d71ef8353d8057eba4cc2c119e505c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 13 Jan 2021 11:57:21 +0100
Subject: [PATCH] updates the css to support items with long titles

(cherry picked from commit 8e64fe54b1213bef9e3218064d4b6ba74ebe04d3)
---
 .../src/less/components/card.less             | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less
index a1a4b4bc5e..7174c0f290 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/card.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less
@@ -104,19 +104,18 @@
 	margin: 0 auto;
 	list-style: none;
     width: 100%;
-
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: flex-start;
 }
 
 .umb-card-grid li {
-
 	font-size: 12px;
 	text-align: center;
 	box-sizing: border-box;
 	position: relative;
     width: 100px;
+    margin-bottom: 5px;
 }
 
 .umb-card-grid.-six-in-row li {
@@ -142,18 +141,20 @@
 .umb-card-grid .umb-card-grid-item {
     position: relative;
 	display: block;
-	width: 100%;
-	//height: 100%;
-    padding-top: 100%;
+    width: 100%;
+    height: 100%;
+    padding: 10px 5px;
     border-radius: @baseBorderRadius * 2;
     transition: background-color 120ms;
+    font-size: 13px;
+    line-height: 1.3em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
 
     > span {
-        position: absolute;
-        top: 10px;
-        bottom: 10px;
-        left: 10px;
-        right: 10px;
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: center;