From 1008dcb1dfe1ce00499ccc4e0b0a5bcd918882da Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Sun, 1 Sep 2024 16:50:49 +0200
Subject: [PATCH] [JENKINS-73695] BUG: Dashboard shows white space on certain
 width space >900px (#9667)

---
 .../resources/lib/hudson/projectView.jelly    | 34 ++++++++++---------
 war/src/main/scss/abstracts/_theme.scss       |  1 +
 war/src/main/scss/base/_layout-commons.scss   | 13 +++++--
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly
index de8d4a9316b1..75842abc1e9f 100644
--- a/core/src/main/resources/lib/hudson/projectView.jelly
+++ b/core/src/main/resources/lib/hudson/projectView.jelly
@@ -67,23 +67,25 @@ THE SOFTWARE.
       </div>
 
       <div class="jenkins-mobile-hide">
-        <table id="projectstatus" class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-          <thead>
-          <tr>
-            <j:forEach var="col" items="${columnExtensions}">
-              <j:if test="${col.class.simpleName.equals('BuildButtonColumn')}">
-                <j:set var="buildButtonColumn" value="${col}" />
-              </j:if>
-              <st:include page="columnHeader.jelly" it="${col}" />
-            </j:forEach>
-          </tr>
-          </thead>
+        <div class="app-project-status-table">
+          <table id="projectstatus" class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
+            <thead>
+              <tr>
+                <j:forEach var="col" items="${columnExtensions}">
+                  <j:if test="${col.class.simpleName.equals('BuildButtonColumn')}">
+                    <j:set var="buildButtonColumn" value="${col}" />
+                  </j:if>
+                  <st:include page="columnHeader.jelly" it="${col}" />
+                </j:forEach>
+              </tr>
+            </thead>
 
-          <j:forEach var="job" items="${jobs}">
-            <j:set var="relativeLinkToJob" value="${h.getRelativeLinkTo(job)}"/>
-            <t:projectViewRow jobBaseUrl="${relativeLinkToJob.substring(0, relativeLinkToJob.length() - job.shortUrl.length())}"/>
-          </j:forEach>
-        </table>
+            <j:forEach var="job" items="${jobs}">
+              <j:set var="relativeLinkToJob" value="${h.getRelativeLinkTo(job)}"/>
+              <t:projectViewRow jobBaseUrl="${relativeLinkToJob.substring(0, relativeLinkToJob.length() - job.shortUrl.length())}"/>
+            </j:forEach>
+          </table>
+        </div>
         <t:iconSize><t:rssBar/></t:iconSize>
       </div>
 
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
index 9004709c76a1..c108634f7c85 100644
--- a/war/src/main/scss/abstracts/_theme.scss
+++ b/war/src/main/scss/abstracts/_theme.scss
@@ -267,6 +267,7 @@ $semantics: (
   --tab-baseline-default-display: none;
 
   // Side panel
+  --side-panel-width: 340px;
   --panel-header-bg-color: var(--light-grey);
   --panel-border-color: var(--light-grey);
   --side-panel-hover-color: var(--panel-border-color);
diff --git a/war/src/main/scss/base/_layout-commons.scss b/war/src/main/scss/base/_layout-commons.scss
index c42e6dcafe67..ce45451b0add 100644
--- a/war/src/main/scss/base/_layout-commons.scss
+++ b/war/src/main/scss/base/_layout-commons.scss
@@ -84,7 +84,7 @@
 }
 
 body.two-column #main-panel {
-  width: calc(100% - 320px);
+  width: calc(100% - var(--side-panel-width));
   flex: 1;
   display: block;
 }
@@ -98,7 +98,7 @@ body.full-screen #main-panel {
 }
 
 body.two-column #side-panel {
-  width: 340px;
+  width: var(--side-panel-width);
 }
 
 /* stylelint-disable-next-line media-query-no-invalid */
@@ -118,9 +118,16 @@ body.two-column #side-panel {
   }
 }
 
+.app-project-status-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
 @media (width >= 1170px) {
   body.two-column #main-panel {
-    width: calc(100% - 370px);
+    width: calc(
+      100% - calc(var(--side-panel-width) + calc(var(--section-padding) * 2))
+    );
   }
 }