feat(formplayer): improve UI spacing and error button visibility

formulus-formplayer/src/App.tsx

@@ -723,7 +723,7 @@ function App() {
             style={{
               width: process.env.NODE_ENV === 'development' ? '60%' : '100%',
               overflow: 'hidden', // Prevent outer scrolling - FormLayout handles scrolling internally
-              padding: '12px',
+              padding: '4px',
               boxSizing: 'border-box',
               height: '100%', // Ensure it takes full height
             }}

formulus-formplayer/src/FinalizeRenderer.tsx

@@ -1,15 +1,5 @@
 import React, { useMemo } from 'react';
-import {
-  Box,
-  Button,
-  List,
-  ListItem,
-  ListItemText,
-  Typography,
-  Paper,
-  Divider,
-  Link,
-} from '@mui/material';
+import { Box, Button, List, ListItem, Typography, Paper, Divider, Link } from '@mui/material';
 import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import { withJsonFormsControlProps, useJsonForms } from '@jsonforms/react';
 import { ControlProps } from '@jsonforms/core';
@@ -294,28 +284,56 @@ const FinalizeRenderer = ({
 
   return (
     <Box sx={{ p: 3, height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <Typography variant="h5" gutterBottom>
-        Review and Finalize
-      </Typography>
-
       {hasErrors ? (
         <>
-          <Typography variant="subtitle1" color="error" gutterBottom>
+          <Typography variant="h5" color="error" gutterBottom>
             Please fix the following errors before finalizing:
           </Typography>
-          <Paper sx={{ mb: 3 }}>
-            <List>
+          <Paper sx={{ mb: 3, p: 2 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                alignItems: 'center',
+              }}
+            >
               {errors.map((error: ErrorObject, index: number) => (
-                <ListItem
+                <Button
                   key={index}
-                  component="div"
-                  sx={{ cursor: 'pointer' }}
+                  variant="outlined"
+                  color="error"
                   onClick={() => handleErrorClick(error.instancePath)}
+                  sx={{
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    textTransform: 'none',
+                    py: 1.5,
+                    px: 2,
+                    width: '100%',
+                    borderColor: 'error.main',
+                    whiteSpace: 'normal',
+                    wordBreak: 'break-word',
+                    '&:hover': {
+                      borderColor: 'error.dark',
+                      backgroundColor: 'error.light',
+                    },
+                  }}
                 >
-                  <ListItemText primary={formatErrorMessage(error)} />
-                </ListItem>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      textAlign: 'center',
+                      width: '100%',
+                      whiteSpace: 'normal',
+                      wordBreak: 'break-word',
+                    }}
+                  >
+                    {formatErrorMessage(error)}
+                  </Typography>
+                </Button>
               ))}
-            </List>
+            </Box>
           </Paper>
         </>
       ) : (
@@ -327,8 +345,8 @@ const FinalizeRenderer = ({
       {/* Summary Section */}
       {summaryItems.length > 0 && (
         <Box sx={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', mb: 3 }}>
-          <Typography variant="h6" gutterBottom sx={{ mt: 2, mb: 1 }}>
-            Form Summary
+          <Typography variant="h5" gutterBottom sx={{ fontWeight: 700 }}>
+            FORM SUMMARY
           </Typography>
           <Typography variant="body2" color="text.secondary" gutterBottom sx={{ mb: 2 }}>
             Review all your entered data below. Click on any field to edit it.

formulus-formplayer/src/FormLayout.tsx

@@ -166,17 +166,17 @@ const FormLayout: React.FC<FormLayoutProps> = ({
             zIndex: theme.zIndex.appBar,
             width: '100%',
             padding: {
-              xs: theme.spacing(1.5, 2),
-              sm: theme.spacing(2, 3),
-              md: theme.spacing(2.5, 4),
+              xs: theme.spacing(1, 1.5),
+              sm: theme.spacing(1.5, 2),
+              md: theme.spacing(1.5, 2.5),
             },
             paddingBottom: {
-              xs: `calc(${theme.spacing(1.5)} + env(safe-area-inset-bottom, 0px))`,
-              sm: `calc(${theme.spacing(2)} + env(safe-area-inset-bottom, 0px))`,
-              md: `calc(${theme.spacing(2.5)} + env(safe-area-inset-bottom, 0px))`,
+              xs: `calc(${theme.spacing(1)} + env(safe-area-inset-bottom, 0px))`,
+              sm: `calc(${theme.spacing(1.5)} + env(safe-area-inset-bottom, 0px))`,
+              md: `calc(${theme.spacing(1.5)} + env(safe-area-inset-bottom, 0px))`,
             },
             backgroundColor: 'background.paper',
-            borderTop: '1px solid',
+            borderTop: 'none',
             borderColor: 'divider',
             boxShadow: '0 -4px 12px rgba(0,0,0,0.15)',
             transition: 'opacity 0.2s ease-in-out, transform 0.2s ease-in-out',

formulus-formplayer/src/SwipeLayoutRenderer.tsx

@@ -264,7 +264,7 @@ const SwipeLayoutRenderer = ({
             }
           : undefined
       }
-      contentBottomPadding={120}
+      contentBottomPadding={80}
       showNavigation={true}
     >
       <div {...handlers} className="swipelayout_screen">

formulus-formplayer/src/index.css

@@ -17,10 +17,10 @@ body {
 
 .swipelayout_screen {
   margin: 0;
-  padding-top: 2vh;
+  padding-top: 0.5vh;
   padding-left: 0;
   padding-right: 0;
-  padding-bottom: 2vh;
+  padding-bottom: 0.5vh;
   width: 100%;
   /* Remove fixed height and overflow - let FormLayout handle scrolling */
   min-height: 100%;
@@ -30,13 +30,13 @@ body {
 
 /* Add padding to form content, but not to the container itself */
 .swipelayout_screen > div {
-  padding-left: 1%;
-  padding-right: 1%;
+  padding-left: 0.5%;
+  padding-right: 0.5%;
   box-sizing: border-box;
 }
 
 .swipelayout_screen > div > div {
-  margin-bottom: 15px;
+  margin-bottom: 8px;
 }
 
 code {

formulus/src/components/FormplayerModal.tsx

@@ -219,7 +219,7 @@
       };
 
       // Load extensions for this form
       let extensions: any = undefined;
       try {
         const customAppPath = RNFS.DocumentDirectoryPath + '/app';
         const extensionService = ExtensionService.getInstance();
@@ -495,7 +495,8 @@
   header: {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: 16,
+    paddingHorizontal: 8,
+    paddingVertical: 12,
     borderBottomWidth: 1,
     borderBottomColor: '#eee',
   },
@@ -510,7 +511,7 @@
     width: 40,
   },
   closeButton: {
-    padding: 8,
+    padding: 4,
   },
   disabledButton: {
     opacity: 0.5,