Refs #38130 - fix job details layout small screen

theforeman · Jan 28, 2025 · a064994 · a064994
1 parent 45bd8b8
commit a064994
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 44 deletions.
diff --git a/webpack/JobInvocationDetail/JobInvocationDetail.scss b/webpack/JobInvocationDetail/JobInvocationDetail.scss
@@ -39,11 +39,13 @@
   }
 }
 .job-additional-info {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding: 0;
+  margin-bottom: -10px;
 }
-.job-invocation-details section:nth-child(3) {
-  padding-bottom: 0;
+.job-details-table-section {
+  section:nth-child(1) {
+    padding: 0;
+  }
 }
 
 .template-invocation {

diff --git a/webpack/JobInvocationDetail/index.js b/webpack/JobInvocationDetail/index.js
@@ -91,56 +91,54 @@ const JobInvocationDetailPage = ({
 
   return (
     <>
-      <div className="job-invocation-details">
-        <PageLayout
-          header={description}
-          breadcrumbOptions={breadcrumbOptions}
-          toolbarButtons={
-            <JobInvocationToolbarButtons
-              jobId={id}
-              data={items}
-              currentPermissions={response.results}
-              permissionsStatus={status}
-            />
-          }
-          searchable={false}
+      <PageLayout
+        header={description}
+        breadcrumbOptions={breadcrumbOptions}
+        toolbarButtons={
+          <JobInvocationToolbarButtons
+            jobId={id}
+            data={items}
+            currentPermissions={response.results}
+            permissionsStatus={status}
+          />
+        }
+        searchable={false}
+      >
+        <Flex
+          className="job-invocation-detail-flex"
+          alignItems={{ default: 'alignItemsFlexStart' }}
         >
+          <JobInvocationSystemStatusChart
+            data={items}
+            isAlreadyStarted={isAlreadyStarted}
+            formattedStartDate={formattedStartDate}
+          />
+          <Divider
+            orientation={{
+              default: 'vertical',
+            }}
+          />
           <Flex
-            className="job-invocation-detail-flex"
-            alignItems={{ default: 'alignItemsFlexStart' }}
+            className="job-overview"
+            alignItems={{ default: 'alignItemsCenter' }}
           >
-            <JobInvocationSystemStatusChart
+            <JobInvocationOverview
               data={items}
               isAlreadyStarted={isAlreadyStarted}
               formattedStartDate={formattedStartDate}
             />
-            <Divider
-              orientation={{
-                default: 'vertical',
-              }}
-            />
-            <Flex
-              className="job-overview"
-              alignItems={{ default: 'alignItemsCenter' }}
-            >
-              <JobInvocationOverview
-                data={items}
-                isAlreadyStarted={isAlreadyStarted}
-                formattedStartDate={formattedStartDate}
-              />
-            </Flex>
           </Flex>
-        </PageLayout>
-      </div>
-      <PageSection
-        variant={PageSectionVariants.light}
-        className="job-additional-info"
-      >
-        {items.id !== undefined && <JobAdditionInfo data={items} />}
-      </PageSection>
+        </Flex>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="job-additional-info"
+        >
+          {items.id !== undefined && <JobAdditionInfo data={items} />}
+        </PageSection>
+      </PageLayout>
       <PageSection
         variant={PageSectionVariants.light}
-        className="table-section"
+        className="job-details-table-section table-section"
       >
         {items.id !== undefined && (
           <JobInvocationHostTable