fix: make log list marker adjusted to number of log items, closes #537

felixmosh · Feb 16, 2023 · a8ba664 · a8ba664
1 parent 298b461
commit a8ba664
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
@@ -18,6 +18,10 @@
   word-break: break-all;
 }
 
+.preWrapper ol li {
+  padding-inline-start: 1rem;
+}
+
 .preWrapper ol li::marker {
   color: #a0aec0;
   content: attr(data-line-number);
@@ -71,7 +75,7 @@
 
 .jobLogs:fullscreen .preWrapper {
   height: 100%;
-  padding: 40px 1rem 1rem;
+  padding: 60px 1rem 1rem;
 }
 
 .toolbar .searchBar {

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.tsx
@@ -85,6 +85,8 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
     event.preventDefault();
   };
 
+  const logsToShow = logs.filter((log) => shouldShow(log, keyword));
+
   return (
     <div className={s.jobLogs} ref={logsContainer}>
       <ul className={s.toolbar}>
@@ -115,18 +117,16 @@ export const JobLogs = ({ actions, job }: JobLogsProps) => {
       </ul>
       <div className={s.preWrapper}>
         <pre>
-          <ol>
-            {logs
-              .filter((log) => shouldShow(log, keyword))
-              .map((log) => (
-                <li
-                  key={log.lineNumber}
-                  className={getLogType(log)}
-                  data-line-number={`${log.lineNumber}. `}
-                >
-                  {log.message}
-                </li>
-              ))}
+          <ol style={{ paddingInlineStart: `${`${logsToShow.length}`.length + 1}ch` }}>
+            {logsToShow.map((log) => (
+              <li
+                key={log.lineNumber}
+                className={getLogType(log)}
+                data-line-number={`${log.lineNumber}.`}
+              >
+                {log.message}
+              </li>
+            ))}
           </ol>
         </pre>
       </div>