Improve token description

frontend/css/style.css

@@ -92,7 +92,7 @@ a:hover, a:focus {
 
 
 .access-token-input {
 .access-token-input {
     padding: 5px 0;
     padding: 5px 0;
-    width: 450px;
+    width: 487px;
 }
 }
 
 
 .access-token-input > input, .access-token-input i {
 .access-token-input > input, .access-token-input i {

frontend/index.html

@@ -37,10 +37,12 @@
   </el-dialog>
   </el-dialog>
 
 
   <el-dialog title="Access Tokens" :visible.sync="accessTokensDialogVisible" width="30%">
   <el-dialog title="Access Tokens" :visible.sync="accessTokensDialogVisible" width="30%">
-    Tokens can be used with the surfer <a href="https://www.npmjs.com/package/cloudron-surfer" target="_blank">cli tool</a> or using the Api directly.
-    They are shared between all users.
+    Access tokens are useful to programmatically deploy assets for example within a CI/CD pipeline.
+    For this they can be used with the surfer <a href="https://www.npmjs.com/package/cloudron-surfer" target="_blank">cli tool</a> or using the Api directly.
     <br/>
     <br/>
     <br/>
     <br/>
+    <el-alert title="Tokens are shared between all users." type="warning" show-icon :closable="false"></el-alert>
+    <br/>
     <div>
     <div>
       <div v-for="accessToken in accessTokens">
       <div v-for="accessToken in accessTokens">
         <el-input suffix-icon="el-icon-copy-document" v-model="accessToken" class="access-token-input" @focus="onCopyAccessToken" size="small"></el-input>
         <el-input suffix-icon="el-icon-copy-document" v-model="accessToken" class="access-token-input" @focus="onCopyAccessToken" size="small"></el-input>