Feat: Arrange HR tiles horizontally (#1551)

* feat: arrange hr tiles horizontally

Updates the dashboard layout to display the heart rate monitor tiles in a horizontal row instead of a vertical stack. This is achieved by applying a flexbox layout to the container of the HR tiles.

The width of the tiles has also been adjusted to ensure they fit correctly with the new layout.

* feat: arrange hr tiles horizontally

Updates the dashboard layout to display the heart rate monitor tiles in a horizontal row instead of a vertical stack. This is achieved by applying a flexbox layout to the container of the HR tiles.

The width of the tiles has also been adjusted to ensure they fit correctly with the new layout.

---------

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

app/page.tsx

@@ -94,7 +94,13 @@ const Dashboard = () => {
         </Box>
 
         <Box
-          sx={{ flexGrow: 1, width: { xs: '100%', lg: 'calc(50% - 16px)' } }}
+          sx={{
+            flexGrow: 1,
+            width: { xs: '100%', lg: 'calc(50% - 16px)' },
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 2,
+          }}
         >
           <ErrorBoundary fallback={<ErrorFallback />}>
             <HrmConnectionPanel />

components/HrmConnectionPanel.tsx

@@ -125,7 +125,7 @@ const HrmConnectionPanel = () => {
           sx={{
             width: {
               xs: '100%',
-              sm: 'calc(50% - 12px)',
+              sm: 'calc(50% - 8px)', // Adjusted for 16px gap (gap: 2)
             },
           }}
         >