Skip to content

Commit

Permalink
Add simple fix to dynamically adjust field positions based on viewport
Browse files Browse the repository at this point in the history
  • Loading branch information
fongsean committed Sep 18, 2024
1 parent d83100c commit 5708ef0
Showing 1 changed file with 8 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
import DisplayInstructions from '../DisplayItem/DisplayInstructions';
import LabelWrapper from './ItemLabelWrapper';
import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
import Box from '@mui/material/Box';

interface ItemFieldGridProps {
children: ReactNode;
Expand All @@ -36,10 +37,15 @@ function ItemFieldGrid(props: ItemFieldGridProps) {

return (
<Grid container columnSpacing={4}>
<Grid item xs={4}>
<Grid item md={4} xs={12}>
<LabelWrapper qItem={qItem} readOnly={readOnly} />
</Grid>
<Grid item xs={8}>
<Box
sx={{
my: { xs: 1.5, md: 0 } // Adds padding for `xs` breakpoint and removes it for `md` and up
}}
/>
<Grid item md={8} xs={12}>
{children}
<DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
</Grid>
Expand Down

0 comments on commit 5708ef0

Please sign in to comment.