SONAR-7526 better display of long tokens

2 files changed, 46 insertions, 43 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs b/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
index e82ad16c712..53c0d18271c 100644
--- a/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
+++ b/server/sonar-web/src/main/js/apps/account/templates/account-tokens.hbs
@@ -5,46 +5,46 @@
 </div>
 
 {{#notNull tokens}}
-  <div class="abs-width-400">
-    <table class="data">
-      <thead>
+  <table class="data">
+    <thead>
+    <tr>
+      <th>Name</th>
+      <th class="text-right">Created</th>
+      <th>&nbsp;</th>
+    </tr>
+    </thead>
+    <tbody>
+    {{#each tokens}}
       <tr>
-        <th>Name</th>
-        <th class="text-right">Created</th>
-        <th>&nbsp;</th>
+        <td>
+          <div title="{{name}}">
+            {{limitString name}}
+          </div>
+        </td>
+        <td class="thin nowrap text-right">
+          {{d createdAt}}
+        </td>
+        <td class="thin nowrap text-right">
+          <div class="big-spacer-left">
+            <form class="js-revoke-token-form" data-token="{{name}}">
+              {{#if deleting}}
+                <button class="button-red active input-small">Sure?</button>
+              {{else}}
+                <button class="button-red input-small">Revoke</button>
+              {{/if}}
+            </form>
+          </div>
+        </td>
       </tr>
-      </thead>
-      <tbody>
-      {{#each tokens}}
-        <tr>
-          <td>
-            {{name}}
-          </td>
-          <td class="thin nowrap text-right">
-            {{d createdAt}}
-          </td>
-          <td class="thin nowrap text-right">
-            <div class="big-spacer-left">
-              <form class="js-revoke-token-form" data-token="{{name}}">
-                {{#if deleting}}
-                  <button class="button-red active input-small">Sure?</button>
-                {{else}}
-                  <button class="button-red input-small">Revoke</button>
-                {{/if}}
-              </form>
-            </div>
-          </td>
-        </tr>
-      {{else}}
-        <tr>
-          <td colspan="3">
-            <span class="note">No tokens</span>
-          </td>
-        </tr>
-      {{/each}}
-      </tbody>
-    </table>
-  </div>
+    {{else}}
+      <tr>
+        <td colspan="3">
+          <span class="note">No tokens</span>
+        </td>
+      </tr>
+    {{/each}}
+    </tbody>
+  </table>
 {{/notNull}}
 
 <h4 class="big-spacer-top spacer-bottom">Generate Tokens</h4>
@@ -54,14 +54,15 @@
 {{/each}}
 
 <form class="js-generate-token-form">
-  <input type="text" required maxlength="30" placeholder="Enter Token Name">
+  <input type="text" required maxlength="100" placeholder="Enter Token Name">
   <button>Generate</button>
 </form>
 
 {{#if newToken}}
   <div class="panel panel-white big-spacer-top">
     <div class="alert alert-warning">
-      New token "{{newToken.name}}" has been created. Make sure you copy it now, you won’t be able to see it again!
+      New token "{{limitString newToken.name}}" has been created. Make sure you copy it now, you won’t be able to see it
+      again!
     </div>
 
     <table class="data">
diff --git a/server/sonar-web/src/main/js/apps/users/templates/users-tokens.hbs b/server/sonar-web/src/main/js/apps/users/templates/users-tokens.hbs
index c9d15489111..2e0b1ed9f35 100644
--- a/server/sonar-web/src/main/js/apps/users/templates/users-tokens.hbs
+++ b/server/sonar-web/src/main/js/apps/users/templates/users-tokens.hbs
@@ -18,7 +18,9 @@
       {{#each tokens}}
         <tr>
           <td>
-            {{name}}
+            <div title="{{name}}">
+              {{limitString name}}
+            </div>
           </td>
           <td class="thin nowrap text-right">
             {{d createdAt}}
@@ -55,14 +57,14 @@
   {{/each}}
 
   <form class="js-generate-token-form">
-    <input type="text" required maxlength="30" placeholder="Enter Token Name">
+    <input type="text" required maxlength="100" placeholder="Enter Token Name">
     <button>Generate</button>
   </form>
 
   {{#if newToken}}
     <div class="panel panel-white big-spacer-top">
       <div class="alert alert-warning">
-        New token "{{newToken.name}}" has been created. Make sure you copy it now, you won’t be able to see it again!
+        New token "{{limitString newToken.name}}" has been created. Make sure you copy it now, you won’t be able to see it again!
       </div>
 
       <table class="data">