From 1f00229cfa5449b49ead07f7f728476bf9483b41 Mon Sep 17 00:00:00 2001
From: Najuna Brian <najuna.dev@gmail.com>
Date: Sat, 20 Dec 2025 04:47:08 +0300
Subject: [PATCH 1/3] feat: add question shell and card selects

---
 formulus-formplayer/src/App.tsx               |   7 +-
 .../src/AudioQuestionRenderer.tsx             |  53 +++-----
 .../src/FileQuestionRenderer.tsx              |  71 ++++------
 .../src/GPSQuestionRenderer.tsx               |  66 ++++-----
 .../src/PhotoQuestionRenderer.tsx             | 119 +++++++---------
 .../src/QrcodeQuestionRenderer.tsx            | 103 ++++++--------
 formulus-formplayer/src/QuestionShell.tsx     | 102 ++++++++++++++
 .../src/SignatureQuestionRenderer.tsx         |  63 +++------
 .../src/VideoQuestionRenderer.tsx             |  76 ++++-------
 formulus-formplayer/src/material-wrappers.tsx | 127 ++++++++++++++++++
 formulus-formplayer/src/theme.ts              |  10 ++
 11 files changed, 450 insertions(+), 347 deletions(-)
 create mode 100644 formulus-formplayer/src/QuestionShell.tsx
 create mode 100644 formulus-formplayer/src/material-wrappers.tsx

diff --git a/formulus-formplayer/src/App.tsx b/formulus-formplayer/src/App.tsx
index b4b87577f..78ae04f0e 100644
--- a/formulus-formplayer/src/App.tsx
+++ b/formulus-formplayer/src/App.tsx
@@ -25,6 +25,7 @@ import FileQuestionRenderer, { fileQuestionTester } from './FileQuestionRenderer
 import AudioQuestionRenderer, { audioQuestionTester } from './AudioQuestionRenderer';
 import GPSQuestionRenderer, { gpsQuestionTester } from './GPSQuestionRenderer';
 import VideoQuestionRenderer, { videoQuestionTester } from './VideoQuestionRenderer';
+import { shellMaterialRenderers } from './material-wrappers';
 
 import ErrorBoundary from './ErrorBoundary';
 import { draftService } from './DraftService';
@@ -671,7 +672,11 @@ function App() {
                     schema={schema}
                     uischema={uischema}
                     data={data}
-                    renderers={[...materialRenderers, ...customRenderers]}
+                    renderers={[
+                      ...shellMaterialRenderers,
+                      ...materialRenderers,
+                      ...customRenderers,
+                    ]}
                     cells={materialCells}
                     onChange={handleDataChange}
                     validationMode="ValidateAndShow"
diff --git a/formulus-formplayer/src/AudioQuestionRenderer.tsx b/formulus-formplayer/src/AudioQuestionRenderer.tsx
index d13aeacc4..bf6d59746 100644
--- a/formulus-formplayer/src/AudioQuestionRenderer.tsx
+++ b/formulus-formplayer/src/AudioQuestionRenderer.tsx
@@ -1,16 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { ControlProps, rankWith, formatIs } from '@jsonforms/core';
-import {
-  Box,
-  Button,
-  Typography,
-  Paper,
-  IconButton,
-  LinearProgress,
-  Alert,
-  Chip,
-} from '@mui/material';
+import { Box, Button, Typography, Paper, IconButton, LinearProgress, Chip } from '@mui/material';
 import {
   Mic as MicIcon,
   Stop as StopIcon,
@@ -21,6 +12,7 @@ import {
 } from '@mui/icons-material';
 import FormulusClient from './FormulusInterface';
 import { AudioResult } from './FormulusInterfaceDefinition';
+import QuestionShell from './QuestionShell';
 
 interface AudioQuestionRendererProps extends ControlProps {
   data: any;
@@ -210,34 +202,19 @@ const AudioQuestionRenderer: React.FC<AudioQuestionRendererProps> = ({
 
   const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
 
-  return (
-    <Box sx={{ mb: 2 }}>
-      {/* Label */}
-      {schema.title && (
-        <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
-          {schema.title}
-          {schema.description && (
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
-              {schema.description}
-            </Typography>
-          )}
-        </Typography>
-      )}
-
-      {/* Error Display */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
-          {error}
-        </Alert>
-      )}
-
-      {/* Validation Errors */}
-      {errors && Array.isArray(errors) && errors.length > 0 && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {errors.map((error: any) => error.message).join(', ')}
-        </Alert>
-      )}
+  const validationError =
+    errors && Array.isArray(errors) && errors.length > 0
+      ? errors.map((error: any) => error.message || String(error)).join(', ')
+      : null;
 
+  return (
+    <QuestionShell
+      title={schema.title}
+      description={schema.description}
+      required={Boolean((uischema as any)?.options?.required ?? (schema as any)?.options?.required)}
+      error={error || validationError}
+      helperText="Record clear audio. You can re-record or delete as needed."
+    >
       <Paper
         variant="outlined"
         sx={{
@@ -401,7 +378,7 @@ const AudioQuestionRenderer: React.FC<AudioQuestionRendererProps> = ({
           </Box>
         )}
       </Paper>
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/FileQuestionRenderer.tsx b/formulus-formplayer/src/FileQuestionRenderer.tsx
index 3bde4f3b5..32a0b20d0 100644
--- a/formulus-formplayer/src/FileQuestionRenderer.tsx
+++ b/formulus-formplayer/src/FileQuestionRenderer.tsx
@@ -1,14 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react';
-import {
-  Button,
-  Typography,
-  Box,
-  Alert,
-  CircularProgress,
-  Paper,
-  IconButton,
-  Chip,
-} from '@mui/material';
+import { Button, Typography, Box, CircularProgress, Paper, IconButton, Chip } from '@mui/material';
 import {
   AttachFile as FileIcon,
   Delete as DeleteIcon,
@@ -21,6 +12,7 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { ControlProps, rankWith, schemaTypeIs, and, schemaMatches } from '@jsonforms/core';
 import FormulusClient from './FormulusInterface';
 import { FileResult } from './FormulusInterfaceDefinition';
+import QuestionShell from './QuestionShell';
 
 // Tester function - determines when this renderer should be used
 export const fileQuestionTester = rankWith(
@@ -136,35 +128,29 @@ const FileQuestionRenderer: React.FC<ControlProps> = ({
 
   const hasData = data && typeof data === 'object' && data.type === 'file';
   const hasError = errors && (Array.isArray(errors) ? errors.length > 0 : errors.length > 0);
+  const validationError = hasError
+    ? Array.isArray(errors)
+      ? errors.join(', ')
+      : (errors as any)
+    : null;
 
   return (
-    <Box sx={{ mb: 2 }}>
-      {/* Title and Description */}
-      {schema.title && (
-        <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
-          {schema.title}
-        </Typography>
-      )}
-      {schema.description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {schema.description}
-        </Typography>
-      )}
-
-      {/* Error Display */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-
-      {/* Validation Errors */}
-      {hasError && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {Array.isArray(errors) ? errors.join(', ') : errors}
-        </Alert>
-      )}
-
+    <QuestionShell
+      title={schema.title}
+      description={schema.description}
+      required={Boolean((uischema as any)?.options?.required ?? (schema as any)?.options?.required)}
+      error={error || validationError}
+      helperText="Attach a file. Images, PDFs, and documents are supported."
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ mt: 1, p: 1, bgcolor: 'info.light', borderRadius: 1 }}>
+            <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
+              Debug: fieldId="{fieldId}", path="{path}", format="select_file"
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {/* File Selection Button */}
       {!hasData && (
         <Button
@@ -242,16 +228,7 @@ const FileQuestionRenderer: React.FC<ControlProps> = ({
           </Box>
         </Paper>
       )}
-
-      {/* Development Debug Info */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: 'info.light', borderRadius: 1 }}>
-          <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
-            Debug: fieldId="{fieldId}", path="{path}", format="select_file"
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/GPSQuestionRenderer.tsx b/formulus-formplayer/src/GPSQuestionRenderer.tsx
index 0ece2767d..3e12ed97b 100644
--- a/formulus-formplayer/src/GPSQuestionRenderer.tsx
+++ b/formulus-formplayer/src/GPSQuestionRenderer.tsx
@@ -8,7 +8,6 @@ import {
   Card,
   CardContent,
   Chip,
-  Alert,
   CircularProgress,
   Grid,
   Divider,
@@ -19,6 +18,7 @@ import {
   Delete as DeleteIcon,
   MyLocation as MyLocationIcon,
 } from '@mui/icons-material';
+import QuestionShell from './QuestionShell';
 // GPS is now captured automatically by the native app for all forms.
 // This renderer is kept only for backward-compatibility with existing
 // form schemas that still reference the "gps" format. It no longer
@@ -92,36 +92,33 @@ const GPSQuestionRenderer: React.FC<GPSQuestionRendererProps> = (props) => {
   const isDisabled = !enabled || isCapturing;
 
   return (
-    <Box sx={{ mb: 2 }}>
-      {/* Field Label */}
-      <Typography variant="h6" sx={{ mb: 1, fontWeight: 500 }}>
-        {schema.title || 'GPS Location'}
-      </Typography>
-
-      {/* Field Description */}
-      {schema.description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {schema.description}
-        </Typography>
-      )}
-
-      {/* Error Display */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
+    <QuestionShell
+      title={schema.title || 'GPS Location'}
+      description={schema.description}
+      required={Boolean(
+        (props.uischema as any)?.options?.required ?? (schema as any)?.options?.required,
       )}
-
-      {/* Validation Errors */}
-      {hasValidationErrors && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {Array.isArray(errors) ? errors.map((error: any) => error.message).join(', ') : errors}
-        </Alert>
-      )}
-
-      {/* Location Display or Capture Button */}
+      error={
+        error ||
+        (hasValidationErrors
+          ? Array.isArray(errors)
+            ? errors.map((error: any) => error.message || String(error)).join(', ')
+            : errors
+          : null)
+      }
+      helperText="GPS is captured automatically; use this only if the form requires manual capture."
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ mt: 1, p: 1, bgcolor: 'grey.100', borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              Debug - Path: {path} | Data: {JSON.stringify(data)}
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {locationData ? (
-        <Card variant="outlined" sx={{ mb: 2 }}>
+        <Card variant="outlined">
           <CardContent>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
               <LocationIcon color="primary" sx={{ mr: 1 }} />
@@ -239,16 +236,7 @@ const GPSQuestionRenderer: React.FC<GPSQuestionRendererProps> = (props) => {
           </Typography>
         </Box>
       )}
-
-      {/* Debug Information (only in development) */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: 'grey.100', borderRadius: 1 }}>
-          <Typography variant="caption" color="text.secondary">
-            Debug - Path: {path} | Data: {JSON.stringify(data)}
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/PhotoQuestionRenderer.tsx b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
index 0166f793c..c37c05ff8 100644
--- a/formulus-formplayer/src/PhotoQuestionRenderer.tsx
+++ b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
@@ -1,19 +1,11 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { ControlProps, rankWith, schemaTypeIs, and, schemaMatches } from '@jsonforms/core';
-import {
-  Button,
-  Box,
-  Typography,
-  Card,
-  CardMedia,
-  CardContent,
-  IconButton,
-  Alert,
-} from '@mui/material';
+import { Button, Box, Typography, Card, CardMedia, CardContent, IconButton } from '@mui/material';
 import { PhotoCamera, Delete, Refresh } from '@mui/icons-material';
 import FormulusClient from './FormulusInterface';
 import { CameraResult } from './FormulusInterfaceDefinition';
+import QuestionShell from './QuestionShell';
 
 // Tester function to identify photo question types
 export const photoQuestionTester = rankWith(
@@ -169,39 +161,56 @@ const PhotoQuestionRenderer: React.FC<PhotoQuestionProps> = ({
   // Get display label from schema or uischema
   const label = (uischema as any)?.label || schema.title || 'Photo';
   const description = schema.description;
-  const isRequired = schema.required || false;
-
-  return (
-    <Box sx={{ mb: 2, width: '100%' }}>
-      {/* Label and description */}
-      <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 'medium' }}>
-        {label}
-        {isRequired && <span style={{ color: 'red' }}> *</span>}
-      </Typography>
-
-      {description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {description}
-        </Typography>
-      )}
-
-      {/* Error display - full width, pushes content down */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2, width: '100%', display: 'block' }}>
-          {error}
-        </Alert>
-      )}
+  const isRequired = Boolean(
+    (uischema as any)?.options?.required ?? (schema as any)?.options?.required ?? false,
+  );
 
-      {/* Form validation errors */}
-      {errors && errors.length > 0 && (
-        <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
-          {String(errors[0])}
-        </Alert>
-      )}
+  const validationError = errors && errors.length > 0 ? String(errors[0]) : null;
 
-      {/* Photo display or camera button */}
+  return (
+    <QuestionShell
+      title={label}
+      description={description}
+      required={isRequired}
+      error={error || validationError}
+      helperText={
+        currentPhotoData?.filename ? `File: ${currentPhotoData.filename}` : 'Capture a clear photo.'
+      }
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ p: 1, bgcolor: '#f5f5f5', borderRadius: 1 }}>
+            <Typography variant="caption" component="div">
+              Debug Info:
+            </Typography>
+            <Typography variant="caption" component="pre" sx={{ fontSize: '0.7rem' }}>
+              {JSON.stringify(
+                {
+                  fieldId,
+                  path,
+                  currentPhotoData,
+                  hasPhotoData: !!currentPhotoData,
+                  hasFilename: !!currentPhotoData?.filename,
+                  hasUri: !!currentPhotoData?.uri,
+                  photoUrl,
+                  hasPhotoUrl: !!photoUrl,
+                  shouldShowThumbnail: !!(
+                    currentPhotoData &&
+                    currentPhotoData.filename &&
+                    photoUrl
+                  ),
+                  isLoading,
+                  error,
+                },
+                null,
+                2,
+              )}
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {currentPhotoData && currentPhotoData.filename && photoUrl ? (
-        <Card sx={{ maxWidth: 400, mb: 2 }}>
+        <Card sx={{ maxWidth: 400 }}>
           <CardMedia
             component="img"
             height="200"
@@ -261,35 +270,7 @@ const PhotoQuestionRenderer: React.FC<PhotoQuestionProps> = ({
           </Button>
         </Box>
       )}
-
-      {/* Debug info in development */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: '#f5f5f5', borderRadius: 1 }}>
-          <Typography variant="caption" component="div">
-            Debug Info:
-          </Typography>
-          <Typography variant="caption" component="pre" sx={{ fontSize: '0.7rem' }}>
-            {JSON.stringify(
-              {
-                fieldId,
-                path,
-                currentPhotoData,
-                hasPhotoData: !!currentPhotoData,
-                hasFilename: !!currentPhotoData?.filename,
-                hasUri: !!currentPhotoData?.uri,
-                photoUrl,
-                hasPhotoUrl: !!photoUrl,
-                shouldShowThumbnail: !!(currentPhotoData && currentPhotoData.filename && photoUrl),
-                isLoading,
-                error,
-              },
-              null,
-              2,
-            )}
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/QrcodeQuestionRenderer.tsx b/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
index 637aebd54..5e69bd55e 100644
--- a/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
+++ b/formulus-formplayer/src/QrcodeQuestionRenderer.tsx
@@ -1,19 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { ControlProps, rankWith, schemaTypeIs, and, schemaMatches } from '@jsonforms/core';
-import {
-  Button,
-  Box,
-  Typography,
-  Card,
-  CardContent,
-  IconButton,
-  Alert,
-  TextField,
-} from '@mui/material';
+import { Button, Box, Typography, Card, CardContent, IconButton, TextField } from '@mui/material';
 import { QrCodeScanner, Delete, Refresh } from '@mui/icons-material';
 import FormulusClient from './FormulusInterface';
 import { QrcodeResult } from './FormulusInterfaceDefinition';
+import QuestionShell from './QuestionShell';
 
 // Tester function to identify QR code question types
 export const qrcodeQuestionTester = rankWith(
@@ -149,39 +141,45 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
   // Get display label from schema or uischema
   const label = (uischema as any)?.label || schema.title || 'QR Code';
   const description = schema.description;
-  const isRequired = schema.required || false;
-
-  return (
-    <Box sx={{ mb: 2, width: '100%' }}>
-      {/* Label and description */}
-      <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 'medium' }}>
-        {label}
-        {isRequired && <span style={{ color: 'red' }}> *</span>}
-      </Typography>
-
-      {description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {description}
-        </Typography>
-      )}
-
-      {/* Error display - full width, pushes content down */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2, width: '100%', display: 'block' }}>
-          {error}
-        </Alert>
-      )}
+  const isRequired = Boolean(
+    (uischema as any)?.options?.required ?? (schema as any)?.options?.required ?? false,
+  );
 
-      {/* Form validation errors */}
-      {errors && errors.length > 0 && (
-        <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
-          {String(errors[0])}
-        </Alert>
-      )}
+  const validationError = errors && errors.length > 0 ? String(errors[0]) : null;
 
-      {/* QR code value display or scanner button */}
+  return (
+    <QuestionShell
+      title={label}
+      description={description}
+      required={isRequired}
+      error={error || validationError}
+      helperText="Scan the code or enter it manually if needed."
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ p: 1, bgcolor: '#f5f5f5', borderRadius: 1 }}>
+            <Typography variant="caption" component="div">
+              Debug Info:
+            </Typography>
+            <Typography variant="caption" component="pre" sx={{ fontSize: '0.7rem' }}>
+              {JSON.stringify(
+                {
+                  fieldId,
+                  path,
+                  currentQrcodeValue,
+                  hasQrcodeValue: !!currentQrcodeValue,
+                  isLoading,
+                  error,
+                },
+                null,
+                2,
+              )}
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {currentQrcodeValue ? (
-        <Card sx={{ mb: 2 }}>
+        <Card>
           <CardContent>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
               <Typography variant="body2" color="text.secondary">
@@ -263,30 +261,7 @@ const QrcodeQuestionRenderer: React.FC<QrcodeQuestionProps> = ({
           </Box>
         </Box>
       )}
-
-      {/* Debug info in development */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: '#f5f5f5', borderRadius: 1 }}>
-          <Typography variant="caption" component="div">
-            Debug Info:
-          </Typography>
-          <Typography variant="caption" component="pre" sx={{ fontSize: '0.7rem' }}>
-            {JSON.stringify(
-              {
-                fieldId,
-                path,
-                currentQrcodeValue,
-                hasQrcodeValue: !!currentQrcodeValue,
-                isLoading,
-                error,
-              },
-              null,
-              2,
-            )}
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/QuestionShell.tsx b/formulus-formplayer/src/QuestionShell.tsx
new file mode 100644
index 000000000..bffc3fed4
--- /dev/null
+++ b/formulus-formplayer/src/QuestionShell.tsx
@@ -0,0 +1,102 @@
+import React, { ReactNode } from 'react';
+import { Box, Typography, Alert, Stack, Divider } from '@mui/material';
+
+export interface QuestionShellProps {
+  title?: string;
+  description?: string;
+  required?: boolean;
+  error?: string | string[] | null;
+  helperText?: ReactNode;
+  actions?: ReactNode;
+  metadata?: ReactNode;
+  children: ReactNode;
+}
+
+const normalizeError = (error?: string | string[] | null): string | null => {
+  if (!error) return null;
+  if (Array.isArray(error)) {
+    return error.filter(Boolean).join(', ') || null;
+  }
+  return error;
+};
+
+const QuestionShell: React.FC<QuestionShellProps> = ({
+  title,
+  description,
+  required = false,
+  error,
+  helperText,
+  actions,
+  metadata,
+  children,
+}) => {
+  const normalizedError = normalizeError(error);
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+      }}
+    >
+      {(title || description) && (
+        <Stack spacing={0.5}>
+          {title && (
+            <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.3 }}>
+              {title}
+              {required && (
+                <Box component="span" sx={{ color: 'error.main', ml: 0.5 }}>
+                  *
+                </Box>
+              )}
+            </Typography>
+          )}
+          {description && (
+            <Typography variant="body1" color="text.secondary">
+              {description}
+            </Typography>
+          )}
+        </Stack>
+      )}
+
+      {normalizedError && (
+        <Alert severity="error" sx={{ width: '100%' }}>
+          {normalizedError}
+        </Alert>
+      )}
+
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+        }}
+      >
+        {children}
+      </Box>
+
+      {(helperText || actions) && (
+        <Stack spacing={1}>
+          {helperText && (
+            <Typography variant="body2" color="text.secondary">
+              {helperText}
+            </Typography>
+          )}
+          {actions}
+        </Stack>
+      )}
+
+      {metadata && (
+        <Stack spacing={1}>
+          <Divider />
+          <Box>{metadata}</Box>
+        </Stack>
+      )}
+    </Box>
+  );
+};
+
+export default QuestionShell;
diff --git a/formulus-formplayer/src/SignatureQuestionRenderer.tsx b/formulus-formplayer/src/SignatureQuestionRenderer.tsx
index 974f2dba0..b023d3ee8 100644
--- a/formulus-formplayer/src/SignatureQuestionRenderer.tsx
+++ b/formulus-formplayer/src/SignatureQuestionRenderer.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Button, Typography, Box, Alert, CircularProgress, Paper, IconButton } from '@mui/material';
+import { Button, Typography, Box, CircularProgress, Paper, IconButton } from '@mui/material';
 import {
   Draw as SignatureIcon,
   Delete as DeleteIcon,
@@ -9,6 +9,7 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { ControlProps, rankWith, formatIs } from '@jsonforms/core';
 import FormulusClient from './FormulusInterface';
 import { SignatureResult } from './FormulusInterfaceDefinition';
+import QuestionShell from './QuestionShell';
 
 // Tester function - determines when this renderer should be used
 export const signatureQuestionTester = rankWith(
@@ -227,39 +228,28 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
   }
 
   const hasData = data && typeof data === 'object' && data.type === 'signature';
-  const hasError = errors && (Array.isArray(errors) ? errors.length > 0 : errors.length > 0);
+  const validationError = errors && (Array.isArray(errors) ? errors.join(', ') : errors);
 
   return (
-    <Box sx={{ mb: 2 }}>
-      {/* Title and Description */}
-      {schema.title && (
-        <Typography variant="subtitle1" sx={{ mb: 1, fontWeight: 500 }}>
-          {schema.title}
-        </Typography>
-      )}
-      {schema.description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {schema.description}
-        </Typography>
-      )}
-
-      {/* Error Display */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-      )}
-
-      {/* Validation Errors */}
-      {hasError && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {Array.isArray(errors) ? errors.join(', ') : errors}
-        </Alert>
-      )}
-
+    <QuestionShell
+      title={schema.title}
+      description={schema.description}
+      required={Boolean((uischema as any)?.options?.required ?? (schema as any)?.options?.required)}
+      error={error || validationError}
+      helperText="Capture a clear signature. You can use native capture or draw on canvas."
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ mt: 1, p: 1, bgcolor: 'info.light', borderRadius: 1 }}>
+            <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
+              Debug: fieldId="{fieldId}", path="{path}", format="signature"
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {/* Canvas Signature Pad */}
       {showCanvas && (
-        <Paper sx={{ p: 2, mb: 2 }}>
+        <Paper sx={{ p: 2 }}>
           <Typography variant="subtitle2" sx={{ mb: 2 }}>
             Draw your signature below:
           </Typography>
@@ -325,7 +315,7 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
 
       {/* Action Buttons */}
       {!showCanvas && (
-        <Box sx={{ mb: 2 }}>
+        <Box>
           <Button
             variant="contained"
             startIcon={isCapturing ? <CircularProgress size={20} /> : <SignatureIcon />}
@@ -389,16 +379,7 @@ const SignatureQuestionRenderer: React.FC<ControlProps> = ({
           </Box>
         </Paper>
       )}
-
-      {/* Development Debug Info */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: 'info.light', borderRadius: 1 }}>
-          <Typography variant="caption" sx={{ fontFamily: 'monospace' }}>
-            Debug: fieldId="{fieldId}", path="{path}", format="signature"
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/VideoQuestionRenderer.tsx b/formulus-formplayer/src/VideoQuestionRenderer.tsx
index 6a9e8c37b..22afcc533 100644
--- a/formulus-formplayer/src/VideoQuestionRenderer.tsx
+++ b/formulus-formplayer/src/VideoQuestionRenderer.tsx
@@ -1,17 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { rankWith, ControlProps, formatIs } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import {
-  Button,
-  Typography,
-  Box,
-  Card,
-  CardContent,
-  Chip,
-  Alert,
-  Grid,
-  Divider,
-} from '@mui/material';
+import { Button, Typography, Box, Card, CardContent, Chip, Grid, Divider } from '@mui/material';
 import {
   Videocam as VideocamIcon,
   PlayArrow as PlayIcon,
@@ -21,6 +11,7 @@ import {
   Delete as DeleteIcon,
   VideoFile as VideoFileIcon,
 } from '@mui/icons-material';
+import QuestionShell from './QuestionShell';
 // Note: The shared Formulus interface v1.1.0 no longer exposes a
 // requestVideo() API. This renderer therefore does not actively
 // trigger native video recording anymore. It can still display
@@ -129,36 +120,34 @@ const VideoQuestionRenderer: React.FC<VideoQuestionRendererProps> = (props) => {
   const isDisabled = !enabled;
 
   return (
-    <Box sx={{ mb: 2 }}>
-      {/* Field Label */}
-      <Typography variant="h6" sx={{ mb: 1, fontWeight: 500 }}>
-        {schema.title || 'Video Recording'}
-      </Typography>
-
-      {/* Field Description */}
-      {schema.description && (
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {schema.description}
-        </Typography>
-      )}
-
-      {/* Error Display */}
-      {error && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
+    <QuestionShell
+      title={schema.title || 'Video Recording'}
+      description={schema.description}
+      required={Boolean(
+        (props.uischema as any)?.options?.required ?? (schema as any)?.options?.required,
       )}
-
-      {/* Validation Errors */}
-      {hasValidationErrors && (
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {Array.isArray(errors) ? errors.map((error: any) => error.message).join(', ') : errors}
-        </Alert>
-      )}
-
+      error={
+        error ||
+        (hasValidationErrors
+          ? Array.isArray(errors)
+            ? errors.map((error: any) => error.message || String(error)).join(', ')
+            : errors
+          : null)
+      }
+      helperText="Capture a video if required. Current app version may not support recording."
+      metadata={
+        process.env.NODE_ENV === 'development' ? (
+          <Box sx={{ mt: 1, p: 1, bgcolor: 'grey.100', borderRadius: 1 }}>
+            <Typography variant="caption" color="text.secondary">
+              Debug - Path: {path} | Data: {JSON.stringify(data)}
+            </Typography>
+          </Box>
+        ) : undefined
+      }
+    >
       {/* Video Display or Record Button */}
       {videoData ? (
-        <Card variant="outlined" sx={{ mb: 2 }}>
+        <Card variant="outlined">
           <CardContent>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
               <VideoFileIcon color="primary" sx={{ mr: 1 }} />
@@ -316,16 +305,7 @@ const VideoQuestionRenderer: React.FC<VideoQuestionRendererProps> = (props) => {
           </Typography>
         </Box>
       )}
-
-      {/* Debug Information (only in development) */}
-      {process.env.NODE_ENV === 'development' && (
-        <Box sx={{ mt: 2, p: 1, bgcolor: 'grey.100', borderRadius: 1 }}>
-          <Typography variant="caption" color="text.secondary">
-            Debug - Path: {path} | Data: {JSON.stringify(data)}
-          </Typography>
-        </Box>
-      )}
-    </Box>
+    </QuestionShell>
   );
 };
 
diff --git a/formulus-formplayer/src/material-wrappers.tsx b/formulus-formplayer/src/material-wrappers.tsx
new file mode 100644
index 000000000..7cd85b69d
--- /dev/null
+++ b/formulus-formplayer/src/material-wrappers.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { isEnumControl, RankedTester, rankWith, ControlProps } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import {
+  MaterialTextControl,
+  materialTextControlTester,
+  MaterialNumberControl,
+  materialNumberControlTester,
+  MaterialIntegerControl,
+  materialIntegerControlTester,
+  MaterialDateControl,
+  materialDateControlTester,
+  MaterialDateTimeControl,
+  materialDateTimeControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
+  MaterialEnumControl,
+  materialEnumControlTester,
+  MaterialOneOfEnumControl,
+  materialOneOfEnumControlTester,
+  MaterialRadioGroupControl,
+  materialRadioGroupControlTester,
+} from '@jsonforms/material-renderers';
+import { Card, CardActionArea, CardContent, Typography, Box } from '@mui/material';
+import QuestionShell from './QuestionShell';
+
+type AnyControlProps = ControlProps & { errors?: string };
+
+const wrapWithShell =
+  (Inner: React.ComponentType<any>) =>
+  (props: ControlProps): React.ReactElement => {
+    const { schema, uischema, errors } = props;
+    const label = (uischema as any)?.label || schema.title;
+    const description = schema.description;
+    const required = Boolean((uischema as any)?.options?.required ?? (schema as any)?.options?.required);
+
+    return (
+      <QuestionShell title={label} description={description} required={required} error={errors}>
+        <Inner {...(props as any)} />
+      </QuestionShell>
+    );
+  };
+
+const cardEnumControlTester: RankedTester = rankWith(6, isEnumControl);
+
+const CardEnumControl = (props: AnyControlProps) => {
+  const { data, handleChange, path, schema, uischema, errors, enabled = true } = props;
+  const label = (uischema as any)?.label || schema.title;
+  const description = schema.description;
+  const required = Boolean((uischema as any)?.options?.required ?? (schema as any)?.options?.required);
+
+  const options =
+    schema.oneOf?.map((o: any) => ({
+      value: o.const ?? o.enum?.[0] ?? o,
+      label: o.title ?? String(o.const ?? o),
+    })) || (schema.enum || []).map((v: any) => ({ value: v, label: String(v) }));
+
+  return (
+    <QuestionShell title={label} description={description} required={required} error={errors}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+        {options.map((opt) => {
+          const selected = data === opt.value;
+          return (
+            <Card
+              key={String(opt.value)}
+              variant={selected ? 'elevation' : 'outlined'}
+              sx={{
+                borderColor: selected ? 'primary.main' : 'divider',
+                boxShadow: selected ? 3 : 0,
+              }}
+            >
+              <CardActionArea
+                disabled={!enabled}
+                onClick={() => handleChange(path, opt.value)}
+                sx={{ p: 1.5 }}
+              >
+                <CardContent sx={{ py: 0.5, '&:last-child': { pb: 0.5 } }}>
+                  <Typography variant="subtitle1" sx={{ fontWeight: selected ? 700 : 500 }}>
+                    {opt.label}
+                  </Typography>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+          );
+        })}
+      </Box>
+    </QuestionShell>
+  );
+};
+
+export const shellMaterialRenderers = [
+  {
+    tester: materialTextControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialTextControl)),
+  },
+  {
+    tester: materialNumberControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialNumberControl)),
+  },
+  {
+    tester: materialIntegerControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialIntegerControl)),
+  },
+  {
+    tester: materialDateControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialDateControl)),
+  },
+  {
+    tester: materialDateTimeControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialDateTimeControl)),
+  },
+  {
+    tester: materialTimeControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialTimeControl)),
+  },
+  // Card-style select/oneOf/radio
+  { tester: cardEnumControlTester, renderer: withJsonFormsControlProps(CardEnumControl) },
+  { tester: materialEnumControlTester, renderer: withJsonFormsControlProps(wrapWithShell(MaterialEnumControl)) },
+  {
+    tester: materialOneOfEnumControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialOneOfEnumControl)),
+  },
+  {
+    tester: materialRadioGroupControlTester,
+    renderer: withJsonFormsControlProps(wrapWithShell(MaterialRadioGroupControl)),
+  },
+];
diff --git a/formulus-formplayer/src/theme.ts b/formulus-formplayer/src/theme.ts
index 48529cc85..837e68fff 100644
--- a/formulus-formplayer/src/theme.ts
+++ b/formulus-formplayer/src/theme.ts
@@ -142,6 +142,14 @@ const themeOptions: ThemeOptions = {
     borderRadius: parsePx(tokens.border.radius.lg), // 12px - Material Design 3 default
   },
   components: {
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          width: '100%',
+          marginBottom: parsePx(tokens.spacing[4]),
+        },
+      },
+    },
     // Button styling - Material Design 3 with ODE tokens
     MuiButton: {
       styleOverrides: {
@@ -199,6 +207,8 @@ const themeOptions: ThemeOptions = {
     MuiTextField: {
       styleOverrides: {
         root: {
+          width: '100%',
+          marginBottom: parsePx(tokens.spacing[4]),
           '& .MuiOutlinedInput-root': {
             borderRadius: parsePx(tokens.border.radius.sm), // 4px - Material Design 3 text field
             backgroundColor: 'transparent',

From 01f577341024479decebb00e34bc7053368481d5 Mon Sep 17 00:00:00 2001
From: Najuna Brian <najuna.dev@gmail.com>
Date: Sat, 20 Dec 2025 07:38:03 +0300
Subject: [PATCH 2/3] feat(formplayer): soft hint for missing required fields

---
 .../src/SwipeLayoutRenderer.tsx               | 85 +++++++++++++++++--
 1 file changed, 78 insertions(+), 7 deletions(-)

diff --git a/formulus-formplayer/src/SwipeLayoutRenderer.tsx b/formulus-formplayer/src/SwipeLayoutRenderer.tsx
index d5734ba42..a1d1e3b9d 100644
--- a/formulus-formplayer/src/SwipeLayoutRenderer.tsx
+++ b/formulus-formplayer/src/SwipeLayoutRenderer.tsx
@@ -29,6 +29,39 @@ export const groupAsSwipeLayoutTester: RankedTester = rankWith(
   isGroupElement,
 );
 
+type LayoutElement = any;
+
+const isControlElement = (el: any) => el && typeof el === 'object' && el.type === 'Control';
+
+const extractScopes = (elements: LayoutElement[]): string[] => {
+  const scopes: string[] = [];
+  elements.forEach((el) => {
+    if (isControlElement(el) && el.scope) {
+      scopes.push(el.scope);
+    }
+    if (Array.isArray(el?.elements)) {
+      scopes.push(...extractScopes(el.elements));
+    }
+  });
+  return scopes;
+};
+
+const isValueEmpty = (value: any) => {
+  if (value === undefined || value === null) return true;
+  if (typeof value === 'string') return value.trim().length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') return Object.keys(value).length === 0;
+  return false;
+};
+
+const getRequiredKeys = (schema: any): Set<string> => {
+  const req = schema?.required;
+  if (Array.isArray(req)) {
+    return new Set(req.map((key: string) => `#/properties/${key}`));
+  }
+  return new Set();
+};
+
 const SwipeLayoutRenderer = ({
   schema,
   uischema,
@@ -42,6 +75,7 @@ const SwipeLayoutRenderer = ({
   onPageChange,
 }: SwipeLayoutProps) => {
   const [isNavigating, setIsNavigating] = useState(false);
+  const [navError, setNavError] = useState<string | null>(null);
 
   // Handle both SwipeLayout and Group elements
   // Use type assertion to avoid TypeScript errors
@@ -61,11 +95,8 @@ const SwipeLayoutRenderer = ({
   const navigateToPage = useCallback(
     (newPage: number) => {
       if (isNavigating) return;
-
       setIsNavigating(true);
       onPageChange(newPage);
-
-      // Add a small delay before allowing next navigation
       setTimeout(() => {
         setIsNavigating(false);
       }, 100);
@@ -73,9 +104,37 @@ const SwipeLayoutRenderer = ({
     [isNavigating, onPageChange],
   );
 
+  const requiredSet = useMemo(() => getRequiredKeys(schema), [schema]);
+  const pageHasMissingRequired = useMemo(() => {
+    const currentLayout = layouts[currentPage];
+    if (!currentLayout) return false;
+    const scopes = extractScopes(currentLayout.elements || []);
+    for (const scope of scopes) {
+      if (requiredSet.has(scope)) {
+        const key = scope.replace('#/properties/', '');
+        const value = (data as any)?.[key];
+        if (isValueEmpty(value)) return true;
+      }
+    }
+    return false;
+  }, [currentPage, data, layouts, requiredSet]);
+
+  const guardedNavigate = useCallback(
+    (targetPage: number) => {
+      // Soft hint only; do not block navigation
+      if (targetPage !== currentPage) {
+        setNavError(
+          pageHasMissingRequired ? 'Required fields on this page are still empty.' : null,
+        );
+      }
+      navigateToPage(targetPage);
+    },
+    [currentPage, navigateToPage, pageHasMissingRequired],
+  );
+
   const handlers = useSwipeable({
-    onSwipedLeft: () => navigateToPage(Math.min(currentPage + 1, layouts.length - 1)),
-    onSwipedRight: () => navigateToPage(Math.max(currentPage - 1, 0)),
+    onSwipedLeft: () => guardedNavigate(Math.min(currentPage + 1, layouts.length - 1)),
+    onSwipedRight: () => guardedNavigate(Math.max(currentPage - 1, 0)),
   });
 
   // Calculate total screens including Finalize (so progress reaches 100% only on Finalize)
@@ -105,7 +164,7 @@ const SwipeLayoutRenderer = ({
       previousButton={
         currentPage > 0
           ? {
-              onClick: () => navigateToPage(Math.max(currentPage - 1, 0)),
+              onClick: () => guardedNavigate(Math.max(currentPage - 1, 0)),
               disabled: isNavigating,
             }
           : undefined
@@ -113,7 +172,7 @@ const SwipeLayoutRenderer = ({
       nextButton={
         currentPage < layouts.length - 1
           ? {
-              onClick: () => navigateToPage(Math.min(currentPage + 1, layouts.length - 1)),
+              onClick: () => guardedNavigate(Math.min(currentPage + 1, layouts.length - 1)),
               disabled: isNavigating,
             }
           : undefined
@@ -133,6 +192,18 @@ const SwipeLayoutRenderer = ({
             cells={cells}
           />
         )}
+        {navError && (
+          <div
+            style={{
+              marginTop: '12px',
+              color: '#c77800',
+              fontSize: '0.95rem',
+              fontWeight: 600,
+            }}
+          >
+            {navError}
+          </div>
+        )}
       </div>
     </FormLayout>
   );

From 33a9e767af2e702e3f74c47aaeb81dc21dff4028 Mon Sep 17 00:00:00 2001
From: Najuna Brian <najuna.dev@gmail.com>
Date: Sat, 20 Dec 2025 08:23:45 +0300
Subject: [PATCH 3/3] feat(formplayer): action-first media renderers with clear
 previews

---
 .../src/AudioQuestionRenderer.tsx             |  42 +++----
 .../src/FileQuestionRenderer.tsx              | 107 ++++++++++--------
 .../src/GPSQuestionRenderer.tsx               |  53 ++++-----
 .../src/PhotoQuestionRenderer.tsx             |  60 +++++-----
 .../src/VideoQuestionRenderer.tsx             |  49 ++++----
 5 files changed, 157 insertions(+), 154 deletions(-)

diff --git a/formulus-formplayer/src/AudioQuestionRenderer.tsx b/formulus-formplayer/src/AudioQuestionRenderer.tsx
index bf6d59746..9ec0bc8df 100644
--- a/formulus-formplayer/src/AudioQuestionRenderer.tsx
+++ b/formulus-formplayer/src/AudioQuestionRenderer.tsx
@@ -274,6 +274,27 @@ const AudioQuestionRenderer: React.FC<AudioQuestionRendererProps> = ({
         ) : (
           // Playback State
           <Box>
+            <Box sx={{ display: 'flex', gap: 1, mb: 2, justifyContent: 'center' }}>
+              <Button
+                variant="outlined"
+                startIcon={<RefreshIcon />}
+                onClick={handleRecord}
+                disabled={isLoading}
+                size="small"
+              >
+                Re-record
+              </Button>
+              <Button
+                variant="outlined"
+                color="error"
+                startIcon={<DeleteIcon />}
+                onClick={handleDelete}
+                size="small"
+              >
+                Delete
+              </Button>
+            </Box>
+
             {/* Audio element (hidden) */}
             <audio ref={audioRef} src={audioData.uri} preload="metadata" />
 
@@ -346,27 +367,6 @@ const AudioQuestionRenderer: React.FC<AudioQuestionRendererProps> = ({
               </IconButton>
             </Box>
 
-            {/* Action Buttons */}
-            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
-              <Button
-                variant="outlined"
-                startIcon={<RefreshIcon />}
-                onClick={handleRecord}
-                disabled={isLoading}
-              >
-                Re-record
-              </Button>
-
-              <Button
-                variant="outlined"
-                color="error"
-                startIcon={<DeleteIcon />}
-                onClick={handleDelete}
-              >
-                Delete
-              </Button>
-            </Box>
-
             {/* Development Info */}
             {process.env.NODE_ENV === 'development' && (
               <Box sx={{ mt: 2, p: 1, backgroundColor: 'grey.100', borderRadius: 1 }}>
diff --git a/formulus-formplayer/src/FileQuestionRenderer.tsx b/formulus-formplayer/src/FileQuestionRenderer.tsx
index 32a0b20d0..5cd8495e2 100644
--- a/formulus-formplayer/src/FileQuestionRenderer.tsx
+++ b/formulus-formplayer/src/FileQuestionRenderer.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react';
-import { Button, Typography, Box, CircularProgress, Paper, IconButton, Chip } from '@mui/material';
+import { Button, Typography, Box, CircularProgress, Paper, Chip } from '@mui/material';
 import {
   AttachFile as FileIcon,
   Delete as DeleteIcon,
@@ -168,64 +168,75 @@ const FileQuestionRenderer: React.FC<ControlProps> = ({
       {/* File Display */}
       {hasData && (
         <Paper sx={{ p: 2, bgcolor: 'grey.50' }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-            <Box sx={{ flex: 1 }}>
-              <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                {getFileIcon(data.mimeType)}
-                <Box sx={{ ml: 2, flex: 1 }}>
-                  <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
-                    {data.filename}
-                  </Typography>
-                  <Box sx={{ display: 'flex', gap: 1, mt: 1, flexWrap: 'wrap' }}>
-                    <Chip
-                      label={getFileTypeLabel(data.mimeType)}
-                      size="small"
-                      color="primary"
-                      variant="outlined"
-                    />
-                    <Chip label={formatFileSize(data.size)} size="small" variant="outlined" />
-                    {data.metadata.extension && (
-                      <Chip
-                        label={`.${data.metadata.extension.toUpperCase()}`}
-                        size="small"
-                        variant="outlined"
-                      />
-                    )}
-                  </Box>
-                </Box>
-              </Box>
-
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
-                <strong>URI:</strong> {data.uri}
-              </Typography>
-
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
-                <strong>MIME Type:</strong> {data.mimeType}
-              </Typography>
-
-              {data.metadata.originalPath && (
-                <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
-                  <strong>Original Path:</strong> {data.metadata.originalPath}
-                </Typography>
-              )}
-
-              {/* Replace File Button */}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              mb: 2,
+            }}
+          >
+            <Box sx={{ display: 'flex', gap: 1 }}>
               <Button
                 variant="outlined"
                 startIcon={<FileIcon />}
                 onClick={handleFileSelection}
                 disabled={!enabled || isSelecting}
                 size="small"
-                sx={{ mt: 2 }}
               >
-                Replace File
+                Replace
+              </Button>
+              <Button
+                variant="outlined"
+                color="error"
+                startIcon={<DeleteIcon />}
+                onClick={handleDelete}
+                disabled={!enabled}
+                size="small"
+              >
+                Delete
               </Button>
             </Box>
+          </Box>
 
-            <IconButton onClick={handleDelete} disabled={!enabled} size="small" sx={{ ml: 1 }}>
-              <DeleteIcon />
-            </IconButton>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+            {getFileIcon(data.mimeType)}
+            <Box sx={{ ml: 2, flex: 1 }}>
+              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+                {data.filename}
+              </Typography>
+              <Box sx={{ display: 'flex', gap: 1, mt: 1, flexWrap: 'wrap' }}>
+                <Chip
+                  label={getFileTypeLabel(data.mimeType)}
+                  size="small"
+                  color="primary"
+                  variant="outlined"
+                />
+                <Chip label={formatFileSize(data.size)} size="small" variant="outlined" />
+                {data.metadata.extension && (
+                  <Chip
+                    label={`.${data.metadata.extension.toUpperCase()}`}
+                    size="small"
+                    variant="outlined"
+                  />
+                )}
+              </Box>
+            </Box>
           </Box>
+
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+            <strong>URI:</strong> {data.uri}
+          </Typography>
+
+          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
+            <strong>MIME Type:</strong> {data.mimeType}
+          </Typography>
+
+          {data.metadata.originalPath && (
+            <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
+              <strong>Original Path:</strong> {data.metadata.originalPath}
+            </Typography>
+          )}
         </Paper>
       )}
     </QuestionShell>
diff --git a/formulus-formplayer/src/GPSQuestionRenderer.tsx b/formulus-formplayer/src/GPSQuestionRenderer.tsx
index 3e12ed97b..07e4e9396 100644
--- a/formulus-formplayer/src/GPSQuestionRenderer.tsx
+++ b/formulus-formplayer/src/GPSQuestionRenderer.tsx
@@ -120,14 +120,38 @@ const GPSQuestionRenderer: React.FC<GPSQuestionRendererProps> = (props) => {
       {locationData ? (
         <Card variant="outlined">
           <CardContent>
+            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  startIcon={<RefreshIcon />}
+                  onClick={handleCaptureLocation}
+                  disabled={isDisabled}
+                  size="small"
+                >
+                  Re-capture
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="error"
+                  startIcon={<DeleteIcon />}
+                  onClick={handleDeleteLocation}
+                  disabled={isDisabled}
+                  size="small"
+                >
+                  Delete
+                </Button>
+              </Box>
+              <Box sx={{ ml: 'auto' }}>
+                <Chip label="GPS" color="success" size="small" icon={<MyLocationIcon />} />
+              </Box>
+            </Box>
+
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
               <LocationIcon color="primary" sx={{ mr: 1 }} />
               <Typography variant="h6" component="div">
                 Location Captured
               </Typography>
-              <Box sx={{ ml: 'auto' }}>
-                <Chip label="GPS" color="success" size="small" icon={<MyLocationIcon />} />
-              </Box>
             </Box>
 
             <Grid container spacing={2}>
@@ -183,29 +207,6 @@ const GPSQuestionRenderer: React.FC<GPSQuestionRendererProps> = (props) => {
                 </Typography>
               </Grid>
             </Grid>
-
-            {/* Action Buttons */}
-            <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
-              <Button
-                variant="outlined"
-                startIcon={<RefreshIcon />}
-                onClick={handleCaptureLocation}
-                disabled={isDisabled}
-                size="small"
-              >
-                Re-capture
-              </Button>
-              <Button
-                variant="outlined"
-                color="error"
-                startIcon={<DeleteIcon />}
-                onClick={handleDeleteLocation}
-                disabled={isDisabled}
-                size="small"
-              >
-                Delete
-              </Button>
-            </Box>
           </CardContent>
         </Card>
       ) : (
diff --git a/formulus-formplayer/src/PhotoQuestionRenderer.tsx b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
index c37c05ff8..464b2d7b1 100644
--- a/formulus-formplayer/src/PhotoQuestionRenderer.tsx
+++ b/formulus-formplayer/src/PhotoQuestionRenderer.tsx
@@ -210,38 +210,36 @@ const PhotoQuestionRenderer: React.FC<PhotoQuestionProps> = ({
       }
     >
       {currentPhotoData && currentPhotoData.filename && photoUrl ? (
-        <Card sx={{ maxWidth: 400 }}>
-          <CardMedia
-            component="img"
-            height="200"
-            image={photoUrl}
-            alt="Captured photo"
-            sx={{ objectFit: 'cover' }}
-          />
-          <CardContent>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <Typography variant="body2" color="text.secondary">
-                File: {currentPhotoData.filename}
-              </Typography>
-              <Box>
-                <IconButton
-                  onClick={handleTakePhoto}
-                  disabled={!enabled || isLoading}
-                  color="primary"
-                  title="Retake photo"
-                >
-                  <Refresh />
-                </IconButton>
-                <IconButton
-                  onClick={handleDeletePhoto}
-                  disabled={!enabled}
-                  color="error"
-                  title="Delete photo"
-                >
-                  <Delete />
-                </IconButton>
-              </Box>
+        <Card sx={{ maxWidth: 420 }}>
+          <CardContent sx={{ pb: 1 }}>
+            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end', mb: 1 }}>
+              <IconButton
+                onClick={handleTakePhoto}
+                disabled={!enabled || isLoading}
+                color="primary"
+                title="Retake photo"
+              >
+                <Refresh />
+              </IconButton>
+              <IconButton
+                onClick={handleDeletePhoto}
+                disabled={!enabled}
+                color="error"
+                title="Delete photo"
+              >
+                <Delete />
+              </IconButton>
             </Box>
+            <CardMedia
+              component="img"
+              height="220"
+              image={photoUrl}
+              alt="Captured photo"
+              sx={{ objectFit: 'cover', borderRadius: 1 }}
+            />
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+              File: {currentPhotoData.filename}
+            </Typography>
           </CardContent>
         </Card>
       ) : (
diff --git a/formulus-formplayer/src/VideoQuestionRenderer.tsx b/formulus-formplayer/src/VideoQuestionRenderer.tsx
index 22afcc533..b39cb1007 100644
--- a/formulus-formplayer/src/VideoQuestionRenderer.tsx
+++ b/formulus-formplayer/src/VideoQuestionRenderer.tsx
@@ -9,7 +9,6 @@ import {
   Stop as StopIcon,
   Refresh as RefreshIcon,
   Delete as DeleteIcon,
-  VideoFile as VideoFileIcon,
 } from '@mui/icons-material';
 import QuestionShell from './QuestionShell';
 // Note: The shared Formulus interface v1.1.0 no longer exposes a
@@ -150,10 +149,27 @@ const VideoQuestionRenderer: React.FC<VideoQuestionRendererProps> = (props) => {
         <Card variant="outlined">
           <CardContent>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-              <VideoFileIcon color="primary" sx={{ mr: 1 }} />
-              <Typography variant="h6" component="div">
-                Video Recorded
-              </Typography>
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  startIcon={<RefreshIcon />}
+                  onClick={handleRecordVideo}
+                  disabled={isDisabled}
+                  size="small"
+                >
+                  Re-record
+                </Button>
+                <Button
+                  variant="outlined"
+                  color="error"
+                  startIcon={<DeleteIcon />}
+                  onClick={handleDeleteVideo}
+                  disabled={isDisabled}
+                  size="small"
+                >
+                  Delete
+                </Button>
+              </Box>
               <Box sx={{ ml: 'auto' }}>
                 <Chip
                   label={videoData.metadata.format.toUpperCase()}
@@ -254,29 +270,6 @@ const VideoQuestionRenderer: React.FC<VideoQuestionRendererProps> = (props) => {
                 </Typography>
               </Grid>
             </Grid>
-
-            {/* Action Buttons */}
-            <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
-              <Button
-                variant="outlined"
-                startIcon={<RefreshIcon />}
-                onClick={handleRecordVideo}
-                disabled={isDisabled}
-                size="small"
-              >
-                Re-record
-              </Button>
-              <Button
-                variant="outlined"
-                color="error"
-                startIcon={<DeleteIcon />}
-                onClick={handleDeleteVideo}
-                disabled={isDisabled}
-                size="small"
-              >
-                Delete
-              </Button>
-            </Box>
           </CardContent>
         </Card>
       ) : (