Add overflow ellipsis and tooltips to output title-bar

fixes #537

- Implemented text ellipsis and tooltip to deal with title bar text overflow
- Avoids title-bar texts of adjacent output views being mixed

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>

packages/react-components/src/components/abstract-output-component.tsx

@@ -85,7 +85,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
             <button className='remove-component-button' onClick={this.closeComponent}>
                 <FontAwesomeIcon icon={faTimes} />
             </button>
-            <div className='title-bar-label'>
+            <div className='title-bar-label' title={outputName}>
                 {outputName}
             </div>
         </React.Fragment>;

packages/react-components/style/output-components-style.css

@@ -17,12 +17,14 @@
     text-align: center;
     writing-mode: vertical-rl;
     height: 100%;
-    min-height: 150px;
     transform: rotate(180deg);
     user-select: none;
     align-self: center;
     justify-self: center;
     cursor: move;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 .remove-component-button {
     background: none;