From 97e81c54ff4c9bb1d0122462293736d6e8f564ea Mon Sep 17 00:00:00 2001
From: sambokar <siddheshraze@gmail.com>
Date: Fri, 13 Sep 2024 15:15:51 -0400
Subject: [PATCH] minor visual change to enforce census date measurement
 rendering on different lines and keeping the sidebar from occupying half the
 screen

---
 frontend/components/sidebar.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/frontend/components/sidebar.tsx b/frontend/components/sidebar.tsx
index a4fc46fe..96465cbb 100644
--- a/frontend/components/sidebar.tsx
+++ b/frontend/components/sidebar.tsx
@@ -366,16 +366,14 @@ export default function Sidebar(props: SidebarProps) {
     const hasStartDate = startDate !== undefined && startDate !== null;
     const hasEndDate = endDate !== undefined && endDate !== null;
 
-    // Determine the message based on the presence of startDate and endDate
-    const dateMessage =
-      hasStartDate || hasEndDate ? (
-        <>
-          {hasStartDate && `— First Record: ${new Date(startDate).toDateString()}`}
-          {hasEndDate && ` — Last Record: ${new Date(endDate).toDateString()}`}
-        </>
-      ) : (
-        ' — No Measurements'
-      ); // Display "No Measurements" if both dates are missing
+    // Ensure dates are rendered in a block layout to stack them vertically
+    const dateMessage = (
+      <>
+        {hasStartDate && <Typography display="block">&mdash;{` First Record: ${new Date(startDate).toDateString()}`}</Typography>}
+        {hasEndDate && <Typography display="block">&mdash;{` Last Record: ${new Date(endDate).toDateString()}`}</Typography>}
+        {!hasStartDate && !hasEndDate && <Typography display="block">No Measurements</Typography>}
+      </>
+    );
 
     return (
       <Stack direction={'column'} alignItems={'start'}>