From 70b8a1172f79f0fd8bb5bb8ef5a82963c6a51389 Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Mon, 16 Jul 2018 12:37:01 -0400
Subject: [PATCH] Responsive layout (#410)

---
 edit.html                           | 238 +++++++++--------
 edit/applies-to-line-widget.js      |  13 +-
 edit/edit.css                       | 286 ++++++++++++++-------
 edit/sections.js                    |  60 +++--
 global.css                          |   4 +
 install-usercss.html                |  70 ++---
 install-usercss/install-usercss.css | 158 +++++++-----
 install-usercss/install-usercss.js  |   8 +-
 manage.html                         | 384 ++++++++++++++--------------
 manage/manage.css                   | 272 ++++++++++++--------
 popup/popup.css                     |  20 +-
 11 files changed, 894 insertions(+), 619 deletions(-)

diff --git a/edit.html b/edit.html
index 1c940d97..e281fb2e 100644
--- a/edit.html
+++ b/edit.html
@@ -100,15 +100,23 @@
           </select>
           <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
         </div>
-        <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
-        <button class="remove-applies-to" i18n-text="appliesRemove"></button>
-        <button class="add-applies-to" i18n-text="appliesAdd"></button>
+        <div class="applies-value-wrapper">
+          <input name="applies-value" class="applies-value style-contributor" spellcheck="false">
+          <a class="remove-applies-to" href="#" i18n-text="appliesRemove" i18n-title="appliesRemove">
+            <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
+          </a>
+          <a class="add-applies-to" href="#" i18n-text="appliesAdd" i18n-title="appliesAdd">
+            <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+          </a>
+        </div>
       </li>
     </template>
 
     <template data-id="appliesToEverything">
       <li class="applies-to-everything" i18n-text="appliesToEverything">
-        <button class="add-applies-to" i18n-text="appliesSpecify"></button>
+        <a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" href="#">
+          <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+        </a>
       </li>
     </template>
 
@@ -124,10 +132,12 @@
           </label>
           <ul class="applies-to-list"></ul>
         </div>
-        <button class="remove-section" i18n-text="sectionRemove"></button>
-        <button class="add-section" i18n-text="sectionAdd"></button>
-        <button class="beautify-section" i18n-text="styleBeautify"></button>
-        <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
+        <div class="edit-actions">
+          <button class="remove-section" i18n-text="sectionRemove"></button>
+          <button class="add-section" i18n-text="sectionAdd"></button>
+          <button class="beautify-section" i18n-text="styleBeautify"></button>
+          <button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
+        </div>
       </div>
     </template>
 
@@ -276,109 +286,117 @@
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
-          <button id="from-mozilla" i18n-text="importLabel"></button>
-          <button id="to-mozilla" i18n-text="exportLabel"></button>
+          <div id="mozilla-format-buttons">
+            <button id="from-mozilla" i18n-text="importLabel"></button>
+            <button id="to-mozilla" i18n-text="exportLabel"></button>
+          </div>
         </div>
       </section>
       <details id="options" data-pref="editor.options.expanded">
         <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-        <div class="option">
-          <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
-            <input id="editor.lineWrapping" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label id="smartIndent-label" i18n-text="cm_smartIndent">
-            <input id="editor.smartIndent" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
-            <input id="editor.indentWithTabs" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
-            <input id="editor.autoCloseBrackets" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_autocompleteOnTyping">
-            <input id="editor.autocompleteOnTyping" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_selectByTokens"
-                 i18n-title="cm_selectByTokensTooltip">
-            <input id="editor.selectByTokens" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option">
-          <label i18n-text="cm_colorpicker">
-            <input id="editor.colorpicker" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-          <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
-            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-          </a>
-        </div>
-        <div class="option usercss-only">
-          <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
-            <input id="editor.appliesToLineWidget" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          </label>
-        </div>
-        <div class="option aligned">
-          <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
-          <input id="editor.tabSize" type="number" min="0">
-        </div>
-        <div class="option aligned">
-          <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
-          <div class="select-resizer">
-            <select id="editor.keyMap"></select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-          <a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
-            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-          </a>
-        </div>
-        <div class="option aligned">
-          <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
-          <div class="select-resizer">
-            <select id="editor.theme"></select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-        </div>
-        <div class="option aligned">
-          <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
-          <div class="select-resizer">
-            <select id="editor.matchHighlight">
-              <option i18n-text="cm_matchHighlightToken" value="token">
-              <option i18n-text="cm_matchHighlightSelection" value="selection">
-              <option i18n-text="genericDisabledLabel" value="">
-            </select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </div>
-        </div>
-        <div class="option aligned">
-          <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
-            <div class="select-resizer">
-              <select id="editor.linter">
-                <option value="csslint" selected>CSSLint</option>
-                <option value="stylelint">Stylelint</option>
-                <option value="" i18n-text="genericDisabledLabel"></option>
-              </select>
-              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        <div id="options-wrapper">
+          <div class="options-column">
+            <div class="option">
+              <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
+                <input id="editor.lineWrapping" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
             </div>
-          <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
-            <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
-          </a>
+            <div class="option">
+              <label id="smartIndent-label" i18n-text="cm_smartIndent">
+                <input id="editor.smartIndent" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label id="indentWithTabs-label" i18n-text="cm_indentWithTabs">
+                <input id="editor.indentWithTabs" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_autoCloseBrackets" i18n-title="cm_autoCloseBracketsTooltip">
+                <input id="editor.autoCloseBrackets" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_autocompleteOnTyping">
+                <input id="editor.autocompleteOnTyping" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_selectByTokens"
+                     i18n-title="cm_selectByTokensTooltip">
+                <input id="editor.selectByTokens" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+            <div class="option">
+              <label i18n-text="cm_colorpicker">
+                <input id="editor.colorpicker" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+              <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
+                <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
+              </a>
+            </div>
+            <div class="option usercss-only">
+              <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
+                <input id="editor.appliesToLineWidget" type="checkbox">
+                <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
+            </div>
+          </div>
+          <div class="options-column">
+            <div class="option aligned">
+              <label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
+              <input id="editor.tabSize" type="number" min="0">
+            </div>
+            <div class="option aligned">
+              <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
+              <div class="select-resizer">
+                <select id="editor.keyMap"></select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+              <a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
+                <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+              </a>
+            </div>
+            <div class="option aligned">
+              <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
+              <div class="select-resizer">
+                <select id="editor.theme"></select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+            </div>
+            <div class="option aligned">
+              <label id="highlight-label" for="editor.matchHighlight" i18n-text="cm_matchHighlight"></label>
+              <div class="select-resizer">
+                <select id="editor.matchHighlight">
+                  <option i18n-text="cm_matchHighlightToken" value="token">
+                  <option i18n-text="cm_matchHighlightSelection" value="selection">
+                  <option i18n-text="genericDisabledLabel" value="">
+                </select>
+                <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+              </div>
+            </div>
+            <div class="option aligned">
+              <label id="linter-label" for="editor.linter" i18n-text="cm_linter"></label>
+                <div class="select-resizer">
+                  <select id="editor.linter">
+                    <option value="csslint" selected>CSSLint</option>
+                    <option value="stylelint">Stylelint</option>
+                    <option value="" i18n-text="genericDisabledLabel"></option>
+                  </select>
+                  <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+                </div>
+              <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
+                <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
+              </a>
+            </div>
+          </div>
         </div>
       </details>
       <details id="lint" class="hidden" data-pref="editor.lint.expanded">
@@ -438,6 +456,14 @@
       <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
         <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
       </symbol>
+      
+      <symbol id="svg-icon-plus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
+      </symbol>
+      
+      <symbol id="svg-icon-minus" viewBox="0 0 8 8">
+        <path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
+      </symbol>
 
     </svg>
 
diff --git a/edit/applies-to-line-widget.js b/edit/applies-to-line-widget.js
index 4bf75d15..aad47296 100644
--- a/edit/applies-to-line-widget.js
+++ b/edit/applies-to-line-widget.js
@@ -34,13 +34,14 @@ function createAppliesToLineWidget(cm) {
         $create('li.applies-to-everything', t('appliesToEverything')),
     };
 
-    $('button', TPL.listItem).insertAdjacentElement('beforebegin',
+    $('.applies-value', TPL.listItem).insertAdjacentElement('afterend',
       $create('button.test-regexp', t('styleRegexpTestButton')));
 
     CLICK_ROUTE = {
       '.test-regexp': showRegExpTester,
 
-      '.remove-applies-to': (item, apply) => {
+      '.remove-applies-to': (item, apply, event) => {
+        event.preventDefault();
         const applies = item.closest('.applies-to').__applies;
         const i = applies.indexOf(apply);
         let repl;
@@ -72,7 +73,8 @@ function createAppliesToLineWidget(cm) {
         applies.splice(i, 1);
       },
 
-      '.add-applies-to': (item, apply) => {
+      '.add-applies-to': (item, apply, event) => {
+        event.preventDefault();
         const applies = item.closest('.applies-to').__applies;
         const i = applies.indexOf(apply);
         const pos = apply.mark.find().to;
@@ -109,12 +111,13 @@ function createAppliesToLineWidget(cm) {
           changeItem(item, apply, 'value', target.value);
         }
       },
-      onclick({target}) {
+      onclick(event) {
+        const {target} = event;
         for (const selector in CLICK_ROUTE) {
           const routed = target.closest(selector);
           if (routed) {
             const item = routed.closest('.applies-to-item');
-            CLICK_ROUTE[selector].call(routed, item, item.__apply);
+            CLICK_ROUTE[selector].call(routed, item, item.__apply, event);
             return;
           }
         }
diff --git a/edit/edit.css b/edit/edit.css
index 5afd7bd4..6500e315 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -28,17 +28,12 @@ body {
 }
 
 /************ checkbox & select************/
-#options > div[class="option"] {
+.options-column > div[class="option"] {
   margin-bottom: 4px;
 }
 
-#options > div.option:nth-last-of-type(7) {
-  margin-bottom: 12px;
-}
-
-#options > div.option:nth-last-of-type(7) + .usercss-only {
-  margin-top: -8px;
-  margin-bottom: 12px;
+.options-column > .usercss-only {
+  margin-bottom: .75rem;
 }
 
 label {
@@ -53,7 +48,7 @@ label {
   overflow: auto;
   position: fixed;
   top: 0;
-  padding: 15px;
+  padding: 1rem;
   border-right: 1px dashed #AAA;
   -webkit-box-shadow: 0 0 3rem -1.2rem black;
   box-shadow: 0 0 3rem -1.2rem black;
@@ -154,7 +149,7 @@ label {
   margin: -2px 0 0 .1rem;
 }
 .svg-inline-wrapper.applies-to-help {
-  margin: -2px 0 0 .25rem;
+  margin: 0 0 0 .25rem;
 }
 .aligned .svg-inline-wrapper {
   margin: -2px 0 0 .3rem;
@@ -191,8 +186,8 @@ input:invalid {
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
 }
 
 #header summary h2 {
@@ -210,8 +205,31 @@ input:invalid {
   margin-top: -3px;
 }
 
-#actions {
-  margin-bottom: .5rem;
+#actions > * {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+#mozilla-format-container {
+  flex-direction: column;
+}
+
+#mozilla-format-buttons {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#actions > div > a {
+  height: min-content;
+}
+
+#actions button,
+#actions > div > a {
+  margin: 0 .2rem .5rem 0;
+}
+
+#actions #cancel-button {
+  margin: 0;
 }
 
 #options:not([open]) + #lint h2 {
@@ -248,16 +266,23 @@ input:invalid {
 /************ content ***********/
 #sections > div {
   margin: 0.7rem;
-  padding: 1rem;
+  padding: 1rem 1rem .3rem;
+}
+#sections > div:first-of-type {
+  padding: 0 1rem .3rem;
 }
 #sections > div:not(:first-of-type) {
-  border-top: 2px solid black;
+  border-top: 2px solid hsl(0, 0%, 80%);
 }
 #sections > div:only-of-type .remove-section {
   display: none;
 }
-#sections > div > button:not(:first-of-type) {
-  margin-left: 0.2rem;
+.edit-actions {
+  display: flex;
+  flex-wrap: wrap;
+}
+.edit-actions button {
+  margin: 0 .2rem .5rem 0;
 }
 .dirty > label::before {
   content: "*";
@@ -294,7 +319,7 @@ input:invalid {
   margin-bottom: 7px; /* make space for resize-grip */
 }
 .resize-grip-enabled .CodeMirror-hscrollbar {
-    bottom: 7px; /* make space for resize-grip */
+  bottom: 7px; /* make space for resize-grip */
 }
 .resize-grip-enabled .CodeMirror-scrollbar-filler {
   bottom: 7px; /* make space for resize-grip */
@@ -358,45 +383,76 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 /* applies-to */
 .applies-to {
   display: flex;
+  align-items: flex-start;
+  min-height: 30px;
+  flex-wrap: wrap;
 }
 .applies-to label {
-  flex: auto;
-  margin-top: 0.2rem;
+  display: flex;
+  padding: 0;
+  height: 22px;
+  align-items: center;
+  margin: 0 .2em 0 0;
+  white-space: nowrap;
 }
 .applies-to ul {
   flex: auto;
-  flex-grow: 99;
+  flex-grow: 1;
   margin: 0;
   padding: 0;
 }
 .applies-to li {
   display: flex;
+  flex-wrap: wrap;
   list-style-type: none;
   align-items: center;
-  margin-bottom: 0.35rem;
 }
-.applies-to li > *:not(button):not(.select-resizer) {
-  flex: auto;
+.applies-to li.applies-to-everything {
+  align-items: unset;
+  line-height: 22px;
+}
+.applies-to li > input {
   min-height: 1.4rem;
-  margin-left: 0.35rem;
 }
-html:not(.usercss) .applies-to li .add-applies-to {
-  visibility: hidden;
-  text-align: left;
-}
-html:not(.usercss) .applies-to li:last-child .add-applies-to {
-  visibility: visible
+.applies-to li:not(.applies-to-everything) > * {
+  margin: 0 .2rem .5rem 0;
 }
 .applies-to li .add-applies-to:first-child {
   margin-left: 1rem;
 }
+.applies-to li .applies-value-wrapper {
+  flex-grow: 1;
+  display: flex;
+}
 .applies-to li .applies-value {
-  flex-grow: 99;
+  flex-grow: 1;
   padding-left: 0.2rem;
 }
 .applies-to img {
   vertical-align: bottom;
 }
+.add-applies-to,
+.remove-applies-to {
+  font-size: 0;
+  height: 22px;
+  width: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.add-applies-to .svg-icon,
+.remove-applies-to .svg-icon {
+  pointer-events: none;
+  fill: hsl(0, 0%, 60%);
+  height: 12px;
+  width: 12px;
+}
+.add-applies-to:hover .svg-icon,
+.remove-applies-to:hover .svg-icon {
+  pointer-events: none;
+  fill: hsl(0, 0%, 0%);
+}
 .test-regexp {
   display: none;
 }
@@ -563,7 +619,7 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   position: absolute;
 }
 #lint > div {
-  margin-top: 4em;
+  margin-top: 2.75rem;
 }
 #lint table {
   font-size: 100%;
@@ -657,12 +713,26 @@ html:not(.usercss) .usercss-only,
   display: none !important; /* hide during page init */
 }
 
+#lint {
+  padding: 1rem 0 0;
+  box-sizing: border-box;
+}
+
+#options:not([open]) + #lint {
+  padding-top: 0;
+}
+
+#options-wrapper .options-column:nth-child(2) {
+  margin-top: .75rem;
+}
+
 .usercss #name {
   background-color: #eee;
   color: #888;
 }
 
-#sections .single-editor {
+#sections .single-editor,
+#sections > div.single-editor:first-of-type {
   margin: 0;
   padding: 0;
   display: flex;
@@ -695,7 +765,7 @@ html:not(.usercss) .usercss-only,
 /************ line widget *************/
 .CodeMirror-linewidget .applies-to {
   margin: 1em 0;
-  padding: 1em;
+  padding: .75rem .75rem .25rem;
   padding-right: calc(1em + 20px);
 }
 
@@ -717,19 +787,26 @@ html:not(.usercss) .usercss-only,
 
 /************ reponsive layouts ************/
 @media(max-width: 850px) {
+  body {
+    display: flex;
+    flex-direction: column;
+  }
   #header {
-    width: auto;
-    height: auto;
+    flex: 0 1 auto;
+    height: unset;
+    width: unset;
     position: inherit;
     border-right: none;
     border-bottom: 1px dashed #AAA;
-    min-height: var(--header-narrow-min-height);
-    max-height: 50vh;
-    flex-wrap: wrap;
-    flex-direction: row;
+    padding: 0;
   }
-  #header section:not(:last-child) {
-    margin-bottom: .5rem;
+  #actions {
+    display: flex;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    padding: 0 1rem;
+    margin: 0;
+    box-sizing: border-box;
   }
   #header input[type="checkbox"] {
     vertical-align: middle;
@@ -739,45 +816,41 @@ html:not(.usercss) .usercss-only,
     display: none;
   }
   #basic-info {
+    padding: .5rem 1rem;
+    margin: 0;
+    box-sizing: border-box;
     display: flex;
-    align-items: baseline;
-    flex: 1;
-    margin-right: 2em;
-  }
-  #basic-info > * {
-    flex: auto;
+    flex-wrap: wrap;
   }
   #basic-info > *:first-child {
-    flex-grow: 99;
-    display: flex;
+    flex-grow: 1;
   }
   #basic-info > *:not(:last-child) {
     margin-right: 0.8rem;
   }
   #basic-info #name {
-    width: auto;
-    flex-grow: 99;
+    flex-grow: 1;
   }
-  #actions {
+  #options-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 1rem  .5rem;
+    box-sizing: border-box;
+  }
+  .options-column {
+    flex-grow: 1;
+    padding-right: .5rem;
+    box-sizing: border-box;
+  }
+  #options-wrapper .options-column:nth-child(2) {
     margin-top: 0;
-    white-space: nowrap;
-  }
-  #actions > * {
-    display: inline-block;
-  }
-  #options {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
-    width: 100%;
   }
   #options:not([open]),
   #lint:not([open]) {
-    column-count: 1;
     overflow: initial;
   }
   #options:not([open]) + #lint:not([open]) {
-    margin-top: -1em;
+    margin-top: 0;
   }
   #lint {
     overflow: initial;
@@ -786,14 +859,18 @@ html:not(.usercss) .usercss-only,
     position: static;
     margin-bottom:  0;
   }
+  #lint tbody {
+    display: flex;
+    flex-direction: column;
+  }
   #options summary {
-    margin-top: -.25em;
+    margin-left: 0;
+    padding-left: 4px;
   }
   #options h2 {
     margin: 0 0 .5em;
   }
   .option label {
-    line-height: 1.25rem;
     margin: 0;
   }
   #options [type="number"] {
@@ -804,11 +881,18 @@ html:not(.usercss) .usercss-only,
     position: relative;
     top: 0.2rem;
   }
-  #options:not([open]) ~ #lint {
-    margin-top: -1em;
-  }
   #lint > div {
     margin-top: 0;
+    overflow: hidden;
+  }
+  #lint {
+    padding: 0 1rem .5rem;
+  }
+  #lint > summary {
+    margin-top: 0;
+  }
+  #lint caption {
+    text-indent: 4px;
   }
   #lint table {
     width: 100%;
@@ -820,13 +904,20 @@ html:not(.usercss) .usercss-only,
     margin: .25em 0 -1em .25em;
   }
   #sections {
+    height: unset !important;
+    min-height: 0;
     padding-left: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
   #sections > div {
-    padding: 0;
+    margin: 0 .5rem .5rem;
+    padding: .5rem 0 0;
   }
-  #sections > *:not(h2) {
-    padding-left: 0.4rem;
+  #sections > div:first-of-type {
+    margin: .5rem;
+    padding: 0;
   }
   .usercss .CodeMirror-scroll {
     max-height: calc(100vh - var(--header-narrow-min-height));
@@ -835,27 +926,28 @@ html:not(.usercss) .usercss-only,
   .usercss #lint:not([open]) + #footer {
     margin-top: -.25em;
   }
-  #help-popup.big {
-    left: 3rem;
-  }
-}
-
-@media (max-width: 720px) {
-  #options {
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    column-count: 2;
-  }
-}
-
-@media (max-width: 450px) {
-  #options {
-    -webkit-column-count: 1;
-    -moz-column-count: 1;
-    column-count: 1;
-  }
-  #actions {
-    flex-wrap: wrap;
-    white-space: normal;
+  #help-popup.big[style="display: block;"],
+  #help-popup[style="display: block;"] {
+    width: max-content;
+    height: min-content;
+    max-width: 90%;
+    max-height: 90vh;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+  #help-popup[style*="left:"] {
+    left: 1rem !important;
+    margin-top: -2.35rem;
+  }
+  #help-popup:not([style*="display: block;"]),
+  #help-popup .CodeMirror-lint-markers,
+  #help-popup .CodeMirror-guttermarker-subtle {
+    display: none !important;
+  }
+  #help-popup .CodeMirror-linenumber {
+   padding: 0;
   }
 }
diff --git a/edit/sections.js b/edit/sections.js
index 5fc27d80..99b6f198 100644
--- a/edit/sections.js
+++ b/edit/sections.js
@@ -125,7 +125,7 @@ function addSection(event, section) {
     div.classList.toggle('has-regexp', show);
     appliesTo.oninput = appliesTo.oninput || show && (event => {
       if (event.target.matches('.applies-value') &&
-          $('.applies-type', event.target.parentElement).value === 'regexp') {
+          $('.applies-type', event.target.closest('.applies-to-item')).value === 'regexp') {
         regExpTester.update(getRegExps());
       }
     });
@@ -150,31 +150,46 @@ function addSection(event, section) {
   return div;
 }
 
-function addAppliesTo(list, name, value) {
-  const showingEverything = $('.applies-to-everything', list) !== null;
+// may be invoked as a DOM listener
+function addAppliesTo(list, type, value) {
+  let clickedItem;
+  if (this instanceof Node) {
+    clickedItem = this.closest('.applies-to-item');
+    list = this.closest('.applies-to-list');
+    // dummy <a> wrapper was clicked
+    if (arguments[0] instanceof Event) arguments[0].preventDefault();
+  }
+  const showingEverything = $('.applies-to-everything', list);
   // blow away 'Everything' if it's there
   if (showingEverything) {
     list.removeChild(list.firstChild);
   }
-  let e;
-  if (name) {
-    e = template.appliesTo.cloneNode(true);
-    $('[name=applies-type]', e).value = name;
-    $('[name=applies-value]', e).value = value;
-    $('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
-  } else if (showingEverything || list.hasChildNodes()) {
-    e = template.appliesTo.cloneNode(true);
-    if (list.hasChildNodes()) {
-      $('[name=applies-type]', e).value = $('li:last-child [name="applies-type"]', list).value;
+  let item, toFocus;
+
+  // a section is added with known applies-to
+  if (type) {
+    item = template.appliesTo.cloneNode(true);
+    $('[name=applies-type]', item).value = type;
+    $('[name=applies-value]', item).value = value;
+    $('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
+
+  // a "+" button was clicked
+  } else if (showingEverything || clickedItem) {
+    item = template.appliesTo.cloneNode(true);
+    toFocus = $('[name=applies-type]', item);
+    if (clickedItem) {
+      $('[name=applies-type]', item).value = $('[name="applies-type"]', clickedItem).value;
     }
-    $('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
+    $('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
+
+  // a global section is added
   } else {
-    e = template.appliesToEverything.cloneNode(true);
+    item = template.appliesToEverything.cloneNode(true);
   }
-  $('.add-applies-to', e).addEventListener('click', function () {
-    addAppliesTo(this.parentNode.parentNode);
-  }, false);
-  list.appendChild(e);
+
+  $('.add-applies-to', item).addEventListener('click', addAppliesTo);
+  list.insertBefore(item, clickedItem && clickedItem.nextElementSibling);
+  if (toFocus) toFocus.focus();
 }
 
 function setupCodeMirror(sectionDiv, code, index) {
@@ -403,8 +418,9 @@ function getSectionsHashes() {
 }
 
 function removeAppliesTo(event) {
-  const appliesTo = event.target.parentNode;
-  const appliesToList = appliesTo.parentNode;
+  event.preventDefault();
+  const appliesTo = event.target.closest('.applies-to-item');
+  const appliesToList = appliesTo.closest('.applies-to-list');
   removeAreaAndSetDirty(appliesTo);
   if (!appliesToList.hasChildNodes()) {
     addAppliesTo(appliesToList);
@@ -437,7 +453,7 @@ function removeAreaAndSetDirty(area) {
     }
   });
   updateTitle();
-  area.parentNode.removeChild(area);
+  area.remove();
 }
 
 function makeSectionVisible(cm) {
diff --git a/global.css b/global.css
index 76e689c5..4ff4da33 100644
--- a/global.css
+++ b/global.css
@@ -2,6 +2,10 @@ button {
   -webkit-appearance: none;
   -moz-appearance: none;
   user-select: none;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   padding: 2px 7px;
   border: 1px solid hsl(0, 0%, 62%);
   font: 400 13.3333px Arial;
diff --git a/install-usercss.html b/install-usercss.html
index 759c6231..0858ee02 100644
--- a/install-usercss.html
+++ b/install-usercss.html
@@ -45,40 +45,44 @@
 </head>
 <body id="stylus-install-usercss">
   <div class="container">
-    <div class="header">
-      <h1>
-        <span class="meta-name"></span>
-        <small class="meta-version"></small>
-      </h1>
-      <div class="actions">
-        <h2 class="installed" i18n-text="installButtonInstalled"></h2>
-        <button class="install" i18n-text="installButton"></button>
-        <p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
-        <label class="set-update-url">
-          <input type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span></span>
-          <p></p>
-        </label>
-        <label class="live-reload">
-          <input type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <span i18n-text="liveReloadLabel"></span>
-        </label>
+    <div id="header">
+      <div id="header-content-wrapper">
+        <h1>
+          <span class="meta-name"></span>
+          <small class="meta-version"></small>
+        </h1>
+        <div class="actions">
+          <h2 class="installed" i18n-text="installButtonInstalled"></h2>
+          <button class="install" i18n-text="installButton"></button>
+          <p id="live-reload-install-hint" i18n-text="liveReloadInstallHint" class="hidden"></p>
+          <label class="set-update-url">
+            <input type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span></span>
+            <p></p>
+          </label>
+          <label class="live-reload">
+            <input type="checkbox">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span i18n-text="liveReloadLabel"></span>
+          </label>
+        </div>
+        <p class="meta-description"></p>
+        <div>
+          <h3 i18n-text="author"></h3>
+          <span class="meta-author"></span>
+        </div>
+        <div>
+          <h3 i18n-text="license"></h3>
+          <span class="meta-license"></span>
+        </div>
+        <div class="external-link"></div>
+        <div id="applies-to-wrapper">
+          <h3 i18n-text="appliesLabel"></h3>
+          <ul class="applies-to">
+          </ul>
+        </div>
       </div>
-      <p class="meta-description"></p>
-      <div>
-        <h3 i18n-text="author"></h3>
-        <span class="meta-author"></span>
-      </div>
-      <div>
-        <h3 i18n-text="license"></h3>
-        <span class="meta-license"></span>
-      </div>
-      <h3 i18n-text="appliesLabel"></h3>
-      <ul class="applies-to">
-      </ul>
-      <div class="external-link"></div>
     </div>
     <div class="main">
       <div class="warnings"></div>
diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index 0f1e2970..cdec1162 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -1,4 +1,5 @@
 body {
+  overflow: hidden;
   margin: 0;
   font: 12px arial, sans-serif;
   background: white;
@@ -37,20 +38,13 @@ input:disabled + span {
 .container {
   display: flex;
   height: 100vh;
-  align-items: stretch;
 }
 
-.main {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.header,
+#header,
 .warnings {
   flex: 0 0 280px;
   box-sizing: border-box;
-  padding: 15px;
+  padding: 1rem;
   border-right: 1px dashed #aaa;
   box-shadow: 0 0 50px -18px black;
   overflow-wrap: break-word;
@@ -58,7 +52,7 @@ input:disabled + span {
   z-index: 100;
 }
 
-.header.meta-init-error {
+#header.meta-init-error {
   display: none;
 }
 
@@ -72,7 +66,7 @@ input:disabled + span {
 }
 
 .has-warnings .warnings {
-  display: initial;
+  display: flex;
 }
 
 .warning {
@@ -280,19 +274,21 @@ li {
   overflow: hidden;
 }
 
+.main,
 .main .CodeMirror {
-  height: auto;
+  height: 100% !important;
+  width: 100% !important;
   border: none;
 }
 
 /* spinner-related */
 
-.header {
+#header {
   position: relative;
 }
 
-.header:not(.meta-init) > *:not(.lds-spinner),
-.header.meta-init > .lds-spinner {
+#header:not(.meta-init) > *:not(.lds-spinner),
+#header.meta-init > .lds-spinner {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -301,7 +297,7 @@ li {
   opacity: 0;
 }
 
-.header.meta-init > * {
+#header.meta-init > * {
   opacity: 1;
   transition: opacity .5s;
   -webkit-user-select: auto;
@@ -451,19 +447,82 @@ label {
 
 /************ reponsive layouts ************/
 
-@media (max-width:10in) {
+@media (max-width: 850px) {
+  body {
+    overflow: hidden;
+  }
   .container {
     flex-direction: column;
   }
-  .header {
-    flex-basis: auto;
+  #header {
+    flex: 0 1 auto;
     border-right: none;
     border-bottom: 1px dashed #AAA;
-    max-height: 50%;
     overflow-x: auto;
     overflow-y: hidden;
+    padding: 0;
   }
-  .has-warnings .header {
+  #header:not(.meta-init) {
+    min-height: 300px;
+  }
+  .main {
+    flex: 1;
+  }
+  #header-content-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding: .5rem 0 0 1rem;
+    box-sizing: border-box;
+    height: min-content;
+  }
+  #header-content-wrapper > * {
+    flex-grow: 1;
+    margin: 0;
+    padding: 0 1rem .5rem 0;
+    min-width: 0;
+  }
+  #header-content-wrapper > .meta-description + .flex-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0;
+  }
+  #header-content-wrapper > .meta-description + .flex-wrapper > * {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    padding: 0 1rem .5rem 0;
+    box-sizing: border-box;
+  }
+  .flex-wrapper ul {
+    margin: 0;
+  }
+  #header-content-wrapper > .meta-description {
+    flex-basis: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+  .set-update-url p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .actions label {
+    min-width: 100px;
+    flex: 1;
+  }
+  .actions label span {
+    white-space: nowrap;
+  }
+  .has-warnings #header {
     min-height: 4em;
     max-height: 20%;
   }
@@ -474,53 +533,32 @@ label {
     border-bottom: 1px dashed #b57c7c;
     padding-bottom: 1em;
   }
-  .header,
-  .warning {
-    -webkit-column-count: 3;
-    -moz-column-count: 3;
-    column-count: 3;
+  ul.applies-to,
+  .actions label {
+    margin: 0;
   }
-  h1 {
-    -webkit-column-span: all;
-    column-span: all;
-    margin-bottom: .5em;
-  }
-  .actions {
+  #header-content-wrapper > h1 {
+    font-size: 1.75em;
     display: flex;
-    align-items: flex-start;
+    align-items: baseline;
+  }
+  #header-content-wrapper > h1 > .meta-version {
+    padding-left: 3px;
+  }
+  #header-content-wrapper > h1 > .meta-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #header-content-wrapper > * h3 {
+    margin: 0 0 .5rem;
   }
   .install {
+    flex-shrink: 0;
     margin-right: 1em;
   }
 }
 
-@media (max-width:7in) {
-  .header,
-  .warning {
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    column-count: 2;
-  }
-}
-
-@media (max-width:4in) {
-  .header {
-    overflow-x: hidden;
-    overflow-y: auto;
-    max-height: 100%;
-  }
-  .header,
-  .warning {
-    -webkit-column-count: 1;
-    -moz-column-count: 1;
-    column-count: 1;
-  }
-  .warning {
-    border: none;
-    padding-bottom: unset;
-  }
-}
-
 /* Retina-specific stuff here */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .install:after {
diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index 97ecbed6..27f233ef 100644
--- a/install-usercss/install-usercss.js
+++ b/install-usercss/install-usercss.js
@@ -49,7 +49,7 @@
 
   setTimeout(() => {
     if (!installed) {
-      $('.header').appendChild($create('.lds-spinner',
+      $('#header').appendChild($create('.lds-spinner',
         new Array(12).fill($create('div')).map(e => e.cloneNode())));
     }
   }, 200);
@@ -133,8 +133,8 @@
       $('.external-link').appendChild(externalLink);
     }
 
-    $('.header').classList.add('meta-init');
-    $('.header').classList.remove('meta-init-error');
+    $('#header').classList.add('meta-init');
+    $('#header').classList.remove('meta-init-error');
     setTimeout(() => $.remove('.lds-spinner'), 1000);
 
     showError('');
@@ -222,7 +222,7 @@
     API.buildUsercss({sourceCode, checkDup: true})
       .then(init)
       .catch(err => {
-        $('.header').classList.add('meta-init-error');
+        $('#header').classList.add('meta-init-error');
         showError(err);
       });
   }
diff --git a/manage.html b/manage.html
index 985a3efa..61844329 100644
--- a/manage.html
+++ b/manage.html
@@ -171,197 +171,209 @@
 
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
-
-  <details id="filters" data-pref="manage.filters.expanded">
-    <summary>
-      <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
-      <a id="reset-filters" href="#" tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20">
-          <title i18n-text="genericResetLabel"></title>
-          <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
-                           5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
-        </svg>
-      </a>
-    </summary>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyEnabled" type="checkbox"
-                 data-filter=".enabled"
-                 data-filter-hide=".disabled">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyEnabled.invert">
-          <option i18n-text="manageOnlyEnabled" value="false"></option>
-          <option i18n-text="manageOnlyDisabled" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyLocal" type="checkbox"
-                 data-filter=":not(.updatable):not(.update-done)"
-                 data-filter-hide=".updatable, .update-done">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
-          <option i18n-text="manageOnlyLocal" value="false"></option>
-          <option i18n-text="manageOnlyExternal" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <div class="filter-selection">
-      <label>
-        <div class="checkmate">
-          <input id="manage.onlyUsercss" type="checkbox"
-                 data-filter=".usercss"
-                 data-filter-hide=":not(.usercss)">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-        </div>
-      </label>
-      <div class="select-resizer">
-        <select id="manage.onlyUsercss.invert">
-          <option i18n-text="manageOnlyUsercss" value="false"></option>
-          <option i18n-text="manageOnlyNonUsercss" value="true"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </div>
-    </div>
-
-    <label id="only-updates" class="hidden">
-      <input type="checkbox"
-             data-filter=".can-update, .update-problem, .update-done"
-             data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <span i18n-text="manageOnlyUpdates"></span>
-    </label>
-
-    <div id="search-wrapper">
-      <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
-             data-filter=":not(.not-matching)"
-             data-filter-hide=".not-matching">
-      <a href="#" id="search-help" tabindex="0">
-        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-      </a>
-    </div>
-
-  </details>
-
-  <div id="sort-wrapper">
-    <div class="sorter-selection" i18n-title="sortLabel">
-      <select id="manage.newUI.sort"></select>
-      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-    </div>
-    <a href="#" id="sorter-help" tabindex="0">
-      <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-    </a>
-  </div>
-
-  <p class="nowrap">
-    <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
-    <a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
-      <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
-        <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
-      </svg>
-    </a>
-  </p>
-
-  <p>
-    <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
-    <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
-    <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
-  </p>
-
-  <div id="add-style-wrapper">
-    <a href="edit.html">
-      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
-    </a>
-    <label id="add-style-as-usercss-wrapper">
-      <input type="checkbox" id="newStyleAsUsercss">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
-      <a id="usercss-wiki"
-         href="https://github.com/openstyles/stylus/wiki/Usercss"
-         i18n-title="externalUsercssDocument"
-         tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20">
-          <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
-        </svg>
-      </a>
-    </label>
-  </div>
-
-  <details id="options" data-pref="manage.options.expanded">
-
-    <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-
-    <label>
-      <input id="manage.newUI" type="checkbox">
-      <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-      <span i18n-text="manageNewUI"></span>
-    </label>
-
-    <div id="newUIoptions">
-      <div>
-        <label for="manage.newUI.favicons" i18n-text="manageFavicons">
-          <input id="manage.newUI.favicons" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-          <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
-            <svg class="svg-icon select-arrow">
-              <title i18n-text="optionsSubheading"></title>
-              <use xlink:href="#svg-icon-select-arrow"/>
-            </svg>
-          </a>
-        </label>
-        <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
-          <div>
-            <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
-              <input id="manage.newUI.faviconsGray" type="checkbox">
+  
+  <div id="manage-settings">
+    <div class="settings-column">
+      <details id="filters" data-pref="manage.filters.expanded">
+        <summary>
+          <h2 i18n-text="manageFilters">: 
+            <div class="filter-stats-wrapper">
+              <span id="filters-stats"></span>
+              <a id="reset-filters" href="#" tabindex="0">
+                <svg class="svg-icon" viewBox="0 0 20 20">
+                  <title i18n-text="genericResetLabel"></title>
+                  <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
+                                   5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+                </svg>
+              </a>
+            </div>
+          </h2>
+        </summary>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyEnabled" type="checkbox"
+                     data-filter=".enabled"
+                     data-filter-hide=".disabled">
               <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            </label>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyEnabled.invert">
+              <option i18n-text="manageOnlyEnabled" value="false"></option>
+              <option i18n-text="manageOnlyDisabled" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
         </div>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyLocal" type="checkbox"
+                     data-filter=":not(.updatable):not(.update-done)"
+                     data-filter-hide=".updatable, .update-done">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyLocal.invert" i18n-title="manageOnlyLocalTooltip">
+              <option i18n-text="manageOnlyLocal" value="false"></option>
+              <option i18n-text="manageOnlyExternal" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
+        </div>
+      
+        <div class="filter-selection">
+          <label>
+            <div class="checkmate">
+              <input id="manage.onlyUsercss" type="checkbox"
+                     data-filter=".usercss"
+                     data-filter-hide=":not(.usercss)">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            </div>
+          </label>
+          <div class="select-resizer">
+            <select id="manage.onlyUsercss.invert">
+              <option i18n-text="manageOnlyUsercss" value="false"></option>
+              <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
+        </div>
+      
+        <label id="only-updates" class="hidden">
+          <input type="checkbox"
+                 data-filter=".can-update, .update-problem, .update-done"
+                 data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <span i18n-text="manageOnlyUpdates"></span>
+        </label>
+      
+        <div id="search-wrapper">
+          <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
+                 data-filter=":not(.not-matching)"
+                 data-filter-hide=".not-matching">
+          <a href="#" id="search-help" tabindex="0">
+            <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </a>
+        </div>
+
+      </details>
+
+      <div id="sort-wrapper">
+        <div class="sorter-selection" i18n-title="sortLabel">
+          <select id="manage.newUI.sort"></select>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </div>
+        <a href="#" id="sorter-help" tabindex="0">
+          <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+        </a>
+      </div>
+      
+      <div id="style-actions">
+        <div id="update-check">
+          <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
+          <a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
+            <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
+              <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
+            </svg>
+          </a>
+        </div>
+        
+        <div id="update-all">
+          <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
+          <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
+          <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
+        </div>
+        
+        <div id="add-style-wrapper">
+          <a href="edit.html">
+            <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
+          </a>
+          <label id="add-style-as-usercss-wrapper">
+            <input type="checkbox" id="newStyleAsUsercss">
+            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+            <span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
+            <a id="usercss-wiki"
+               href="https://github.com/openstyles/stylus/wiki/Usercss"
+               i18n-title="externalUsercssDocument"
+               tabindex="0">
+              <svg class="svg-icon" viewBox="0 0 20 20">
+                <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+              </svg>
+            </a>
+          </label>
+        </div>
       </div>
-     <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
     </div>
-
-    <p>
-      <button id="manage-options-button" i18n-text="openOptionsManage"></button>
-      <button id="manage-shortcuts-button" class="chromium-only"
-              i18n-text="shortcuts"
-              i18n-title="shortcutsNote"></button>
-      <a id="find-editor-styles"
-         href="https://userstyles.org/styles/browse/chrome-extension"
-         i18n-title="editorStylesButton"
-         target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
-    </p>
-
-  </details>
-
-  <details id="backup" data-pref="manage.backup.expanded">
-    <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
-    <span id="backup-message" i18n-text="backupMessage"></span>
-    <p>
-      <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
-      <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
-    </p>
-  </details>
-
-  <p id="manage-text">
-    <span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
-    <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
-    <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
-  </p>
+    
+    <div class="settings-column">
+      <details id="options" data-pref="manage.options.expanded">
+      
+        <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
+      
+        <label>
+          <input id="manage.newUI" type="checkbox">
+          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <span i18n-text="manageNewUI"></span>
+        </label>
+      
+        <div id="newUIoptions">
+          <div>
+            <label for="manage.newUI.favicons" i18n-text="manageFavicons">
+              <input id="manage.newUI.favicons" type="checkbox">
+              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
+                <svg class="svg-icon select-arrow">
+                  <title i18n-text="optionsSubheading"></title>
+                  <use xlink:href="#svg-icon-select-arrow"/>
+                </svg>
+              </a>
+            </label>
+            <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
+              <div>
+                <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
+                  <input id="manage.newUI.faviconsGray" type="checkbox">
+                  <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+                </label>
+              </div>
+            </div>
+          </div>
+         <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
+        </div>
+      
+        <div id="options-buttons">
+          <button id="manage-options-button" i18n-text="openOptionsManage"></button>
+          <button id="manage-shortcuts-button" class="chromium-only"
+                  i18n-text="shortcuts"
+                  i18n-title="shortcutsNote"></button>
+          <a id="find-editor-styles"
+             href="https://userstyles.org/styles/browse/chrome-extension"
+             i18n-title="editorStylesButton"
+             target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
+        </div>
+      
+      </details>
+      
+      <details id="backup" data-pref="manage.backup.expanded">
+        <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
+        <span id="backup-message" i18n-text="backupMessage"></span>
+        <div id="backup-buttons">
+          <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
+          <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
+        </div>
+      </details>
+      
+      <div id="manage-text">
+        <span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
+        <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
+        <span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
+      </div>
+    </div>
+  </div>
 
 </div>
 
diff --git a/manage/manage.css b/manage/manage.css
index 305aac8d..7366c1e9 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -49,22 +49,12 @@ select {
   font-size: 12px;
 }
 
-.nowrap {
-  white-space: nowrap;
-}
-
-.nowrap > * {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
 #header {
   width: var(--header-width);
   height: 100vh;
   position: fixed;
   top: 0;
-  padding: 15px;
+  padding: 1rem;
   border-right: 1px dashed #AAA;
   -webkit-box-shadow: 0 0 50px -18px black;
   box-shadow: 0 0 50px -18px black;
@@ -73,8 +63,13 @@ select {
   z-index: 9;
 }
 
+#update-check,
+#update-all {
+  margin-bottom: .5rem;
+}
+
 #check-all-updates {
-  max-width: 220px;
+  max-width: calc(100% - 30px);
 }
 
 #header h1 {
@@ -90,14 +85,12 @@ select {
 #add-style-wrapper {
   display: flex;
   align-items: center;
-  padding-bottom: 1.25em;
-  white-space: nowrap;
   flex-wrap: wrap;
 }
 
 #add-style-wrapper > * {
   /* in case the children are wrapped */
-  margin-bottom: .25em;
+  margin-bottom: .5rem;
 }
 
 #add-style-as-usercss-wrapper {
@@ -233,6 +226,11 @@ select {
   display: none;
 }
 
+.newUI .style-name::after,
+.newUI .style-name-link::after {
+  vertical-align: text-top;
+}
+
 .disabled h2::after, .entry.usercss .style-name-link::after {
   font-weight: normal;
   font-size: 11px;
@@ -272,17 +270,25 @@ select {
 }
 
 /* collapsibles */
-#header details:not(#filters) {
-  padding-bottom: .7em;
-}
-
-#add-style-wrapper,
-#backup :last-child {
+#add-style-wrapper {
   margin-bottom: 0;
 }
 
-#options p:last-of-type {
-  margin-top: 0;
+#backup-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: .5rem;
+}
+
+#options-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: .1rem;
+}
+
+#options-buttons button,
+#backup-buttons button {
+  margin: 0 .2rem .5rem 0;
 }
 
 #header details:not([open]),
@@ -291,17 +297,27 @@ select {
 }
 
 #header details[open] summary {
-  padding-bottom: .5em;
+  padding-bottom: .5rem;
 }
 
 #header summary {
+  margin-top: .25rem;
   align-items: center;
   margin-left: -13px;
   cursor: pointer;
 }
 
+#header #filters summary {
+  margin: 0 0 -2px -13px;
+}
+
+#header #filters summary h2 {
+  margin-left: -4px;
+}
+
 #header summary h2 {
-  display: inline-block;
+  display: inline-flex;
+  flex-wrap: wrap;
   border-bottom: 1px dotted transparent;
   margin-top: .1em;
   margin-bottom: .1em;
@@ -362,6 +378,7 @@ select {
 #header label {
   padding-left: 16px;
   position: relative;
+  white-space: nowrap;
 }
 
 #header .filter-selection label {
@@ -369,7 +386,6 @@ select {
   box-sizing: border-box;
   align-items: center;
   height: 18px;
-  width: 100%;
   padding: 0 0 0 8px;
 }
 
@@ -430,6 +446,7 @@ select {
 #manage-text {
   display: flex;
   align-items: baseline;
+  padding-top: .35rem;
 }
 
 #manage-text > :not(:last-child):after {
@@ -456,7 +473,7 @@ select {
   cursor: pointer;
 }
 
-.newUI .entry .style-name:hover::before {
+.newUI .entry .style-name::before {
   content: "";
   position: absolute;
   top: 0;
@@ -465,6 +482,13 @@ select {
   bottom: 0;
   background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
   pointer-events: none;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: opacity;
+}
+
+.newUI .entry .style-name:hover::before {
+  opacity: 1;
 }
 
 .newUI .entry.enabled .style-name:hover .style-name-link {
@@ -726,9 +750,9 @@ input[id^="manage.newUI"] {
 }
 
 #faviconsHelp div {
-    display: flex;
-    align-items: center;
-    margin-top: 1ex;
+  display: flex;
+  align-items: center;
+  margin-top: 1ex;
 }
 
 /* Default, no update buttons */
@@ -834,10 +858,6 @@ input[id^="manage.newUI"] {
   border: 1px solid transparent;
 }
 
-#filters summary h2 {
-  margin-left: -4px;
-}
-
 .active #filters-stats {
   background-color: darkcyan;
   border-color: darkcyan;
@@ -846,13 +866,21 @@ input[id^="manage.newUI"] {
   font-weight: normal;
   padding: 2px 5px;
   position: relative;
-  top: -2px;
+  white-space: nowrap;
 }
 
-#reset-filters {
-  position: absolute;
-  margin-top: 2px;
-  display: inline-block;
+.filter-stats-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: .2rem;
+}
+
+#header #filters summary {
+  white-space: nowrap;
+}
+
+#header #filters summary ::-webkit-details-marker {
+  margin-top: 4px
 }
 
 #reset-filters svg {
@@ -876,21 +904,30 @@ input[id^="manage.newUI"] {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
+  margin-bottom: .5rem;
 }
 
-#sort-wrapper {
-  margin-top: .25em;
+#search-wrapper {
+  margin-top: .35rem;
 }
 
 #sort-wrapper .sorter-selection {
+  display: inline-flex;
+  flex-grow: 1;
   position: relative;
-  width: calc(100% - 15px);
+  max-width: calc(100% - 30px);
+}
+
+#manage\.newUI\.sort {
+  max-width: 100%;
+}
+
+#search {
+  max-width: calc(100% - 30px);
 }
 
 #search, #manage\.newUI\.sort {
-  max-width: 100%;
   flex-grow: 1;
-  margin: 0.25rem 0 0;
   background: #fff;
   height: 20px;
   box-sizing: border-box;
@@ -910,11 +947,11 @@ input[id^="manage.newUI"] {
 }
 
 #search-help, #sorter-help {
-  margin: 4px -5px 0 2px;
+  margin: 0 -5px 0 2px;
 }
 
 #sort-wrapper .select-arrow {
-  top: 7px;
+  top: 3px;
   right: 4px;
 }
 
@@ -989,11 +1026,11 @@ input[id^="manage.newUI"] {
 }
 
 #message-box details:not(:last-child) {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
 }
 
 #message-box details small div {
-    margin-left: 1.5em;
+  margin-left: 1.5em;
 }
 
 .update-history-log {
@@ -1045,38 +1082,9 @@ input[id^="manage.newUI"] {
   }
 }
 
-@media (max-width: 675px) {
-  #installed {
-    position: static;
-    padding-left: 0;
-    overflow: visible;
-  }
-
-  #header p,
-  #backup {
-    display: inline-block;
-  }
-
-  #find-editor-styles {
-    display: inline-block;
-  }
-
-  #backup {
-    margin-right: 1em;
-  }
-
-  #backup p {
-    margin: 0;
-  }
-
-  .entry {
-    margin: 0;
-  }
-}
-
-@media (max-width: 800px) {
+@media (max-width: 850px) {
   body {
-    flex-direction: column;
+    display: table;
   }
 
   body.all-styles-hidden-by-filters:before {
@@ -1090,16 +1098,58 @@ input[id^="manage.newUI"] {
     left: 3.75rem;
   }
 
+  html:not(.newUI) .applies-to {
+    word-break: break-all;
+  }
+
+  #installed {
+    table-layout: fixed;
+  }
+
+  .newUI .entry .actions {
+    padding-right: 30px
+  }
+
+  #search-wrapper,
+  #sort-wrapper,
+  #header summary {
+    max-width: 247px;
+  }
+
+  #message-box > div {
+    left: 0;
+    right: 0!important;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .filter-selection {
+    max-width: 226px;
+  }
+
   #header {
+    display: table-header-group;
     height: auto;
+    padding: 0;
+    width: 100%;
     position: static;
-    width: auto;
     border-right: none;
     border-bottom: 1px dashed #AAA;
-    overflow: visible;
-    -webkit-column-count: 2;
-    -moz-column-count: 2;
-    column-count: 2;
+  }
+
+  #manage-settings {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: .5rem 0 1rem;
+  }
+
+  #manage-settings > .settings-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0 1rem;
+    box-sizing: border-box;
   }
 
   #installed {
@@ -1114,38 +1164,50 @@ input[id^="manage.newUI"] {
     display: none;
   }
 
+  #backup-buttons {
+    margin-top: 0;
+  }
+
+  #header summary {
+    margin-top: 0;
+    padding-bottom: .25rem;
+  }
+
   .newUI .entry {
-    margin: 0;
+    padding: 0;
   }
 
-  .newUI .style-name {
-    width: 50%;
+  .newUI .entry .checkmate {
+    position: absolute;
+    left: 14px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
   }
 
-  .newUI .target {
-    max-width: calc(50vw - var(--actions-width));
-  }
-}
-
-@media (max-width: 500px) {
-  #header {
-    -webkit-column-count: 1;
-    -moz-column-count: 1;
-    column-count: 1;
+  .newUI .entry .style-name {
+    padding: .5rem 0 .5rem 34px;
+    text-indent: unset;
   }
 
-  .newUI #header > *:not(h1),
-  .newUI #newUIoptions,
-  #newUIoptions > * {
-    display: inline;
+  .newUI .entry .actions {
+    width: 104px;
+    padding: .5rem 0 .5rem 6px;
   }
 
-  #header label {
-    white-space: nowrap;
+  .newUI .entry .applies-to {
+    padding: .25rem .5rem .25rem 0;
   }
 
-  .newUI .style-name {
-    word-break: break-all;
+  .newUI .entry .target {
+    max-width: 100%;
+    padding-right: 0;
+  }
+
+  .newUI .style-name::after,
+  .newUI .style-name-link::after {
+    text-indent: 0;
+    display: inline-block;
   }
 }
 
diff --git a/popup/popup.css b/popup/popup.css
index b0cc1663..15e11918 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -27,8 +27,8 @@ body {
 }
 
 .firefox body {
-  background-color: #fff;
   color: #000;
+  background-color: #fff;
 }
 
 body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
@@ -208,6 +208,24 @@ html[style] .entry {
   position: relative;
 }
 
+.entry .style-name::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: opacity;
+}
+
+.entry .style-name:hover::before {
+  opacity: 1;
+}
+
 .entry .main-controls {
   height: 100%;
   display: inline-flex;