From 773cfafd37eba42352b766fa76d5e8862fbf6400 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Thu, 29 Feb 2024 00:38:30 +0530
Subject: [PATCH 1/3] Add indentation logic to list items

---
 src/components/SelectionList/RadioListItem.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index 019cae84d156..88fc843440d5 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import BaseListItem from './BaseListItem';
 import type {RadioListItemProps} from './types';
 
@@ -20,6 +21,9 @@ function RadioListItem({
 }: RadioListItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const fullTitle = isMultilineSupported ? item.text.trimStart() : item.text;
+    const indentsLength = item.text.length - fullTitle.length;
+    const paddingLeft = Math.floor(indentsLength / CONST.INDENTS.length) * styles.ml3.marginLeft;
 
     return (
         <BaseListItem
@@ -40,13 +44,14 @@ function RadioListItem({
                 <View style={[styles.flex1, styles.alignItemsStart]}>
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
-                        text={item.text}
+                        text={fullTitle}
                         textStyles={[
                             styles.optionDisplayName,
                             isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                             styles.sidebarLinkTextBold,
                             isMultilineSupported ? styles.preWrap : styles.pre,
                             item.alternateText ? styles.mb1 : null,
+                            isMultilineSupported ? {paddingLeft} : {},
                         ]}
                         numberOfLines={isMultilineSupported ? 2 : 1}
                     />

From fad3686d83a6aac46a4317c207ebe342cc98015e Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Fri, 8 Mar 2024 10:30:11 +0530
Subject: [PATCH 2/3] Update ternary expression to use null

---
 src/components/SelectionList/RadioListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index 00d0fe7a0ab0..099e37a06a0d 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -53,7 +53,7 @@ function RadioListItem({
                             styles.sidebarLinkTextBold,
                             isMultilineSupported ? styles.preWrap : styles.pre,
                             item.alternateText ? styles.mb1 : null,
-                            isMultilineSupported ? {paddingLeft} : {},
+                            isMultilineSupported ? {paddingLeft} : null,
                         ]}
                         numberOfLines={isMultilineSupported ? 2 : 1}
                     />

From ac6712555514d101c062b92b0ea65ac802a1d6b1 Mon Sep 17 00:00:00 2001
From: Someshwar Tripathi <someshwartripathi8@gmail.com>
Date: Sat, 23 Mar 2024 01:58:44 +0530
Subject: [PATCH 3/3] Fix lint

---
 src/components/SelectionList/RadioListItem.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index d9f1c4590a0d..e7823209cf7e 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -23,8 +23,8 @@ function RadioListItem({
 }: RadioListItemProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const fullTitle = isMultilineSupported ? item.text.trimStart() : item.text;
-    const indentsLength = item.text.length - fullTitle.length;
+    const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
+    const indentsLength = (item.text?.length ?? 0) - (fullTitle?.length ?? 0);
     const paddingLeft = Math.floor(indentsLength / CONST.INDENTS.length) * styles.ml3.marginLeft;
 
     return (
@@ -48,7 +48,7 @@ function RadioListItem({
                 <View style={[styles.flex1, styles.alignItemsStart]}>
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
-                        text={item.text ?? ''}
+                        text={fullTitle ?? ''}
                         style={[
                             styles.optionDisplayName,
                             isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,