From 644e267f893a62d2ac611a387275a7794165442e Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Thu, 16 Feb 2023 17:37:24 +0200
Subject: [PATCH] fix: make log list marker adjusted to number of log items,
 closes #537 (#538)

---
 .../DetailsContent/JobLogs/JobLogs.module.css |  6 ++++-
 .../DetailsContent/JobLogs/JobLogs.tsx        | 24 +++++++++----------
 2 files changed, 17 insertions(+), 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
index 98ee8f07..76516ee3 100644
--- 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
index 856d2988..e6d8234e 100644
--- 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>