fix(ux): fixed ux issue in new cards data source list, now handles overflowing…

fix(ux): fixed ux issue in new cards data source list, now handles overflowing urls and titles, fixes #4403

public/sass/components/_cards.scss

@@ -63,14 +63,16 @@
     margin-left: 6px;
     margin-left: 6px;
     font-size: 11px;
     font-size: 11px;
     padding: 2px 6px;
     padding: 2px 6px;
-  }  
+  }
 }
 }
 
 
 .card-item-body {
 .card-item-body {
   display: flex;
   display: flex;
+  overflow: hidden;
 }
 }
 
 
 .card-item-details {
 .card-item-details {
+  overflow: hidden;
 }
 }
 
 
 .card-item-header {
 .card-item-header {
@@ -83,10 +85,16 @@
 
 
 .card-item-name {
 .card-item-name {
   color: $headings-color;
   color: $headings-color;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }
 }
 
 
 .card-item-sub-name {
 .card-item-sub-name {
   color: $text-color-weak;
   color: $text-color-weak;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
 }
 }
 
 
 .card-list-layout-grid {
 .card-list-layout-grid {