From ed916423f2e494dbb35bbb0ac6f3d7dda0787c57 Mon Sep 17 00:00:00 2001
From: Flaminia Cavallo <flaminia@dhis2.org>
Date: Thu, 17 Oct 2024 08:56:41 +0200
Subject: [PATCH] fix: change text alignment in data set display options from
 left / right to line start / line end

---
 src/data-workspace/section-form/section-form.js    | 11 ++++++-----
 src/data-workspace/section-form/section.module.css | 10 +++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/data-workspace/section-form/section-form.js b/src/data-workspace/section-form/section-form.js
index 1e429aa60..64a28df25 100644
--- a/src/data-workspace/section-form/section-form.js
+++ b/src/data-workspace/section-form/section-form.js
@@ -19,13 +19,14 @@ export const SectionForm = ({ dataSet, globalFilterText }) => {
     return (
         <>
             <div
-                className={cx(styles.sectionsCustomerText, {
-                    [styles.textLeft]:
-                        displayOptions.customText?.align === 'left',
+                className={cx(styles.sectionsCustomText, {
+                    [styles.textStartLine]:
+                        displayOptions.customText?.align === 'line-start',
                     [styles.textCenter]:
                         displayOptions.customText?.align === 'center',
-                    [styles.textRight]:
-                        displayOptions.customText?.align === 'right',
+                    [styles.textEndLine]:
+                        !displayOptions.customText ||
+                        displayOptions.customText?.align === 'line-end',
                 })}
             >
                 {displayOptions.customText?.header && (
diff --git a/src/data-workspace/section-form/section.module.css b/src/data-workspace/section-form/section.module.css
index 93e56927d..b7d2419d5 100644
--- a/src/data-workspace/section-form/section.module.css
+++ b/src/data-workspace/section-form/section.module.css
@@ -99,21 +99,21 @@
     margin: 2px;
     font-size: 1.5em;
 }
-.sectionsCustomerText{
+.sectionsCustomText{
     width: 100%;
     padding: 16px;
 }
 .sectionTab {
     margin-bottom: 8px;
 }
-.textLeft{
-    text-align: left;
+.textStartLine{
+    text-align: start;
 }
 .textCenter{
     text-align: center;
 }
-.textRight{
-    text-align: right;
+.textEndLine{
+    text-align: end;
 }
 
 .verticalSectionTabWrapper .sectionTab div {