# HG changeset patch
# User Thomas De Schampheleire <thomas.de_schampheleire@nokia.com>
# Date 2018-05-21 14:52:36
# Node ID b4c77ea1221fcce2eb56c65088ae8c5f3c1bd7ec
# Parent  99f7ec29329389dc6f5eadd7ee836956b8423387

admin: hooks: handle overflow of long hook names

Some hook names are quite long and are visually truncated in the admin
section. Use the same principle as on the System Info: hide overflow and add
ellipsis, use a title attribute to let users discover the full name on
hover.

diff --git a/kallithea/public/less/style.less b/kallithea/public/less/style.less
--- a/kallithea/public/less/style.less
+++ b/kallithea/public/less/style.less
@@ -733,6 +733,8 @@ div.comment-prev-next-links div.next-com
       .clearfix;
       > label {
         .make-xs-column(3);
+        overflow: hidden;
+        text-overflow: ellipsis;
         input {
           width: 100%;
         }
diff --git a/kallithea/templates/admin/settings/settings_hooks.html b/kallithea/templates/admin/settings/settings_hooks.html
--- a/kallithea/templates/admin/settings/settings_hooks.html
+++ b/kallithea/templates/admin/settings/settings_hooks.html
@@ -3,7 +3,7 @@
       <h4>${_('Built-in Mercurial Hooks (Read-Only)')}</h4>
       % for hook in c.hooks:
         <% input_id = hook.ui_key.replace('.', '_') %>
-            <label class="control-label" for="${input_id}">${hook.ui_key}</label>
+            <label class="control-label" for="${input_id}" title="${hook.ui_key}">${hook.ui_key}</label>
             <div>
               ${h.text(hook.ui_key,hook.ui_value,id=input_id,size=60,readonly="readonly",class_='form-control')}
             </div>
@@ -19,7 +19,7 @@ ${h.form(url('admin_settings_hooks'), me
         %for hook in c.custom_hooks:
             <div class="form-group form-inline" id="${'id%s' % hook.ui_id }">
                 <% input_id = hook.ui_key.replace('.', '_') %>
-                    <label class="control-label" for="${input_id}">${hook.ui_key}</label>
+                    <label class="control-label" for="${input_id}" title="${hook.ui_key}">${hook.ui_key}</label>
                     <div>
                         ${h.hidden('hook_ui_key',hook.ui_key,id='hook_ui_key_'+input_id)}
                         ${h.hidden('hook_ui_value',hook.ui_value,id='hook_ui_value_'+input_id)}