Merge pull request #23 from dontnod/4.1/fix-build-summary-display

[DONTNOD] Display build summary label as flex to fix display issue
dontnod · Oct 15, 2024 · 9a4b22b · 9a4b22b
2 parents 264adc7 + dc37d8a
commit 9a4b22b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/www/base/src/components/BuildSummary/BuildSummary.scss b/www/base/src/components/BuildSummary/BuildSummary.scss
@@ -47,6 +47,20 @@
     padding: 0.375rem 1rem;
   }
 
+  .bb-build-summary-step-label {
+    display: flex;
+    align-items: center;
+
+    > *  {
+      flex-shrink: 0;
+    }
+
+    .bb-build-summary-time {
+      flex-shrink: 1;
+      margin-left: auto;
+    }
+  }
+
   &.list-group-item.bb-anchor-target {
     border: 2px solid #ffff00;
   }

diff --git a/www/base/src/components/BuildSummary/BuildSummary.tsx b/www/base/src/components/BuildSummary/BuildSummary.tsx
@@ -202,7 +202,7 @@ const BuildSummaryStepLine = observer(({build, step, parentFullDisplay}: BuildSu
 
   return (
     <li key={step.id} className="bb-build-summary-step-line list-group-item" id={`bb-step-${step.number}`}>
-      <div onClick={() => setFullDisplay(!fullDisplay)}>
+      <div className="bb-build-summary-step-label" onClick={() => setFullDisplay(!fullDisplay)}>
         <AnchorLink className="bb-build-summary-step-anchor-link"
                     anchor={`bb-step-${step.number}`}>
           #