Fixes #190 panel title for multiple components

Author: fernandojsg

example/index.html

@@ -22,12 +22,6 @@
         <img id="floorimg" src="assets/textures/grasslight-big.jpg">
         <img id="floorimg2" src="assets/textures/grasslight-big.jpg">
       </a-assets>
-<!--      <a-entity id="soundcube" position="0 0 -10" rotation="45 30 0"
-          sound__1="autoplay: true; src: assets/sounds/321103__nsstudios__blip1.wav;"
-          sound__2="autoplay: true; src: assets/sounds/Laser-SoundBible.com-602495617.com-602495617.ogg;"
-          geometry="primitive: box; height: 8; width: 8; depth: 8;"
-          material="color: #167341; roughness: 1.0; metalness: 0.2;">
-      </a-entity>-->
       <a-entity position="0 1 8">
         <a-entity camera look-controls wasd-controls>
           <a-entity visible="true" position="0 0 -2" geometry="primitive: ring; radiusOuter: 0.016; radiusInner: 0.01" material="color: #ff9; shader: flat; transparent: true; opacity: 0.5" scale="2 2 2" raycaster="">

src/components/attributes/Component.js

@@ -59,7 +59,7 @@ export default class Component extends React.Component {
     return (
       <Collapsible>
         <div className='collapsible-header'>
-          <span>{componentName} <span className='subcomponent'>{subComponentName}</span></span>
+          <span title={subComponentName || componentName}>{subComponentName || componentName}</span>
           <div className='dropdown menu'>
             <div className='dropdown-content'>
               <a href='#' onClick={this.deleteComponent}>Delete</a>

src/css/dark.css

@@ -322,6 +322,9 @@ div.vec3 {
 
 .collapsible-header span {
   float: left;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   text-transform: uppercase;
 }