From 1382758057365ea78cb10c33507590a8dfe57bc4 Mon Sep 17 00:00:00 2001 From: IamLRBA Date: Tue, 6 Jan 2026 22:47:50 +0300 Subject: [PATCH 1/4] feat(formplayer): improve UI spacing and error button visibility Solves #151 --- formulus-formplayer/src/App.tsx | 2 +- formulus-formplayer/src/FinalizeRenderer.tsx | 50 ++++++++++++++++--- formulus-formplayer/src/FormLayout.tsx | 14 +++--- .../src/SwipeLayoutRenderer.tsx | 2 +- formulus-formplayer/src/index.css | 10 ++-- formulus/src/components/FormplayerModal.tsx | 5 +- 6 files changed, 59 insertions(+), 24 deletions(-) diff --git a/formulus-formplayer/src/App.tsx b/formulus-formplayer/src/App.tsx index 4d1282b2b..e4f0cb755 100644 --- a/formulus-formplayer/src/App.tsx +++ b/formulus-formplayer/src/App.tsx @@ -650,7 +650,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 }} diff --git a/formulus-formplayer/src/FinalizeRenderer.tsx b/formulus-formplayer/src/FinalizeRenderer.tsx index 519a31d28..ac85a09ba 100644 --- a/formulus-formplayer/src/FinalizeRenderer.tsx +++ b/formulus-formplayer/src/FinalizeRenderer.tsx @@ -300,19 +300,53 @@ const FinalizeRenderer = ({ Please fix the following errors before finalizing: - - + + {errors.map((error: ErrorObject, index: number) => ( - handleErrorClick(error.instancePath)} + sx={{ + justifyContent: 'center', + textAlign: 'center', + textTransform: 'none', + py: 1.5, + px: 2, + width: { xs: '100%', sm: 'auto' }, + minWidth: 'auto', + maxWidth: { xs: '100%', sm: 'calc(100% - 16px)', md: 'none' }, + borderColor: 'error.main', + whiteSpace: 'normal', + wordBreak: 'break-word', + '&:hover': { + borderColor: 'error.dark', + backgroundColor: 'error.light', + }, + }} > - - + + {formatErrorMessage(error)} + + ))} - + ) : ( diff --git a/formulus-formplayer/src/FormLayout.tsx b/formulus-formplayer/src/FormLayout.tsx index 085bf2b9f..81dfab1f2 100644 --- a/formulus-formplayer/src/FormLayout.tsx +++ b/formulus-formplayer/src/FormLayout.tsx @@ -166,17 +166,17 @@ const FormLayout: React.FC = ({ 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', diff --git a/formulus-formplayer/src/SwipeLayoutRenderer.tsx b/formulus-formplayer/src/SwipeLayoutRenderer.tsx index 9db836f85..bd6fcf48d 100644 --- a/formulus-formplayer/src/SwipeLayoutRenderer.tsx +++ b/formulus-formplayer/src/SwipeLayoutRenderer.tsx @@ -118,7 +118,7 @@ const SwipeLayoutRenderer = ({ } : undefined } - contentBottomPadding={120} + contentBottomPadding={80} showNavigation={true} >
diff --git a/formulus-formplayer/src/index.css b/formulus-formplayer/src/index.css index 7235d3aab..98e7332a3 100644 --- a/formulus-formplayer/src/index.css +++ b/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 { diff --git a/formulus/src/components/FormplayerModal.tsx b/formulus/src/components/FormplayerModal.tsx index e0f93ed7f..d419d8f2c 100644 --- a/formulus/src/components/FormplayerModal.tsx +++ b/formulus/src/components/FormplayerModal.tsx @@ -438,7 +438,8 @@ const styles = StyleSheet.create({ header: { flexDirection: 'row', alignItems: 'center', - padding: 16, + paddingHorizontal: 8, + paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#eee', }, @@ -453,7 +454,7 @@ const styles = StyleSheet.create({ width: 40, }, closeButton: { - padding: 8, + padding: 4, }, disabledButton: { opacity: 0.5, From 59dcc02fc41c2d16d0606db824ffd97756ef41ad Mon Sep 17 00:00:00 2001 From: IamLRBA Date: Tue, 6 Jan 2026 23:20:51 +0300 Subject: [PATCH 2/4] fix(formplayer): remove unused ListItemText import --- formulus-formplayer/src/FinalizeRenderer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/formulus-formplayer/src/FinalizeRenderer.tsx b/formulus-formplayer/src/FinalizeRenderer.tsx index ac85a09ba..94affa625 100644 --- a/formulus-formplayer/src/FinalizeRenderer.tsx +++ b/formulus-formplayer/src/FinalizeRenderer.tsx @@ -4,7 +4,6 @@ import { Button, List, ListItem, - ListItemText, Typography, Paper, Divider, From 8e8d81415d7a02c72e4b067a3ff99912c48e6455 Mon Sep 17 00:00:00 2001 From: IamLRBA Date: Tue, 6 Jan 2026 23:25:24 +0300 Subject: [PATCH 3/4] fix(formplayer): format files with Prettier --- formulus-formplayer/src/FinalizeRenderer.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/formulus-formplayer/src/FinalizeRenderer.tsx b/formulus-formplayer/src/FinalizeRenderer.tsx index 94affa625..01e77fe38 100644 --- a/formulus-formplayer/src/FinalizeRenderer.tsx +++ b/formulus-formplayer/src/FinalizeRenderer.tsx @@ -1,14 +1,5 @@ import React, { useMemo } from 'react'; -import { - Box, - Button, - List, - ListItem, - 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'; From 3036f096e71ba8955128bf32cd6f022019de22a9 Mon Sep 17 00:00:00 2001 From: IamLRBA Date: Thu, 8 Jan 2026 10:05:54 +0300 Subject: [PATCH 4/4] feat(formplayer): improve Finalize page layout and error button styling --- formulus-formplayer/src/FinalizeRenderer.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/formulus-formplayer/src/FinalizeRenderer.tsx b/formulus-formplayer/src/FinalizeRenderer.tsx index 01e77fe38..bfed96a99 100644 --- a/formulus-formplayer/src/FinalizeRenderer.tsx +++ b/formulus-formplayer/src/FinalizeRenderer.tsx @@ -281,13 +281,9 @@ const FinalizeRenderer = ({ return ( - - Review and Finalize - - {hasErrors ? ( <> - + Please fix the following errors before finalizing: @@ -311,9 +307,7 @@ const FinalizeRenderer = ({ textTransform: 'none', py: 1.5, px: 2, - width: { xs: '100%', sm: 'auto' }, - minWidth: 'auto', - maxWidth: { xs: '100%', sm: 'calc(100% - 16px)', md: 'none' }, + width: '100%', borderColor: 'error.main', whiteSpace: 'normal', wordBreak: 'break-word', @@ -348,8 +342,8 @@ const FinalizeRenderer = ({ {/* Summary Section */} {summaryItems.length > 0 && ( - - Form Summary + + FORM SUMMARY Review all your entered data below. Click on any field to edit it.