fixup: limit wifi name textlength

Opentrons · Oct 23, 2018 · a03b616 · a03b616
1 parent 988102e
commit a03b616
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/app/src/components/RobotSettings/connection.js b/app/src/components/RobotSettings/connection.js
@@ -128,7 +128,7 @@ export function NetworkDropdown (props: NetworkDropdownProps) {
       )
     )
   }
-  // custom Menu (options dropwdown) component
+  // custom Menu (options dropdown) component
   const Menu = props => {
     return (
       <components.Menu {...props}>
@@ -182,7 +182,7 @@ function NetworkOption (nw: WifiNetwork): SelectNetworkOption {
   const label = (
     <div className={styles.wifi_option}>
       {connectedIcon}
-      {value}
+      <span className={styles.wifi_name}>{value}</span>
       {signalIcon}
       {securedIcon}
     </div>

diff --git a/app/src/components/RobotSettings/styles.css b/app/src/components/RobotSettings/styles.css
@@ -60,7 +60,7 @@
 
 /* TODO(mc, 2018-10-15): switch wifi select/options to flex ASAP */
 .wifi_dropdown {
-  max-width: 75%;
+  max-width: 14rem;
 
   /* TODO(ka, 2018-10-19): This is needed to address an inaccessible positioning element from react-select */
   & > div:not(:first-child) {
@@ -76,6 +76,14 @@
   padding: 0.25rem 0.5rem;
 }
 
+.wifi_name {
+  display: inline-block;
+  width: calc(100% - 3rem);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .wifi_option_icon,
 .wifi_option_icon_right {
   display: inline-block;