files: handle long paths in nicer UI.

rhodecode/public/css/summary.less

@@ -247,13 +247,19 b''
     display: block;
     width: 100%;
     margin: 0;
-    padding: @space 0 @padding 0;
+    padding: @space 0 10px 0;
     border-top: @border-thickness solid @border-default-color; 
 
     .stats {
         float: left;
         width: 50%;
     }
+    .stats-filename {
+        font-size: 120%;
+    }
+    .stats-first-item {
+        padding: 0px 0px 0px 3px;
+    }
 
     .buttons {
         float: right;

rhodecode/templates/files/files_source.mako

@@ -3,20 +3,24 b''
 <div id="codeblock" class="codeblock">
     <div class="codeblock-header">
       <div class="stats">
-            <span>
+            <span class="stats-filename">
                 <strong>
                     <i class="icon-file-text"></i>
                     ${c.file.unicode_path_safe}
                 </strong>
             </span>
+            <span class="item last"><i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.f_path}" title="${_('Copy the full path')}"></i></span>
+            <br/>
+
             % if c.lf_node:
             <span title="${_('This file is a pointer to large binary file')}"> | ${_('LargeFile')} ${h.format_byte_size_binary(c.lf_node.size)} </span>
             % endif
-            <span> | ${c.file.lines()[0]} ${_ungettext('line', 'lines', c.file.lines()[0])}</span>
+
+            <span class="stats-first-item">${c.file.lines()[0]} ${_ungettext('line', 'lines', c.file.lines()[0])}</span>
             <span> | ${h.format_byte_size_binary(c.file.size)}</span>
             <span> | ${c.file.mimetype} </span>
             <span> | ${h.get_lexer_for_filenode(c.file).__class__.__name__}</span>
-            <span class="item last"> | <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.f_path}" title="${_('Copy the full path')}"></i></span>
+
       </div>
       <div class="buttons">
         <a id="file_history_overview" href="#">