Layout Tools

src/components/fields/BaseField.tsx

@@ -38,7 +38,7 @@ export const BaseField = <TValue,>({
   // But some element we need for the ref for the scroll into
   return (
     <FieldContextProvider value={{ id: fieldId, label, defaultValue, value, onChange }}>
-      <Box ref={fieldEl} sx={{ display: hidden ? "none" : undefined }}>
+      <Box ref={fieldEl} sx={{ display: hidden ? "none" : undefined }} miw={{ base: 200, lg: 300 }}>
         {children}
       </Box>
     </FieldContextProvider>

src/components/template/Group.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid } from "@mantine/core"
+import { Box, Flex } from "@mantine/core"
 import { ReactNode } from "react"
 import { GroupContextProvider } from "~/contexts/GroupContext"
 import { InputLabel } from "../inputs/InputLabel"
@@ -37,7 +37,7 @@ export const Group = ({ label, extras, disabled, hidden, children }: GridGroupPr
             <InputLabel label={label} extras={extras} />
           </Box>
         )}
-        <Grid>{children}</Grid>
+        <Flex gap={{ base: "sm", sm: "lg" }}>{children}</Flex>
       </Box>
     </GroupContextProvider>
   )

src/components/template/Hint.tsx

@@ -12,6 +12,7 @@ export const Hint = ({ level, children }: HintProps) => (
   <Alert
     icon={level === "warning" ? <WarningIcon /> : <InfoIcon />}
     color={level === "warning" ? "yellow" : "blue"}
+    my="sm"
   >
     {children}
   </Alert>

src/components/template/Layout.tsx

@@ -9,7 +9,12 @@ interface LayoutProps {
 }
 
 export const Layout = ({ direction, justify, nowrap, children }: LayoutProps) => (
-  <Flex direction={direction} justify={justify} wrap={nowrap ? "nowrap" : "wrap"}>
+  <Flex
+    direction={direction}
+    justify={justify}
+    wrap={nowrap ? "nowrap" : "wrap"}
+    gap={{ base: "sm", sm: "lg" }}
+  >
     {children}
   </Flex>
 )

src/tools/fleischner2017/Fleischner2017Structure.tsx

@@ -3,6 +3,7 @@ import { SingleChoiceField } from "~/components/fields/SingleChoiceField"
 import { Group } from "~/components/template/Group"
 import { Hint } from "~/components/template/Hint"
 import { Info } from "~/components/template/Info"
+import { Layout } from "~/components/template/Layout"
 import { Section } from "~/components/template/Section"
 import { Structure } from "~/components/template/Structure"
 import { useMicroTranslation } from "~/hooks/useMicroTranslation"
@@ -36,7 +37,7 @@ export const Fleischner2017Structure = () => {
             defaultValue={0}
           />
         </Group>
-        <Group>
+        <Layout>
           <SingleChoiceField
             id="structure"
             label={t("Fleischner2017.inputLabelStructure")}
@@ -67,7 +68,7 @@ export const Fleischner2017Structure = () => {
             extras={<Info>{riskFactors}</Info>}
             defaultValue="no"
           />
-        </Group>
+        </Layout>
         <Hint level="warning">{t("Fleischner2017.hintApplicability")}</Hint>
       </Section>
     </Structure>

src/tools/gfr/GfrStructure.tsx

@@ -1,7 +1,7 @@
 import { NumberField } from "~/components/fields/NumberField"
 import { SingleChoiceField } from "~/components/fields/SingleChoiceField"
-import { Group } from "~/components/template/Group"
 import { Hint } from "~/components/template/Hint"
+import { Layout } from "~/components/template/Layout"
 import { Section } from "~/components/template/Section"
 import { Structure } from "~/components/template/Structure"
 import { useMicroTranslation } from "~/hooks/useMicroTranslation"
@@ -14,9 +14,14 @@ export const GfrStructure = () => {
     <Structure>
       <Section id="default" label="default">
         <Hint level="info">{t("Gfr.toolHint")}</Hint>
-        <NumberField label={t("Gfr.inputLabelAge")} id="age" min={0} />
-        <NumberField label={t("Gfr.inputLabelCreatinine")} id="creatinine" precision={2} min={0} />
-        <Group>
+        <Layout>
+          <NumberField label={t("Gfr.inputLabelAge")} id="age" min={0} />
+          <NumberField
+            label={t("Gfr.inputLabelCreatinine")}
+            id="creatinine"
+            precision={2}
+            min={0}
+          />
           <NumberField label={t("Gfr.inputLabelWeight")} id="weight" min={0} />
           <NumberField label={t("Gfr.inputLabelHeight")} id="height" min={0} />
           <SingleChoiceField
@@ -35,7 +40,7 @@ export const GfrStructure = () => {
               { value: "others", label: t("Gfr.optionEthnicityOthers") },
             ]}
           />
-        </Group>
+        </Layout>
       </Section>
     </Structure>
   )

src/tools/gfr/locales/de/gfr.ts

@@ -6,7 +6,7 @@ export default {
     toolTitle: "GFR Rechner",
     toolHint:
       "Berechnung der GFR für Erwachsene (CKD-EPI, Mayo, Cockcroft-Gault)  und Kinder (Schwartz (orig./rev.), Counahan-Barret).\n",
-    inputLabelAge: "Alter",
+    inputLabelAge: "Alter in Jahren",
     inputLabelCreatinine: "Serumkreatinin in mg/dl",
     inputLabelWeight: "Gewicht in kg",
     inputLabelHeight: "Größe in cm",

src/tools/gfr/locales/en/gfr.ts

@@ -6,7 +6,7 @@ export default {
     toolTitle: "GFR calculator",
     toolHint:
       "A tool to calculate the GFR for adults (CKD-EPI, Mayo, Cockcroft-Gault)  and children (Schwartz (orig./rev.), Counahan-Barret).\n",
-    inputLabelAge: "Age",
+    inputLabelAge: "Age in years",
     inputLabelCreatinine: "Creatinine in mg/dl",
     inputLabelWeight: "Weight in kg",
     inputLabelHeight: "Height in cm",

src/tools/sandbox/SandboxStructure.tsx

@@ -1,23 +1,27 @@
 import { DateField } from "~/components/fields/DateField"
 import { FreeTextField } from "~/components/fields/FreeTextField"
 import { NumberField } from "~/components/fields/NumberField"
+import { Group } from "~/components/template/Group"
+import { Hint } from "~/components/template/Hint"
 import { Section } from "~/components/template/Section"
 import { Structure } from "~/components/template/Structure"
 
 export const SandboxStructure = () => (
   <Structure>
     <Section label="default" id="default">
-      Sandbox
-      <DateField id="today" label="Today" />
-      <NumberField
-        id="number"
-        label="Random number"
-        defaultValue={0}
-        precision={0}
-        min={0}
-        max={100}
-      />
-      <FreeTextField id="text" label="Some text" />
+      <Hint>Just a tool to play with the layout and the functions of the fields.</Hint>
+      <Group label="Sandbox">
+        <DateField id="today" label="Today" />
+        <NumberField
+          id="number"
+          label="Random number"
+          defaultValue={0}
+          precision={0}
+          min={0}
+          max={100}
+        />
+        <FreeTextField id="text" label="Some text" />
+      </Group>
     </Section>
   </Structure>
 )