Add styling for overflowing table & dropdown robot

Bound modal box by container, remove !important

The important was introduced as a fix to
https://jira.coreos.com/browse/QUAY-881
However, after removal it does not seem to be necessary (Cannot
reproduce with the !important gone).

Adds bounding for the modal boxes & title

Joins the username/password for robot in box

static/css/directives/ui/cor-tabs.css

@@ -12,7 +12,7 @@
   }
 
   .vertical .co-tab-content {
-    width: 91.66666667% !important;    
+    width: 91.66666667%;
   }
 
   .horizontal-label {
@@ -295,6 +295,8 @@
 .co-dialog .co-tab-content h3 {
   margin-top: 0px;
   margin-bottom: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .co-dialog .co-tab-content label {

static/css/directives/ui/credentials-dialog.css

@@ -29,4 +29,47 @@
 
 .credentials-dialog-element pre {
     margin-top: 20px;
-}
+}
+
+.credentials-dialog-element .dialog-title {
+    padding-right: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.credentials-dialog-element .dialog-title-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    white-space: nowrap;
+}
+
+.conjoined-box-wrapper input {
+    box-shadow: none;
+    outline: none;
+}
+
+.conjoined-box-wrapper {
+    border: 1px solid #999;
+    border-radius: 4px;
+}
+
+.conjoined-box-wrapper .conjoined-box-top .copy-container {
+    border: none;
+    margin: 5px;
+}
+
+.conjoined-box-wrapper .conjoined-box-bottom .copy-container {
+    border: none;
+    margin: 5px;
+    border-top: 1px solid #999;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+/* Ensure content is bounded unless small screen */
+@media screen and (min-width: 768px) {
+    .credentials-dialog .co-tab-content {
+        width: 62%;
+    }
+}

static/css/directives/ui/robots-manager.css

@@ -1,5 +1,19 @@
 .robots-manager-element .robot {
   white-space: nowrap;
+  max-width: 550px;
+}
+
+.robots-manager-element .robot-account-name {
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 90%;
+}
+
+.robots-manager-element .robots-description {
+  word-break: break-all;
+  max-width: 500px;
+  display: inline-block;
 }
 
 .robots-manager-element .robot a {

static/css/directives/ui/teams-manager.css

@@ -30,6 +30,12 @@
   margin-left: 10px;
 }
 
+.cor-option a {
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .teams-manager td .empty {
   color: #ccc;
 }