From 9fd4e0f57dffb80d95304b02253df935bba12d2f Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Tue, 1 Jan 2019 21:37:50 -0600
Subject: [PATCH] Fix styling for width < 1100px

---
 manage.html         | 14 +++++++-------
 manage/manage.css   | 35 +++++++++++++++++++++++++++++++++--
 manage/tooltips.css | 22 ++++++++++++++++++++++
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/manage.html b/manage.html
index 3035e9b6..b9c22f68 100644
--- a/manage.html
+++ b/manage.html
@@ -549,9 +549,9 @@
             <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">
+              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>
@@ -593,7 +593,7 @@
               </div>
             </div>
           </div>
-         <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
+          <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
         </div>
 
         <div id="options-buttons">
@@ -602,9 +602,9 @@
                   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>
+            href="https://userstyles.org/styles/browse/chrome-extension"
+            i18n-title="editorStylesButton"
+            target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
         </div>
 
       </details>
diff --git a/manage/manage.css b/manage/manage.css
index e08821a8..275b9266 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -855,11 +855,42 @@ details.applies-to-extra[open] {
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1100px) {
+  body,
+  #main-header,
+  #tools-wrapper,
+  .manage-row {
+    position: static;
+    display: block;
+    height: auto;
+  }
+  #installed .entry-header {
+    position: static;
+    width: 100%;
+    height: auto;
+  }
+  #manage-backups {
+    display: inline-block;
+    vertical-align: center;
+  }
+  #manage-backups:hover .dropdown {
+    display: block;
+    left: -20px;
+    right: auto;
+    top: 99%;
+  }
+  #installed,
+  #tools-wrapper:not(.hidden) + #installed {
+    margin-top: 0;
+  }
   #installed .entry,
   #installed .entry-col,
   #installed .entry-header {
-    display: block;
+    flex-wrap: wrap;
+  }
+  .header-name,
+  .entry-name {
+    flex: 1;
   }
   .entry-actions {
     white-space: normal;
diff --git a/manage/tooltips.css b/manage/tooltips.css
index 9f85027e..5d697122 100644
--- a/manage/tooltips.css
+++ b/manage/tooltips.css
@@ -162,3 +162,25 @@
 .update-problem .check-update:before {
   border-right-color: var(--tooltip-error);
 }
+
+@media (max-width: 1100px) {
+  /* Action icons flip to left side; switch tooltip direction */
+  #main-actions [data-title].tt-w:after {
+    bottom: 50%;
+    left: 100%;
+    right: auto;
+    margin-left: 6px;
+    margin-right: 0;
+    transform: translateY(50%)
+  }
+
+  #main-actions [data-title].tt-w:before {
+    border-left-color: transparent;
+    border-right-color: var(--tooltip-bkgd);
+    bottom: 50%;
+    margin-top: -6px;
+    left: auto;
+    right: -7px;
+    top: 50%
+  }
+}