Increase number column width

So that numbers don't overflow their input elements so quickly.

Author: Erikvv

webtool/frontend/src/pages/rekentool/components/assets/battery.tsx

@@ -20,7 +20,7 @@ export const BatteryDisplay: FunctionComponent<{
                 <BatteryHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label><DivWithInfo data={titles["capacity_kWh"]} /></DataList.Label>
                     <DataList.Value>{battery.capacity_kWh} kWh</DataList.Value>

webtool/frontend/src/pages/rekentool/components/assets/biogas-generator.tsx

@@ -20,7 +20,7 @@ export const BiogasGeneratorDisplay: FunctionComponent<{
                 <BiogasGeneratorHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label><DivWithInfo data={titles["power_kW"]} /></DataList.Label>
                     <DataList.Value>{biogasGenerator.power_kW} kW</DataList.Value>

webtool/frontend/src/pages/rekentool/components/company/company-display.tsx

@@ -19,7 +19,7 @@ export const CompanyDisplay: FunctionComponent<{
                 <CompanyHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label>
                         <DivWithInfo data={titles["name"]} />

webtool/frontend/src/pages/rekentool/components/cost/cost-section.tsx

@@ -19,7 +19,7 @@ export const CostDisplay: FunctionComponent<{
     return (
         <div>
             <CostHeading />
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 {showCostPerKwh && (
                     <>
                         <DataList.Item>

webtool/frontend/src/pages/rekentool/components/heat-storage/heat-storage-display.tsx

@@ -18,7 +18,7 @@ export const HeatStorageDisplay: FunctionComponent<{
                 <HeatStorageHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label><DivWithInfo data={titles["storageMedium"]} /></DataList.Label>
                     <DataList.Value>{heatStorage.storageMedium}</DataList.Value>

webtool/frontend/src/pages/rekentool/components/household/household-display.tsx

@@ -17,7 +17,7 @@ export const HouseholdDisplay: FunctionComponent<{
                 <HouseholdHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label>
                         <DivWithInfo data={titles["type"]} />

webtool/frontend/src/pages/rekentool/components/info/titles.tsx

@@ -45,8 +45,10 @@ export const titles = {
     "type": {
         name: "type",
         title: "Omschrijving",
-        infoText: "Buurt of klantgroep waarmee de groep huishoudens benoemd wordt in een rapportage."
-        + "Je kunt bijvoorbeeld een groep maken met zonnepanelen en een zonder."
+        infoText: `
+            Buurt of klantgroep waarmee de groep huishoudens benoemd wordt in een rapportage.
+            Je kunt bijvoorbeeld een groep maken met zonnepanelen en een zonder.
+        `,
     },
     "households_n": {
         name: "households_n",

webtool/frontend/src/pages/rekentool/components/solarfarm/solarfarm-display.tsx

@@ -18,7 +18,7 @@ export const SolarFarmDisplay: FunctionComponent<{
                 <SolarFarmHeading />
                 <CardMenu onDelete={toDelete} onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label><DivWithInfo data={solarFarmTitles.nominalPower_kW} /></DataList.Label>
                     <DataList.Value>{solarFarm.nominalPower_kW} kW</DataList.Value>

webtool/frontend/src/pages/rekentool/components/styles.css

@@ -4,12 +4,12 @@
 
 .radix-grid {
   display: grid;
-  grid-template-columns: repeat(12, 0.1fr);
+  grid-template-columns: repeat(12, 1fr);
 }
 
 .form-label {
   margin-bottom: 4px;
-  grid-column: span 9;
+  grid-column: span 8;
 }
 
 .form-message {
@@ -20,15 +20,16 @@
 }
 
 .form-input {
-  grid-column: span 2;
+  grid-column: span 4;
   margin-bottom: 4px;
-  width: 100%;
+  /*width: 100%;*/
   padding: 8px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 14px;
   outline: none;
   transition: border-color 0.3s;
+  height: min-content;
 }
 
 .form-input:focus {

webtool/frontend/src/pages/rekentool/components/supplier-cost.tsx

@@ -40,7 +40,7 @@ const SupplierCostDisplay: FunctionComponent<{
                 <SupplierCostHeading />
                 <CardMenu onEdit={onEdit}/>
             </Flex>
-            <DataList.Root style={{gridTemplateColumns: "3fr 1fr"}}>
+            <DataList.Root style={{gridTemplateColumns: "2fr 1fr"}}>
                 <DataList.Item>
                     <DataList.Label>
                         <DivWithInfo data={titles["bufferPrice_eurpkWh"]} />