fix(ui5-li-notification): Fix contents if description cannot wrap (#3035)

Fixes: #2920

Author: TeodorTaushanov

packages/fiori/src/themes/NotificationListItem.css

@@ -59,6 +59,7 @@
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	min-width: 0; /* fixes Chrome flex issue */
 	width: 100%;
 	padding: 0 1rem 0 0.75rem;
 	font-family: "72override", var(--sapFontFamily);

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -226,11 +226,11 @@ <h3>Events on ui5-list level</h3>
 					<span slot="footnotes">John Doe</span>
 					<span slot="footnotes">2 Days</span>
 					<span slot="footnotes">Other stuff</span>
-		
+
 					<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 					<ui5-notification-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
-	
+
 				<ui5-li-notification
 					show-close
 					show-counter
@@ -239,13 +239,13 @@ <h3>Events on ui5-list level</h3>
 				>
 					And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
 					<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
-		
+
 					<span slot="footnotes">Office Notifications</span>
 					<span slot="footnotes">3 Days</span>
-		
+
 					<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
-	
+
 			</ui5-li-notification-group>
 
 			<ui5-li-notification-group
@@ -260,23 +260,23 @@ <h3>Events on ui5-list level</h3>
 				>
 					Short description
 					<ui5-avatar initials="JS" size="XS" slot="avatar"></ui5-avatar>
-	
+
 					<span slot="footnotes">Patricia Clarck</span>
 					<span slot="footnotes">3 Days</span>
-		
+
 					<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
 					<ui5-notification-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
-	
+
 				<ui5-li-notification
 					heading="New order (#2523)"
 					priority="Low"
 				>
 					<div>. With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.</div>
-		
+
 					<span slot="footnotes">John SMith</span>
 					<span slot="footnotes">3 Days</span>
-		
+
 					<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
 			</ui5-li-notification-group>
@@ -326,7 +326,7 @@ <h3>Events on ui5-list level</h3>
 			}, 2000);
 		});
 
-		
+
 
 		shellbar.addEventListener("ui5-notificationsClick", function(event) {
 			event.preventDefault();