fix: [#175848198,#175641468] Fixed: overlapping label when message is…

… too long, label text not being centered in its wrapper (#2475) * missing label overlapping fix * fixed badge overlapping, took freedom to remove unnecessary Views Co-authored-by: Matteo Boschi <[email protected]>
pagopa · Dec 1, 2020 · 676bd90 · 676bd90
1 parent 0d51036
commit 676bd90
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/ts/components/DetailedlistItemComponent.tsx b/ts/components/DetailedlistItemComponent.tsx
@@ -84,18 +84,20 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     minHeight: 24
   },
-  badgeInfoExpired: {
-    backgroundColor: IOColors.white,
-    borderColor: IOColors.red,
+  text3SubContainer: { width: `95%` },
+  badgeInfo: {
     borderWidth: 1,
     borderStyle: "solid",
     width: 65,
-    height: 22
+    height: 25,
+    flexDirection: "row"
+  },
+  badgeInfoExpired: {
+    backgroundColor: IOColors.white,
+    borderColor: IOColors.red
   },
   badgeInfoPaid: {
-    backgroundColor: IOColors.aqua,
-    width: 65,
-    height: 22
+    backgroundColor: IOColors.aqua
   }
 });
 
@@ -140,23 +142,21 @@ export default class DetailedlistItemComponent extends React.PureComponent<
                 <BadgeComponent />
               </View>
             )}
-            <H3 numberOfLines={2}>{this.props.text3}</H3>
+            <View style={styles.text3SubContainer}>
+              <H3 numberOfLines={2}>{this.props.text3}</H3>
+            </View>
           </View>
 
           <View style={styles.icon}>
             {this.props.isExpired && (
-              <View>
-                <Badge style={styles.badgeInfoExpired}>
-                  <H5 color="red">{I18n.t("messages.badge.expired")}</H5>
-                </Badge>
-              </View>
+              <Badge style={[styles.badgeInfo, styles.badgeInfoExpired]}>
+                <H5 color="red">{I18n.t("messages.badge.expired")}</H5>
+              </Badge>
             )}
             {this.props.isPaid && (
-              <View>
-                <Badge style={styles.badgeInfoPaid}>
-                  <H5 color="bluegreyDark">{I18n.t("messages.badge.paid")}</H5>
-                </Badge>
-              </View>
+              <Badge style={[styles.badgeInfo, styles.badgeInfoPaid]}>
+                <H5 color="bluegreyDark">{I18n.t("messages.badge.paid")}</H5>
+              </Badge>
             )}
 
             <IconFont