[JENKINS-41512] Use @media query to scale select max-width

jenkinsci · Jan 30, 2017 · 7a413bd · 7a413bd
1 parent 60457e9
commit 7a413bd
Showing 1 changed file with 49 additions and 1 deletion.
diff --git a/src/main/resources/lib/credentials/select/select.css b/src/main/resources/lib/credentials/select/select.css
@@ -1,4 +1,52 @@
-select.credentials-select { width: auto; vertical-align: top; }
+select.credentials-select {  width:auto; vertical-align: top; }
 div.credentials-select-content-inactive { display:none; }
 div#credentialsDialog {overflow-y: scroll;}
 body.masked {overflow-y: hidden;}
+
+@media (min-width: 1600px) {
+    select.credentials-select {
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 1600px) {
+    select.credentials-select {
+        max-width: 85%;
+    }
+}
+
+@media (max-width: 1400px) {
+    select.credentials-select {
+        max-width: 80%;
+    }
+}
+
+@media (max-width: 1200px) {
+    select.credentials-select {
+        max-width: 70%;
+    }
+}
+
+@media (max-width: 800px) {
+    select.credentials-select {
+        max-width: 60%;
+    }
+}
+
+@media (max-width: 767px) {
+    select.credentials-select {
+        max-width: 75%;
+    }
+}
+
+@media (max-width: 700px) {
+    select.credentials-select {
+        max-width: 70%;
+    }
+}
+
+@media (max-width: 600px) {
+    select.credentials-select {
+        max-width: 100%; /* force new line */
+    }
+}