From 15f20b445bd260d1c186593156f47905f3909b4f Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Wed, 22 Jul 2020 17:04:05 -0300
Subject: [PATCH] fix: OHIF-215 - Patient information should truncate w/
 ellipsis instead of expanding box (#1875)

---
 .../ViewportActionBar/ViewportActionBar.jsx   | 41 +++++++++++++++----
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
index 53a06a640..0020bf2dd 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
@@ -6,7 +6,7 @@ import useOnClickOutside from '../../utils/useOnClickOutside';
 
 const classes = {
   infoHeader: 'text-base text-primary-light',
-  infoText: 'text-base text-white',
+  infoText: 'text-base text-white max-w-24 truncate',
   firstRow: 'flex flex-col',
   row: 'flex flex-col ml-4',
 };
@@ -274,25 +274,39 @@ function PatientInfo({
                 <Icon name="info-link" className="w-4 text-primary-main" />
               </div>
               <div className="flex flex-col ml-2">
-                <span className="text-base font-bold text-white">
+                <span
+                  className="text-base font-bold text-white"
+                  title={patientName}
+                >
                   {patientName}
                 </span>
                 <div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
                   <div className={classnames(classes.firstRow)}>
                     <span className={classnames(classes.infoHeader)}>Sex</span>
-                    <span className={classnames(classes.infoText)}>
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={patientSex}
+                    >
                       {patientSex}
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
                     <span className={classnames(classes.infoHeader)}>Age</span>
-                    <span className={classnames(classes.infoText)}>
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={patientAge}
+                    >
                       {patientAge}
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
                     <span className={classnames(classes.infoHeader)}>MRN</span>
-                    <span className={classnames(classes.infoText)}>{MRN}</span>
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={MRN}
+                    >
+                      {MRN}
+                    </span>
                   </div>
                 </div>
                 <div className="flex">
@@ -300,15 +314,21 @@ function PatientInfo({
                     <span className={classnames(classes.infoHeader)}>
                       Thickness
                     </span>
-                    <span className={classnames(classes.infoText)}>
-                      {thickness ? thickness : 'N/A'}
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={thickness}
+                    >
+                      {thickness}
                     </span>
                   </div>
                   <div className={classnames(classes.row)}>
                     <span className={classnames(classes.infoHeader)}>
                       Spacing
                     </span>
-                    <span className={classnames(classes.infoText)}>
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={spacing}
+                    >
                       {spacing}
                     </span>
                   </div>
@@ -316,7 +336,10 @@ function PatientInfo({
                     <span className={classnames(classes.infoHeader)}>
                       Scanner
                     </span>
-                    <span className={classnames(classes.infoText)}>
+                    <span
+                      className={classnames(classes.infoText)}
+                      title={scanner}
+                    >
                       {scanner}
                     </span>
                   </div>