Merge pull request #80 from stephenc/jenkins-41512

[JENKINS-41512] Use @media query to scale select max-width
jenkinsci · Mar 2, 2017 · d8a11ad · d8a11ad
2 parents 51583db + 7a413bd
commit d8a11ad
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 */
+    }
+}