Merge pull request #3117 from ycao56/issues/3096

Hover to expand topology option if the list exceeds the max width

client/app/scripts/components/topology-options.js

@@ -101,6 +101,15 @@ class TopologyOptions extends React.Component {
     return (
       <div className="topology-option" key={optionId}>
         <div className="topology-option-wrapper">
+          {option.get('selectType') === 'union' &&
+            <TopologyOptionAction
+              onClick={this.handleNoneClick}
+              optionId={optionId}
+              item={noneItem}
+              topologyId={currentTopologyId}
+              activeValue={activeValue}
+            />
+          }
           {option.get('options').map(item => (
             <TopologyOptionAction
               onClick={this.handleOptionClick}
@@ -111,15 +120,6 @@ class TopologyOptions extends React.Component {
               item={item}
             />
           ))}
-          {option.get('selectType') === 'union' &&
-            <TopologyOptionAction
-              onClick={this.handleNoneClick}
-              optionId={optionId}
-              item={noneItem}
-              topologyId={currentTopologyId}
-              activeValue={activeValue}
-            />
-          }
         </div>
       </div>
     );

client/app/styles/_base.scss

@@ -1323,6 +1323,23 @@ a {
 }
 
 .topology-option {
+  &-wrapper {
+    display: inline-flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    max-height: 27px;
+    transition: max-height 0.5s 0s $base-ease;
+    &:hover {
+      height: auto;
+      max-height: calc((13px * 1.5 + 3px + 3px) * 8); // expand to display 8 rows
+      overflow: auto;
+      transition: max-height 0.5s 0s $base-ease;
+    }
+    .topology-option-action {
+      flex: 1 1 auto;
+      text-align: center;
+    }
+  }
   font-size: $font-size-small;
 
   &-action {
@@ -1390,6 +1407,7 @@ a {
   border-radius: $border-radius-soft;
   border: 1px solid transparent;
   pointer-events: none;
+  max-width: 50%;
 }
 
 .sidebar-gridmode {