Format summaries to similar heights

package.json

@@ -1,6 +1,6 @@
 {
   "name": "diet-diary",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "private": true,
   "homepage": ".",
   "dependencies": {

src/components/FoodGroupLegend.tsx

@@ -5,7 +5,7 @@ import { Legend } from "./Legend";
 export const FoodGroupLegend = (props: { foodGroup: FoodGroup; }) => {
   const { foodGroup } = props;
   return (
-    <Legend>
+    <Legend className="d-flex flex-nowrap">
       <FoodGroupLabelBadge foodGroup={foodGroup} />{displayName(foodGroup)}
     </Legend>
   );

src/components/Legend.tsx

@@ -1,5 +1,11 @@
-export const Legend = (props: React.PropsWithChildren) => (
-  <div className="border-0 rounded">
+import _ from "lodash";
+
+interface Props extends React.PropsWithChildren {
+  className?: string;
+}
+
+export const Legend = (props: Props) => (
+  <div className={_.join(["border-0", "rounded", props.className], " ")}>
     {props.children}
   </div>
 );

src/components/day-page/DayPage.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 function DayPage(props: Props) {
   return (
-    <Container>
+    <Container fluid="md">
       <div>
         <div className="d-flex mb-2">
           <div className="flex-fill">

src/components/summary/BestChoiceComparisonChart.tsx

@@ -4,10 +4,12 @@ import numeral from "numeral";
 interface Props {
   bestChoice: number;
   others: number;
+  canvasHeight: number;
+  columnHeight: number;
 }
 
-function height(value: number, max: number) {
-  return value / max * 100;
+function height(value: number, max: number, columnHeight: number) {
+  return value / max * columnHeight;
 }
 
 function format(val: number) {
@@ -18,28 +20,27 @@ function offset(s: string) {
   return _.size(s) == 1 ? 5 : 0;
 }
 
-const CANVAS_HEIGHT = 120;
-const TEXT_HEIGHT = 5;
+const Y_TEXT_OFFSET = 2;
 
 export const BestChoiceComparisonChart = (props: Props) => {
-  const { bestChoice, others } = props;
+  const { bestChoice, others, canvasHeight, columnHeight } = props;
   const maxHeight = _.defaultTo(_.max([bestChoice, others, 10]), 10);
 
-  const bcHeight = height(bestChoice, maxHeight);
-  const bcY = CANVAS_HEIGHT - bcHeight;
+  const bcHeight = height(bestChoice, maxHeight, columnHeight);
+  const bcY = canvasHeight - bcHeight;
   const bcVal = format(bestChoice);
 
-  const othersHight = height(others, maxHeight);
-  const othersY = CANVAS_HEIGHT - othersHight;
+  const othersHight = height(others, maxHeight, columnHeight);
+  const othersY = canvasHeight - othersHight;
   const othersVal = format(others);
 
   return (
-    <svg width="51" height={CANVAS_HEIGHT} xmlns="http://www.w3.org/2000/svg">
+    <svg width="51" height={canvasHeight} xmlns="http://www.w3.org/2000/svg">
       <rect x={0} y={bcY} width="25" height={bcHeight} className="dd-chart-best-choice-column" />
-      <text x={2 + offset(bcVal)} y={bcY - TEXT_HEIGHT} fill="currentColor" >{bcVal}</text>
+      <text x={2 + offset(bcVal)} y={bcY - Y_TEXT_OFFSET} fill="currentColor" >{bcVal}</text>
 
       <rect x={26} y={othersY} width="25" height={othersHight} className="dd-chart-others-column" />
-      <text x={26 + offset(othersVal)} y={othersY - TEXT_HEIGHT} fill="currentColor" >{othersVal}</text>
-  </svg>
+      <text x={26 + offset(othersVal)} y={othersY - Y_TEXT_OFFSET} fill="currentColor" >{othersVal}</text>
+    </svg>
   );
 }

src/components/summary/BestChoiceComparisonSummary.tsx

@@ -10,7 +10,23 @@ interface Props {
 
 const ServingComparison = (props: { foodGroup: FoodGroup; bestChoice: number; others: number }) => (
   <div className="d-flex flex-column align-items-center">
-    <BestChoiceComparisonChart bestChoice={props.bestChoice} others={props.others} />
+    <div className="d-block d-sm-none">
+      <BestChoiceComparisonChart
+        bestChoice={props.bestChoice}
+        others={props.others}
+        canvasHeight={68}
+        columnHeight={46}
+      />
+    </div>
+    <div className="d-none d-sm-block">
+      <BestChoiceComparisonChart
+        bestChoice={props.bestChoice}
+        others={props.others}
+        canvasHeight={92}
+        columnHeight={70}
+      />
+    </div>
+
     <FoodGroupLabel foodGroup={props.foodGroup} />
   </div>
 )

src/components/summary/CalorieSummary.tsx

@@ -2,7 +2,7 @@ import { toIntString } from "../../model/calorieFunction";
 
 export const CalorieSummary = (props: { calories: number; }) => (
   <div className="d-flex flex-column justify-content-center border rounded bg-info text-white text-center p-1">
-    <div className="fs-1 dd-summary-total-width" >{toIntString(props.calories)}</div>
+    <div className="fs-1 dd-calorie-summary" >{toIntString(props.calories)}</div>
     <div>calories</div>
   </div>
 );

src/components/summary/ServingCell.tsx

@@ -19,7 +19,7 @@ interface Props {
 }
 
 export const ServingCell = (props: Props) => (
-  <div className="d-flex flex-column align-items-center m-1">
+  <div className="d-flex flex-column align-items-center">
     <CalorieText amount={props.amount} />
     <div className="d-flex align-items-center">
       {<TargetActionIcon foodGroup={props.foodGroup} />}

src/components/summary/ServingSummary.tsx

@@ -1,13 +1,33 @@
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
 import { Serving } from "../../model/Food";
 import { ServingCell } from "./ServingCell";
 
 export const ServingSummary = (props: { serving: Serving; }) => (
-  <div className="d-flex justify-content-between flex-fill flex-wrap">
-    <ServingCell foodGroup="vegetable" amount={props.serving.vegetable} />
-    <ServingCell foodGroup="fruit" amount={props.serving.fruit} />
-    <ServingCell foodGroup="carbohydrate" amount={props.serving.carbohydrate} />
-    <ServingCell foodGroup="proteinDiary" amount={props.serving.proteinDiary} />
-    <ServingCell foodGroup="fat" amount={props.serving.fat} />
-    <ServingCell foodGroup="sweet" amount={props.serving.sweet} />
-  </div>
+  <Row>
+    <Col>
+      <Row>
+        <ServingCell foodGroup="vegetable" amount={props.serving.vegetable} />
+      </Row>
+      <Row>
+        <ServingCell foodGroup="proteinDiary" amount={props.serving.proteinDiary} />
+      </Row>
+    </Col>
+    <Col>
+      <Row>
+        <ServingCell foodGroup="fruit" amount={props.serving.fruit} />
+      </Row>
+      <Row>
+        <ServingCell foodGroup="fat" amount={props.serving.fat} />
+      </Row>
+    </Col>
+    <Col>
+      <Row>
+        <ServingCell foodGroup="carbohydrate" amount={props.serving.carbohydrate} />
+      </Row>
+      <Row>
+        <ServingCell foodGroup="sweet" amount={props.serving.sweet} />
+      </Row>
+    </Col>
+  </Row>
 )

src/index.css

@@ -48,8 +48,8 @@ code {
   font-size: smaller;
 }
 
-.dd-summary-total-width {
-  min-width: 110px;
+.dd-calorie-summary {
+  min-width: 90px;
 }
 
 .dd-blue-color {