style: update button styles for accessibility

Author: lposen

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts

@@ -34,7 +34,7 @@ export const styles = StyleSheet.create({
   },
   buttonText: {
     fontSize: 14,
-    fontWeight: '400',
+    fontWeight: '700',
     lineHeight: 20,
     paddingHorizontal: 12,
     paddingVertical: 8,

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.styles.ts

@@ -18,8 +18,14 @@ export const styles = StyleSheet.create({
     width: '100%',
   },
   button: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
     borderRadius: 32,
+    flexShrink: 1,
     gap: 8,
+    justifyContent: 'center',
+    maxWidth: '100%',
+    minWidth: 0,
     paddingHorizontal: 12,
     paddingVertical: 8,
   },
@@ -28,13 +34,17 @@ export const styles = StyleSheet.create({
     alignSelf: 'stretch',
     display: 'flex',
     flexDirection: 'row',
+    flexWrap: 'wrap',
     gap: 12,
     width: '100%',
   },
   buttonText: {
+    flexShrink: 1,
     fontSize: 14,
     fontWeight: '700',
     lineHeight: 20,
+    maxWidth: '100%',
+    textAlign: 'center',
   },
   container: {
     alignItems: 'flex-start',

src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx

@@ -98,6 +98,8 @@ export const IterableEmbeddedNotification = ({
                   key={button.id}
                 >
                   <Text
+                    ellipsizeMode="tail"
+                    numberOfLines={1}
                     style={[
                       styles.buttonText,
                       { color: textColor } as TextStyle,