fix: ensure DataTable.Title respects font scaling (#4640)

Author: kacperzolkiewski

src/components/DataTable/DataTableTitle.tsx

@@ -3,6 +3,7 @@ import {
   Animated,
   GestureResponderEvent,
   I18nManager,
+  PixelRatio,
   Pressable,
   StyleProp,
   StyleSheet,
@@ -137,7 +138,7 @@ const DataTableTitle = ({
         style={[
           styles.cell,
           // height must scale with numberOfLines
-          { maxHeight: 24 * numberOfLines },
+          { maxHeight: 24 * PixelRatio.getFontScale() * numberOfLines },
           // if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
           numberOfLines > 1
             ? numeric

src/components/__tests__/__snapshots__/DataTable.test.tsx.snap

@@ -229,7 +229,7 @@ exports[`DataTable.Header renders data table header 1`] = `
               "lineHeight": 24,
             },
             {
-              "maxHeight": 24,
+              "maxHeight": 48,
             },
             {},
             {
@@ -310,7 +310,7 @@ exports[`DataTable.Header renders data table header 1`] = `
               "lineHeight": 24,
             },
             {
-              "maxHeight": 24,
+              "maxHeight": 48,
             },
             {},
             {
@@ -2643,7 +2643,7 @@ exports[`DataTable.Title renders data table title with press handler 1`] = `
             "lineHeight": 24,
           },
           {
-            "maxHeight": 24,
+            "maxHeight": 48,
           },
           {},
           {
@@ -2778,7 +2778,7 @@ exports[`DataTable.Title renders data table title with sort icon 1`] = `
             "lineHeight": 24,
           },
           {
-            "maxHeight": 24,
+            "maxHeight": 48,
           },
           {},
           {
@@ -2864,7 +2864,7 @@ exports[`DataTable.Title renders right aligned data table title 1`] = `
             "lineHeight": 24,
           },
           {
-            "maxHeight": 24,
+            "maxHeight": 48,
           },
           {},
           {