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;
 }

static/css/quay.css

@@ -1510,7 +1510,7 @@ p.editable:hover i {
 }
 
 .copy-box-element .copy-container {
-  border-radius: 4px !important;
+  border-radius: 4px;
   border: 1px solid #ddd;
   position: relative;
 }

static/directives/credentials-dialog.html

@@ -36,17 +36,17 @@
 
             <!-- Tab contents -->
             <cor-tab-content>
-              <h3>
+              <h3 class="dialog-title-header">
-                  Credentials for {{ credentials.title || credentials.username }}
+                  <div class="dialog-title">Credentials for {{ credentials.title || credentials.username }}</div>
                   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               </h3>
 
               <cor-tab-pane id="cred-secret">
-                <label>{{ secretTitle }}:</label>
+                <label>Username & {{ secretTitle }}:</label>
-                <div class="copy-box" value="credentials.password"></div>
+                  <div class="conjoined-box-wrapper">
-                <div class="help-text">
+                      <div class="copy-box conjoined-box-top" value="credentials.username"></div>
-                  Username is {{ credentials.username }} and password is the {{ secretTitle }}
+                      <div class="copy-box conjoined-box-bottom" value="credentials.password"></div>
-                </div>
+                  </div>
 
                 <div ng-transclude/>
               </cor-tab-pane>

static/directives/robots-manager.html

@@ -53,13 +53,13 @@
       <tr ng-repeat="robotInfo in orderedRobots.visibleEntries" bindonce>
         <td class="robot">
           <i class="fa ci-robot hidden-xs"></i>
-          <a ng-click="showRobot(robotInfo)">
+          <a class="robot-account-name" ng-click="showRobot(robotInfo)">
             <span class="prefix" bo-text="getPrefix(robotInfo.name) + '+'"></span><span bo-text="getShortenedName(robotInfo.name)"></span>
           </a>
         </td>
         <td>
           <span class="empty" bo-if="!robotInfo.description">(None)</span>
-          <span bo-if="robotInfo.description">{{ ::robotInfo.description }}</span>
+          <span class="robots-description" bo-if="robotInfo.description">{{ ::robotInfo.description }}</span>
         </td>
         <td bo-if="organization">
           <span class="empty" bo-if="robotInfo.teams.length == 0">