fixed metacode select lists to be flexible to metacodes

app/assets/stylesheets/application.css

@@ -1261,7 +1261,7 @@ h3.realtimeBoxTitle {
     background-position: 0 -32px;
 }
 .rc-metacode li img {
-float: left;
+    display: inline-block;
 }
 .rightclickmenu .rc-permission ul, 
 .rightclickmenu .rc-metacode ul,
@@ -1308,8 +1308,9 @@ float: left;
 }
 .rightclickmenu .rc-metacode > ul > li,
 .rightclickmenu .rc-siblings > ul > li {
-    padding: 6px 10px 6px 8px;
-    width: 100px;
+    padding: 6px 24px 6px 8px;
+    width: auto;
+    white-space: nowrap;
 }
 .rightclickmenu .rc-metacode ul ul,
 .rightclickmenu .rc-siblings ul ul {
@@ -1325,7 +1326,9 @@ float: left;
 .rightclickmenu .rc-metacode ul ul li,
 .rightclickmenu .rc-siblings ul ul li {
     padding: 4px 10px 4px 8px;
-    width: 120px;
+    width: auto;
+    white-space: nowrap;
+    height: 24px;
 }
 .rightclickmenu .expandMetacodeSet {
     position: absolute;
@@ -1338,8 +1341,10 @@ float: left;
     background-position: 0 -32px;
 }
 .rightclickmenu .rc-metacode .mSelectName {
-    padding: 6px 0 0 32px;
-    display: block;
+    padding: 0 16px 0 4px;
+    display: inline-block;
+    position: relative;
+    top: -7px;
 }
 
 .moveMenusUp .rc-metacode ul, 

app/assets/stylesheets/base.css

@@ -487,11 +487,12 @@ cursor: pointer;
 }
 .CardOnGraph .metacodeSelect {
   display:none;
-  width:200px;
+  width:auto;
   z-index: 2;
   position: absolute;
   background: #EAEAEA;
   left: 300px;
+  white-space: nowrap;
 }
 .CardOnGraph .metacodeSelect ul {
   position: relative; 
@@ -506,10 +507,10 @@ cursor: pointer;
   border: 1px solid #BDBDBD;
 }
 .CardOnGraph .metacodeSelect ul li {
-background-color: #F5F5F5;
-cursor:pointer;
-position: relative;
-padding: 9px 12px;
+    background-color: #F5F5F5;
+    cursor:pointer;
+    position: relative;
+    padding: 9px 24px 9px 12px;
 }
 .CardOnGraph .metacodeSelect ul li:hover {
 background-color: #E0E0E0;
@@ -520,15 +521,17 @@ background-color: #E0E0E0;
   left: 8px;
 }
 .CardOnGraph .metacodeSelect ul li .mSelectName {
-  padding-left: 28px;
+  margin-left: 28px;
+  margin-right: 4px;
 }
 .CardOnGraph .metacodeSelect ul ul {
   display:none;
   position: absolute;
-  left: 200px;
+  left: 100%;
   top: -1px;
   max-height: 270px;
   overflow-y: auto;
+  width: auto;
 }
 .CardOnGraph .metacodeSelect li:hover ul {
   display: block;
@@ -552,7 +555,7 @@ background-color: #E0E0E0;
 }
 .onRightEdge.metacodeSelect ul ul {
   left: auto;
-  right: 200px;
+  right: 100%;
 }
 /* too close to bottom of screen case */
 .onBottomEdge.metacodeSelect {

app/views/shared/_metacodeoptions.html.erb

@@ -13,7 +13,7 @@
     	<% set.metacodes.sort { |a, b| a.name <=> b.name }.each do |m| %>
 		  <li data-id="<%= m.id.to_s %>">
 		    <img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
-		    <span class="mSelectName"><%= m.name %></span>
+		    <div class="mSelectName"><%= m.name %></div>
 		    <div class="clearfloat"></div>
 		  </li>
 		<% end %>
@@ -27,7 +27,7 @@
   		<% Metacode.order("name").all.each do |m| %>
 		  <li data-id="<%= m.id.to_s %>">
 		    <img width="24" height="24" src="<%= m.icon %>" alt="<%= m.name %>" />
-		    <span class="mSelectName"><%= m.name %></span>
+		    <div class="mSelectName"><%= m.name %></div>
 		    <div class="clearfloat"></div>
 		  </li>
 		<% end %>