fix: make dialog responsive

.changeset/mighty-readers-film.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-chronicles": patch
+---
+
+Wrap buttons in button screen

.changeset/sharp-snails-guess.md

@@ -0,0 +1,10 @@
+---
+"@equinor/mad-components": patch
+---
+
+Make dialog responsive to all text sizes
+
+- Make dialog title responsive
+- Make dialog custom content scrollable
+- Make action buttons wrap when necessary
+- Avoid clipping of button content in dialog action buttons

apps/chronicles/screens/components/components/ButtonScreen.tsx

@@ -102,6 +102,8 @@ const themeStyles = EDSStyleSheet.create(theme => ({
     buttonRow: {
         paddingVertical: 8,
         flexDirection: "row",
+        flexWrap: "wrap",
         justifyContent: "space-around",
+        gap: 12,
     },
 }));

packages/components/src/components/Button/Button.tsx

@@ -178,9 +178,9 @@ const themeStyles = EDSStyleSheet.create((theme, props: ButtonStyleSheetProps) =
             minHeight: theme.geometry.dimension.button.minHeight - outlinedHeightReduction,
             paddingHorizontal: theme.spacing.button.paddingHorizontal - outlinedPaddingReduction,
             paddingVertical: theme.spacing.button.paddingVertical - outlinedPaddingReduction,
+            justifyContent: "center"
         },
         labelContainer: {
-            flex: 1,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "center",

packages/components/src/components/Dialog/Dialog.tsx

@@ -33,6 +33,7 @@ const themeStyles = EDSStyleSheet.create(
     (theme, props: { style: StyleProp<ViewStyle>; dimensions: ScaledSize }) => ({
         dialog: StyleSheet.flatten({
             backgroundColor: theme.colors.container.elevation.aboveScrim,
+            maxHeight: "100%",
             borderRadius: theme.geometry.border.elementBorderRadius,
             minHeight: theme.geometry.dimension.dialog.minHeight,
             width: theme.geometry.dimension.dialog.defaultWidth,

packages/components/src/components/Dialog/DialogActions.tsx

@@ -18,6 +18,7 @@ const themeStyles = EDSStyleSheet.create((theme, align: "left" | "right") => ({
     spacer: { flex: 1 },
     actionsContainer: {
         flexDirection: "row",
+        flexWrap: "wrap",
         gap: theme.spacing.dialog.gap,
         justifyContent: align === "left" ? "flex-start" : "flex-end",
         padding: theme.spacing.dialog.padding,

packages/components/src/components/Dialog/DialogCustomContent.tsx

@@ -1,11 +1,17 @@
 import React, { PropsWithChildren } from "react";
-import { View } from "react-native";
+import { Pressable, ScrollView } from "react-native";
 import { EDSStyleSheet } from "../../styling";
 import { useStyles } from "../../hooks/useStyles";
 
 export const DialogCustomContent = ({ children }: PropsWithChildren) => {
     const styles = useStyles(themeStyles);
-    return <View style={styles.customContentContainer}>{children}</View>;
+    return (
+        <ScrollView contentContainerStyle={styles.customContentContainer}>
+            <Pressable>
+                {children}
+            </Pressable>
+        </ScrollView>
+    );
 };
 
 const themeStyles = EDSStyleSheet.create(theme => ({

packages/components/src/components/Dialog/DialogHeader.tsx

@@ -17,7 +17,7 @@ export const DialogHeader = (props: TextChildren) => {
 
 const themeStyles = EDSStyleSheet.create(theme => ({
     header: {
-        height: theme.geometry.dimension.dialog.header.height - theme.geometry.border.borderWidth,
+        minHeight: theme.geometry.dimension.dialog.header.height - theme.geometry.border.borderWidth,
         width: "100%",
         borderBottomWidth: theme.geometry.border.borderWidth,
         borderBottomColor: theme.colors.border.medium,

packages/components/src/components/Scrim/Scrim.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { LayoutAnimation, Pressable, StyleSheet } from "react-native";
+import { LayoutAnimation, Pressable, SafeAreaView, StyleSheet } from "react-native";
 import { Portal } from "../Portal";
 import { EDSStyleSheet } from "../../styling";
 import { useStyles } from "../../hooks/useStyles";
@@ -22,7 +22,9 @@ export const Scrim = ({ isOpen, onPress, children }: ScrimProps) => {
     return (
         <Portal name="scrim">
             <Pressable style={styles.scrim} onPress={onPress}>
-                {children}
+                <SafeAreaView style={styles.safeAreaView}>
+                    {children}
+                </SafeAreaView>
             </Pressable>
         </Portal>
     );
@@ -31,8 +33,11 @@ export const Scrim = ({ isOpen, onPress, children }: ScrimProps) => {
 const themeStyles = EDSStyleSheet.create(theme => ({
     scrim: {
         ...StyleSheet.absoluteFillObject,
-        justifyContent: "center",
-        alignItems: "center",
         backgroundColor: theme.colors.container.scrim,
     },
+    safeAreaView: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center"
+    }
 }));