[JENKINS-67198] Increase width of forms (jenkinsci#6172)

* Update theme.less * Update job config page width to match inner form components * Increase widths of form elements (roughly 100 pixels wider)
janfaracik · Jan 13, 2022 · 70c92a5 · 70c92a5
1 parent 685b60c
commit 70c92a5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/core/src/main/resources/hudson/model/Job/configure.jelly b/core/src/main/resources/hudson/model/Job/configure.jelly
@@ -37,7 +37,7 @@ THE SOFTWARE.
     <l:main-panel>
     <div class="container">
       <div class="row">
-        <div class="col-md-offset-2 col-md-20">
+        <div class="jenkins-config-container">
 
           <div class="behavior-loading"><l:spinner text="${%LOADING}"/></div>
 

diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
@@ -97,6 +97,13 @@
   }
 
 }
+
+#jenkins .jenkins-config-container {
+  width: 100vw;
+  max-width: calc(var(--form-item-max-width) + 20px);
+  margin: auto;
+}
+
 #jenkins{
   .jenkins-config {
     border:1px solid var(--input-border);

diff --git a/war/src/main/less/abstracts/theme.less b/war/src/main/less/abstracts/theme.less
@@ -271,9 +271,9 @@
   --input-border: #C3CCD1;
   --input-border-hover: #5C7889;
   --input-hidden-password-bg-color: #f9f9f9;
-  --form-item-max-width: 650px;
-  --form-item-max-width--small: 300px;
-  --form-item-max-width--medium: 450px;
+  --form-item-max-width: ~"min(65vw, 1600px)";
+  --form-item-max-width--medium: ~"min(50vw, 1400px)";
+  --form-item-max-width--small: ~"min(35vw, 1200px)";
   --form-label-font-weight: bold;
   --form-input-padding: 8px;
   --form-input-border-radius: 6px;