Responsive layout

Give me a minute.

edit.html

@@ -101,14 +101,20 @@
           <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>
+        <div class="remove-applies-to" i18n-text="appliesRemove" i18n-title="appliesRemove">
-        <button class="add-applies-to" i18n-text="appliesAdd"></button>
+          <svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
+        </div>
+        <div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
+          <svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+        </div>
       </li>
     </template>
 
     <template data-id="appliesToEverything">
       <li class="applies-to-everything" i18n-text="appliesToEverything">
-        <button class="add-applies-to" i18n-text="appliesSpecify"></button>
+        <div class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd">
+          <svg id="svg-icon-add" class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
+        </div>
       </li>
     </template>
 
@@ -124,11 +130,13 @@
           </label>
           <ul class="applies-to-list"></ul>
         </div>
+        <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>
 
     <template data-id="searchReplaceDialog">
@@ -276,12 +284,16 @@
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </h2>
+          <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 id="options-wrapper">
+          <div class="options-column">
             <div class="option">
               <label id="lineWrapping-label" i18n-text="cm_lineWrapping">
                 <input id="editor.lineWrapping" type="checkbox">
@@ -334,6 +346,8 @@
                 <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">
@@ -380,6 +394,8 @@
                 <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">
         <summary>
@@ -439,6 +455,14 @@
         <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>
 
   </body>

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;

install-usercss.html

@@ -45,7 +45,8 @@
 </head>
 <body id="stylus-install-usercss">
   <div class="container">
-    <div class="header">
+    <div id="header">
+      <div id="header-content-wrapper">
         <h1>
           <span class="meta-name"></span>
           <small class="meta-version"></small>
@@ -75,10 +76,13 @@
           <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 class="external-link"></div>
+        </div>
+      </div>
     </div>
     <div class="main">
       <div class="warnings"></div>

manage.html

@@ -172,6 +172,8 @@
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
   
+  <div id="manage-settings">
+    <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">
         <summary>
           <h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
@@ -254,9 +256,6 @@
             <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>
@@ -267,24 +266,27 @@
           </a>
         </div>
       
-  <p class="nowrap">
+      </details>
+      
+      <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>
-  </p>
+        </div>
         
-  <p>
+        <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>
-  </p>
+        </div>
         
         <div id="add-style-wrapper">
           <a href="edit.html">
-      <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
+            <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
           </a>
           <label id="add-style-as-usercss-wrapper">
             <input type="checkbox" id="newStyleAsUsercss">
@@ -300,7 +302,10 @@
             </a>
           </label>
         </div>
+      </div>
+    </div>
     
+    <div class="settings-column">
       <details id="options" data-pref="manage.options.expanded">
       
         <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
@@ -335,7 +340,7 @@
          <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
         </div>
       
-    <p>
+        <div id="options-buttons">
           <button id="manage-options-button" i18n-text="openOptionsManage"></button>
           <button id="manage-shortcuts-button" class="chromium-only"
                   i18n-text="shortcuts"
@@ -344,24 +349,26 @@
              href="https://userstyles.org/styles/browse/chrome-extension"
              i18n-title="editorStylesButton"
              target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
-    </p>
+        </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>
-    <p>
+        <div id="backup-buttons">
           <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
           <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
-    </p>
+        </div>
       </details>
       
-  <p id="manage-text">
+      <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>
-  </p>
+      </div>
+    </div>
+  </div>
 
 </div>