[JENKINS-73695] BUG: Dashboard shows white space on certain width spa…

…ce >900px (jenkinsci#9667)
changsongyang · Sep 1, 2024 · 1008dcb · 1008dcb
1 parent 9fc6a55
commit 1008dcb
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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))
+    );
   }
 }