diff --git a/edit/edit.css b/edit/edit.css
index ca0cd4e3..24f25707 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -24,10 +24,6 @@ body {
   margin-top: 1rem;
   margin-left: 1.7rem;
 }
-section {
-  box-sizing: border-box;
-  width: 100%;
-}
 .aligned {
   display: table-row;
 }
@@ -459,7 +455,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 #lint td[role="severity"] {
   font-size: 0;
   width: 16px;
-  padding-right: 0.25rem;
 }
 #lint td[role="line"], #lint td[role="sep"] {
   text-align: right;
@@ -471,9 +466,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 }
 #lint td[role="message"] {
   text-align: left;
-  max-width: 140px;
   text-overflow: ellipsis;
-  white-space: pre;
   overflow: hidden;
 }
 
diff --git a/edit/lint.js b/edit/lint.js
index 262b67ca..48429672 100644
--- a/edit/lint.js
+++ b/edit/lint.js
@@ -93,23 +93,23 @@ function updateLintReport(cm, delay) {
           const pos = isActiveLine ? 'cursor' : (info.from.line + ',' + info.from.ch);
           // stylelint rule added in parentheses at the end
           const rule = linter === 'stylelint' ?
-            info.message.substring(info.message.lastIndexOf('('), info.message.length) :
+            info.message.substring(info.message.lastIndexOf('('), info.message.length).replace(/[()]/g, '') :
             / at line \d.+$/;
           // csslint
-          const message = escapeHtml(info.message.replace(rule, ''));
+          const title = escapeHtml(info.message);
+          const message = title.length > 100 ? title.substr(0, 100) + '...' : title;
           if (isActiveLine || oldMarkers[pos] === message) {
             delete oldMarkers[pos];
           }
           newMarkers[pos] = message;
           return `<tr class="${info.severity}">
-            <td role="severity" class="CodeMirror-lint-marker-${info.severity}"
-              ${linter === 'stylelint' ? 'title="Rule: ' + rule + '"' : ''}>
-              ${info.severity}
+            <td role="severity" ${linter === 'stylelint' ? 'data-rule="' + rule + '"' : ''}>
+              <div class="CodeMirror-lint-marker-${info.severity}">${info.severity}</div>
             </td>
             <td role="line">${info.from.line + 1}</td>
             <td role="sep">:</td>
             <td role="col">${info.from.ch + 1}</td>
-            <td role="message" title="${message}">${message}</td>
+            <td role="message" title="${title}">${message}</td>
           </tr>`;
         }).join('') + '</tbody>';
       scopedState.markedLast = newMarkers;
@@ -211,7 +211,7 @@ function showLintHelp() {
     header = t('issuesHelp', `<a href="${url}" target="_blank">stylelint</a>`);
     // to-do: change this to a generator
     $$('#lint td[role="severity"]').forEach(el => {
-      const rule = el.title.replace('Rule: (', '').replace(/[()]/g, '').trim();
+      const rule = el.dataset.rule;
       if (!rules.includes(rule)) {
         list += `<li><a target="_blank" href="${url}${rule}/">${rule}</a></li>`;
         rules.push(rule);