From da41e54d0fbd9bc2648ab0af756b3b8344896133 Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Tue, 27 Aug 2024 17:36:28 +0200
Subject: [PATCH 1/2] [no_space] use overlow for table

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 .../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..11dff868bb86 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="jenkins-projectstatus-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 cc21f1e8ab90..c11853eafeee 100644
--- a/war/src/main/scss/abstracts/_theme.scss
+++ b/war/src/main/scss/abstracts/_theme.scss
@@ -270,6 +270,7 @@ $semantics: (
   --tab-baseline-default-display: none;
 
   // Side panel
+  --sidep-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..6d60ab12984d 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(--sidep-panel-width));
   flex: 1;
   display: block;
 }
@@ -98,7 +98,7 @@ body.full-screen #main-panel {
 }
 
 body.two-column #side-panel {
-  width: 340px;
+  width: var(--sidep-panel-width);
 }
 
 /* stylelint-disable-next-line media-query-no-invalid */
@@ -118,9 +118,16 @@ body.two-column #side-panel {
   }
 }
 
+.jenkins-projectstatus-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
 @media (width >= 1170px) {
   body.two-column #main-panel {
-    width: calc(100% - 370px);
+    width: calc(
+      100% - calc(var(--sidep-panel-width) + calc(var(--section-padding) * 2))
+    );
   }
 }
 

From db2e78b9de296196b27ea85c62285fbf38f0b994 Mon Sep 17 00:00:00 2001
From: Thorsten Scherler <scherler@gmail.com>
Date: Thu, 29 Aug 2024 09:46:12 +0200
Subject: [PATCH 2/2] [no_space] fix typo and rename class

Signed-off-by: Thorsten Scherler <scherler@gmail.com>
---
 core/src/main/resources/lib/hudson/projectView.jelly | 2 +-
 war/src/main/scss/abstracts/_theme.scss              | 2 +-
 war/src/main/scss/base/_layout-commons.scss          | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/src/main/resources/lib/hudson/projectView.jelly b/core/src/main/resources/lib/hudson/projectView.jelly
index 11dff868bb86..75842abc1e9f 100644
--- a/core/src/main/resources/lib/hudson/projectView.jelly
+++ b/core/src/main/resources/lib/hudson/projectView.jelly
@@ -67,7 +67,7 @@ THE SOFTWARE.
       </div>
 
       <div class="jenkins-mobile-hide">
-        <div class="jenkins-projectstatus-table">
+        <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>
diff --git a/war/src/main/scss/abstracts/_theme.scss b/war/src/main/scss/abstracts/_theme.scss
index bfd5e10fad91..c108634f7c85 100644
--- a/war/src/main/scss/abstracts/_theme.scss
+++ b/war/src/main/scss/abstracts/_theme.scss
@@ -267,7 +267,7 @@ $semantics: (
   --tab-baseline-default-display: none;
 
   // Side panel
-  --sidep-panel-width: 340px;
+  --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 6d60ab12984d..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% - var(--sidep-panel-width));
+  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: var(--sidep-panel-width);
+  width: var(--side-panel-width);
 }
 
 /* stylelint-disable-next-line media-query-no-invalid */
@@ -118,7 +118,7 @@ body.two-column #side-panel {
   }
 }
 
-.jenkins-projectstatus-table {
+.app-project-status-table {
   width: 100%;
   overflow-x: auto;
 }
@@ -126,7 +126,7 @@ body.two-column #side-panel {
 @media (width >= 1170px) {
   body.two-column #main-panel {
     width: calc(
-      100% - calc(var(--sidep-panel-width) + calc(var(--section-padding) * 2))
+      100% - calc(var(--side-panel-width) + calc(var(--section-padding) * 2))
     );
   }
 }