make header responsive

extension/ui/pages/options.css

@@ -6,6 +6,7 @@ body {
     background-color: #fff;
     font-family: sans-serif;
     font-size: 12px;
+    min-width: 480px;
     max-width: 1024px;
     width: 100%;
     margin: 0;
@@ -80,9 +81,11 @@ input.large-input {
 }
 
 h3 {
+    display: flex;
     padding-left: 8px;
     padding-top: 10px;
     margin-top: 4px;
+    margin-right: 10px;
     min-height: 28px;
 }
 
@@ -106,11 +109,15 @@ h3 a {
 }
 
 .profiles {
-    float: right;
-    margin-right: 12px;
-    position: relative;
-    top: 3px;
-    max-width: calc(100% - 115px);
+    display: flex;
+    flex: 0 1 auto;
+    margin-left: 8px;
+    justify-content: flex-end;
+}
+
+.options-title {
+    flex: 1;
+    white-space: nowrap;
 }
 
 .help-icon {
@@ -169,23 +176,28 @@ h3 a {
     margin: 2px;
 }
 
+.rules-table-container * {
+    box-sizing: border-box;
+}
+
 .rules-table-container {
-    width: 100%;
+    width: calc(100% - 10px);
     border-spacing: 0;
     border-color: rgb(191, 191, 191);
     border-style: solid;
     border-width: 1px;
     margin-top: 24px;
+    margin-left: 6px;
 }
 
 .rules-table-container .tr {
     height: 26px;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 58px;
+    grid-template-columns: 1fr 1fr 1fr 64px;
 }
 
 .rules-table-container.compact .tr {
-    grid-template-columns: 1fr 1fr 58px;
+    grid-template-columns: 1fr 1fr 64px;
 }
 
 .rules-table-container.compact .tr .rule-autosave-profile {
@@ -238,8 +250,9 @@ h3 a {
 .rules-table-container button {
     padding: 0;
     margin: 0;
-    width: 22px;
     text-align: center;
+    margin-left: 4px;
+    min-width: 22px;
 }
 
 .rules-table-container .thead .tr {
@@ -274,7 +287,8 @@ h3 a {
 }
 
 .profiles select {
-    max-width: calc(100% - 78px);
+    width: calc(100% - 86px);
+    text-align-last: right;
 }
 
 .rules-table-container select {
@@ -491,7 +505,7 @@ a {
     margin-top: 8px;
 }
 
-.maximized main {
+.maximized body>main {
     margin: 0px;
     border: solid 1px rgb(191, 191, 191);
     background-color: #fbfbfb;
@@ -502,8 +516,8 @@ html.maximized {
 }
 
 .maximized .profiles {
+    position: relative;
     top: -4px;
-    max-width: calc(100% - 90px);
 }
 
 .maximized #helpLabel {
@@ -512,7 +526,28 @@ html.maximized {
     padding-top: 0;
 }
 
-@media (max-width:400px) {
+@media (max-width:279px) {
+    h3 {
+        flex-direction: column;
+    }
+
+    .profiles, .maximized .profiles {
+        position: static;
+        margin-top: 8px;
+        margin-left: 16px;
+        max-width: 100%;
+        justify-content: flex-start;
+    }
+
+    .profiles select {
+        text-align-last: auto;
+    }
+}
+
+@media (max-width:479px) {
+    body {
+        min-width: 220px;
+    }
 
     body,
     input,
@@ -547,7 +582,7 @@ html.maximized {
     }
 
     .side-panel,
-    .side-panel main,
+    .side-panel body>main,
     .side-panel details>summary,
     .side-panel button,
     .side-panel select,
@@ -555,7 +590,7 @@ html.maximized {
         background-color: #38383d;
     }
 
-    .maximized main {
+    .maximized body>main {
         border-color: rgb(81, 81, 81);
     }