sessions list fix word wrap for vnc badge

aerokube · Aug 21, 2017 · 88b3f41 · 88b3f41
1 parent d9304f4
commit 88b3f41
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/web/src/components/Sessions/index.js b/web/src/components/Sessions/index.js
@@ -18,13 +18,13 @@ const Sessions = (props) => {
                             <span className="session-link-browser__version">{sessions[session].caps.version}</span>
                         </div>
                         {sessions[session].caps.name && (
-                            <div className="session-cap session-cap__name">
+                            <div className="session-cap session-cap__name" title={sessions[session].caps.name}>
                                 {sessions[session].caps.name}
                             </div>
                         )}
                         {sessions[session].caps.enableVNC && (
                             <div className="session-cap session-cap__with-vnc">
-                                <span title="With VNC" className="icon dripicons-device-desktop"/> <sup>VNC</sup>
+                                <span title="With VNC" className="icon dripicons-device-desktop"/>&nbsp;<sup>VNC</sup>
                             </div>
                         )}
                     </Link>

diff --git a/web/src/components/Sessions/style.scss b/web/src/components/Sessions/style.scss
@@ -54,14 +54,15 @@ $color-session-name: #555f6a;
     }
 
     .session-cap {
-      height: 25px;
-      line-height: 25px;
+      height: 30px;
+      line-height: 30px;
       box-shadow: 0 1px 6px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .12);
       margin: -3px 5px 0;
       padding: 0 5px;
 
       &__name {
-        overflow: scroll;
+        overflow-x: visible;
+        overflow-y: hidden;
         background-color: $color-session-name;
         font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
 
@@ -73,8 +74,9 @@ $color-session-name: #555f6a;
       &__with-vnc {
         background-color: $color-accent;
         padding: 0 10px;
-        line-height: 22px;
-        width: 43px;
+        line-height: 26px;
+        width: 45px;
+        text-align: center;
       }
     }
   }