From e3737dcb27d5dba53a87e5fb147cb3ac04f64fda Mon Sep 17 00:00:00 2001
From: Yu Cao <ycao@us.ibm.com>
Date: Thu, 22 Mar 2018 12:07:38 -0400
Subject: [PATCH 1/2] Hover to expand topology option if the list exceeds the
 max width

---
 .../app/scripts/components/topology-options.js | 18 +++++++++---------
 client/app/styles/_base.scss                   | 18 ++++++++++++++++++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/client/app/scripts/components/topology-options.js b/client/app/scripts/components/topology-options.js
index 046eff2d6..3ece378d1 100644
--- a/client/app/scripts/components/topology-options.js
+++ b/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>
     );
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index c91940672..33e4658fc 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1554,6 +1554,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;
+    }
+  }
   &-action {
     &-selected {
       cursor: default;
@@ -1619,6 +1636,7 @@ a {
   border-radius: 8px;
   border: 1px solid transparent;
   pointer-events: none;
+  max-width: 50%;
 }
 
 .sidebar-gridmode {

From 550227bf9ff9f29ce10fd6b73dd679a61cef0ba0 Mon Sep 17 00:00:00 2001
From: Yu Cao <ycao@us.ibm.com>
Date: Tue, 8 Jan 2019 10:20:22 -0500
Subject: [PATCH 2/2] Update _base.scss

---
 client/app/styles/_base.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index bb6b20625..457a0fc91 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1341,6 +1341,7 @@ a {
     }
   }
   font-size: $font-size-small;
+
   &-action {
     &-selected {
       cursor: default;