Add: responsive layout

install-usercss.html

@@ -68,18 +68,21 @@
         </label>
       </div>
       <p class="meta-description"></p>
-      <div>
+      <div class="meta-group">
         <h3 i18n-text="author"></h3>
         <span class="meta-author"></span>
       </div>
-      <div>
+      <div class="meta-group">
         <h3 i18n-text="license"></h3>
         <span class="meta-license"></span>
       </div>
+      <div class="meta-group">
         <h3 i18n-text="appliesLabel"></h3>
         <ul class="applies-to">
         </ul>
-      <div class="external-link"></div>
+      </div>
+      <div class="meta-group external-link">
+      </div>
     </div>
     <div class="main">
       <div class="code">

install-usercss/install-usercss.css

@@ -119,3 +119,45 @@ h1 small {
 .main .CodeMirror {
   height: 100%;
 }
+
+@media (max-width: 800px) {
+  .container {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .header {
+    flex: 1 1 auto;
+    border-right: none;
+    border-bottom: 1px dashed #AAA;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin: 4px 0;
+  }
+  .actions label {
+    margin: 0 0 0 8px;
+  }
+
+  h1,
+  h3,
+  .meta-group {
+    margin: 12px 0;
+  }
+
+  h3 {
+    margin-bottom: 8px;
+  }
+
+  .main {
+    max-height: 100vh;
+  }
+
+  p,
+  ul {
+    margin: 8px 0;
+  }
+}