Use ellipsis on text overflow for long event messages

oVirt · Jun 14, 2022 · 0290818 · 0290818
1 parent ea9a10e
commit 0290818
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/VmDetails/cards/OverviewCard/index.js b/src/components/VmDetails/cards/OverviewCard/index.js
@@ -337,8 +337,12 @@ class OverviewCard extends React.Component {
                     { lastEvents.map(({ id, time, description, severity }) => (
                       <Tooltip key={id} content={<span>{new Date(time).toLocaleString(locale)} {description}</span>}>
                         <ListItem className={style.event}>
-                          <Label icon={<EventStatus severity={severity}/>}>{formatHowLongAgo(time)}</Label>
-                          {description}
+                          <Label icon={<EventStatus severity={severity}/>}>
+                            {formatHowLongAgo(time)}
+                          </Label>
+                          <span className={style.eventText}>
+                            {description}
+                          </span>
                         </ListItem>
                       </Tooltip>
                     ))

diff --git a/src/components/VmDetails/cards/OverviewCard/style.css b/src/components/VmDetails/cards/OverviewCard/style.css
@@ -11,17 +11,20 @@
 }
 
 .event {
+  display: flex;
+  /* event text and time label have different height */
+  align-items: center;
+}
+
+.eventText {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  display: flex;
-  align-items: center;
 }
 
 
 .event :global(.pf-c-label) {
   margin-right: 5px;
-  /* width: 100%; */
 }
 
 .operating-system-label {