diff --git a/rhodecode/public/css/type.less b/rhodecode/public/css/type.less
--- a/rhodecode/public/css/type.less
+++ b/rhodecode/public/css/type.less
@@ -131,7 +131,7 @@ label {
 code,
 .code {
   font-size: .95em;
-  font-family: "Lucida Console", Monaco, monospace;
+  font-family: @text-code;
   color: @grey3;
 
   a {
@@ -146,7 +146,7 @@ pre {
     outline: 0;
     font-size: @basefontsize*.95;
     line-height: 1.4em;
-    font-family: "Lucida Console", Monaco, monospace;
+    font-family: @text-code;
     color: @grey3;
 }
 
diff --git a/rhodecode/public/css/variables.less b/rhodecode/public/css/variables.less
--- a/rhodecode/public/css/variables.less
+++ b/rhodecode/public/css/variables.less
@@ -58,6 +58,7 @@
 @text-bold: "proximanovabold","Proxima Nova Bold", "Proxima Nova", sans-serif;
 @text-semibold: "proximanovasemibold","Proxima Nova Semibold", "Proxima Nova", sans-serif;
 @text-bold-italic: "proximanovabolditalic","Proxima Nova Bold Italic", "Proxima Nova", sans-serif;
+@text-code: "Lucida Console", Menlo, Monaco, monospace;
 @text-light: @text-regular;
 @text-light-italic: @text-italic;
 // Used for .close buttons
diff --git a/rhodecode/templates/changeset/changeset.mako b/rhodecode/templates/changeset/changeset.mako
--- a/rhodecode/templates/changeset/changeset.mako
+++ b/rhodecode/templates/changeset/changeset.mako
@@ -32,32 +32,34 @@
   <div id="changeset_compare_view_content"  class="summary changeset">
     <div class="summary-detail">
       <div class="summary-detail-header">
-          <span class="breadcrumbs files_location">
-            <h4>${_('Commit')}
-              <code>
+          <div class="breadcrumbs files_location">
+            <h4>
+            ${_('Commit')}
+
+            <code>
                 ${h.show_id(c.commit)}
-                <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
-                % if hasattr(c.commit, 'phase'):
-                      <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
-                % endif
+            </code>
+            <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
+            % if hasattr(c.commit, 'phase'):
+                  <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
+            % endif
 
-                ## obsolete commits
-                % if hasattr(c.commit, 'obsolete'):
-                  % if c.commit.obsolete:
-                      <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
-                  % endif
-                % endif
+            ## obsolete commits
+            % if hasattr(c.commit, 'obsolete'):
+              % if c.commit.obsolete:
+                  <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
+              % endif
+            % endif
 
-                ## hidden commits
-                % if hasattr(c.commit, 'hidden'):
-                  % if c.commit.hidden:
-                      <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
-                  % endif
-                % endif
+            ## hidden commits
+            % if hasattr(c.commit, 'hidden'):
+              % if c.commit.hidden:
+                  <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
+              % endif
+            % endif
+            </h4>
 
-              </code>
-            </h4>
-          </span>
+          </div>
           <div class="pull-right">
               <span id="parent_link">
                 <a href="#parentCommit" title="${_('Parent Commit')}">${_('Parent')}</a>