From 597fbdb8fba159f75b1459db1724ee7006c922f1 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:21:00 +0100
Subject: [PATCH] Validation report: layout adjustments (#3650)

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
---
 webapp/views/App/views/Data/ValidationReport/Row/Row.js   | 4 ++--
 .../App/views/Data/ValidationReport/ValidationReport.js   | 2 +-
 .../App/views/Data/ValidationReport/ValidationReport.scss | 8 ++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/webapp/views/App/views/Data/ValidationReport/Row/Row.js b/webapp/views/App/views/Data/ValidationReport/Row/Row.js
index c87d8fccb2..2dcb2e6fff 100644
--- a/webapp/views/App/views/Data/ValidationReport/Row/Row.js
+++ b/webapp/views/App/views/Data/ValidationReport/Row/Row.js
@@ -39,8 +39,8 @@ const Row = (props) => {
 
   return (
     <>
-      <div>{rowNo}</div>
-      <div data-value={path}>
+      <div className="validation-report__row-num-col">{rowNo}</div>
+      <div className="validation-report__path-col" data-value={path}>
         <LabelWithTooltip label={path} />
       </div>
       <div
diff --git a/webapp/views/App/views/Data/ValidationReport/ValidationReport.js b/webapp/views/App/views/Data/ValidationReport/ValidationReport.js
index 2644c308c9..caf3d9ce9e 100644
--- a/webapp/views/App/views/Data/ValidationReport/ValidationReport.js
+++ b/webapp/views/App/views/Data/ValidationReport/ValidationReport.js
@@ -42,7 +42,7 @@ const ValidationReport = () => {
         headerProps={{ restParams }}
         module="validationReport"
         restParams={restParams}
-        gridTemplateColumns="70px 1fr 2fr 50px"
+        gridTemplateColumns="50px 1fr 2fr 50px"
         rowHeaderComponent={RowHeader}
         rowComponent={Row}
         onRowClick={onRowClick}
diff --git a/webapp/views/App/views/Data/ValidationReport/ValidationReport.scss b/webapp/views/App/views/Data/ValidationReport/ValidationReport.scss
index e40eb2aebe..03ce9de9a8 100644
--- a/webapp/views/App/views/Data/ValidationReport/ValidationReport.scss
+++ b/webapp/views/App/views/Data/ValidationReport/ValidationReport.scss
@@ -18,12 +18,20 @@
   .table__row {
     height: unset;
     padding: 6px 0;
+    gap: 1rem;
   }
 }
 
+.validation-report__row-num-col {
+  justify-self: right;
+}
+
+.validation-report__path-col,
 .validation-report__message {
   justify-self: left;
+}
 
+.validation-report__message {
   .validation-field_message {
     color: $black;
   }