From 4658b699481a7fa6b8937b63de60552df8b6308d Mon Sep 17 00:00:00 2001
From: Aleksandar Toplek <aleksandar.toplek@gmail.com>
Date: Wed, 27 Dec 2023 22:17:35 +0100
Subject: [PATCH 1/3] fix(app): Widget size now stretched on mobile

Closes #666
---
 .../components/dashboards/DashboardView.tsx   | 11 +++++-----
 .../components/widgets/parts/WidgetCard.tsx   | 21 ++++++-------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/web/apps/app/components/dashboards/DashboardView.tsx b/web/apps/app/components/dashboards/DashboardView.tsx
index cf66bcde11..9479cf8413 100644
--- a/web/apps/app/components/dashboards/DashboardView.tsx
+++ b/web/apps/app/components/dashboards/DashboardView.tsx
@@ -66,17 +66,18 @@ function DashboardView(props: { dashboard: IDashboardModel, isEditing: boolean,
     }
 
     const WidgetComponent = isEditing ? DragableWidget : DisplayWidget;
-    const widgetSize = 78 + 8; // Widget is 76x76 + 2px for border + 8 spacing between widgets (2x4px)
-    const dashbaordPadding = 0;//48 + 109; // Has 24 x padding (109 nav width)
-    const numberOfColumns = Math.max(4, Math.floor((windowInnerWidth - dashbaordPadding) / widgetSize)); // When width is less than 400, set to quad column
+    const widgetSize = 1 + 76 + 1 + 8; // Default widget is 76x76 + 2px for border + 8 spacing between widgets (2x4px)
+    const numberOfColumns = Math.max(4, Math.floor(windowInnerWidth / widgetSize)); // When width is less than 400, set to quad column
+    const dynamicWidgetSize = windowInnerWidth / numberOfColumns;
 
     return (
         <div ref={resizeObserverRef}>
             <div
-                className="grid w-[--dashboard-w] grid-cols-[repeat(var(--dashboard-cols),1fr)] gap-2"
+                className="grid-rows-[repeat(auto-fill,--widget-size)]] grid w-[--dashboard-w] grid-cols-[repeat(var(--dashboard-cols),1fr)] gap-2"
                 style={{
                     '--dashboard-cols': numberOfColumns,
-                    '--dashboard-w': `${widgetSize * numberOfColumns - 8}px`
+                    '--dashboard-w': `${dynamicWidgetSize * numberOfColumns}px`,
+                    '--widget-size': `${dynamicWidgetSize}px`
                 } as CSSProperties}
             >
                 <GridWrapper isEditing={isEditing} order={widgetsOrder} orderChanged={handleOrderChanged}>
diff --git a/web/apps/app/components/widgets/parts/WidgetCard.tsx b/web/apps/app/components/widgets/parts/WidgetCard.tsx
index f015f712cd..2cbc9e5f72 100644
--- a/web/apps/app/components/widgets/parts/WidgetCard.tsx
+++ b/web/apps/app/components/widgets/parts/WidgetCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { CSSProperties, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { Stack } from '@signalco/ui-primitives/Stack';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@signalco/ui-primitives/Menu';
@@ -37,8 +37,6 @@ export default function WidgetCard(props: IWidgetCardProps) {
 
     const width = (config as CardConfig)?.columns || 2;
     const height = (config as CardConfig)?.rows || 2;
-    const sizeWidth = width * 78 + (width - 1) * 8;
-    const sizeHeight = height * 78 + (height - 1) * 8;
 
     const isLoading = typeof options === 'undefined';
     const needsConfiguration = typeof options === 'undefined' || options == null || !IsConfigurationValid(config, options);
@@ -63,17 +61,11 @@ export default function WidgetCard(props: IWidgetCardProps) {
 
     return (
         <>
-            <Card
-                className="relative overflow-hidden"
+            <Card className="relative h-[--widget-instance-h] w-[--widget-instance-w] overflow-hidden p-0"
                 style={{
-                    width: `${sizeWidth}px`,
-                    height: `${sizeHeight}px`
-                }}>
-                <CardOverflow
-                    style={{
-                        width: `${sizeWidth}px`,
-                        height: `${sizeHeight}px`
-                    }}>
+                    '--widget-instance-w': `calc(var(--widget-size)*${width}-${width}*2px)`,
+                    '--widget-instance-h': `calc(var(--widget-size)*${height})`,
+                } as CSSProperties}>
                     {(!isLoading && needsConfiguration) ? (
                         <Stack justifyContent="stretch" className="h-full">
                             <Button disabled={!isEditMode} size="lg" fullWidth onClick={handleOnConfigureClicked}>Configure widget</Button>
@@ -101,8 +93,7 @@ export default function WidgetCard(props: IWidgetCardProps) {
                                 </DropdownMenuContent>
                             </DropdownMenu>
                         </div>
-                    )}
-                </CardOverflow>
+                )}
             </Card>
             {(isConfiguring && options) &&
                 <WidgetConfiguration

From c7a81c5874596ff105776af268602ab2c59b7cbf Mon Sep 17 00:00:00 2001
From: Aleksandar Toplek <aleksandar.toplek@gmail.com>
Date: Wed, 27 Dec 2023 22:22:53 +0100
Subject: [PATCH 2/3] fix(web): Added scroll offset

Closes #820
---
 web/apps/blog/app/global.css | 4 ++++
 web/apps/web/app/global.css  | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/web/apps/blog/app/global.css b/web/apps/blog/app/global.css
index 3fb2bb7d8f..837f30d629 100644
--- a/web/apps/blog/app/global.css
+++ b/web/apps/blog/app/global.css
@@ -4,3 +4,7 @@ html, body, #__next {
   height: 100%;
   width: 100%;
 }
+
+:target {
+  scroll-margin-top: 80px;
+}
diff --git a/web/apps/web/app/global.css b/web/apps/web/app/global.css
index 1fe6561470..4812ad2f3d 100644
--- a/web/apps/web/app/global.css
+++ b/web/apps/web/app/global.css
@@ -1 +1,5 @@
 @import '@signalco/ui/index.css';
+
+:target {
+    scroll-margin-top: 80px;
+}

From 9e248f067aac784c4df4a2067e817dbb99d6533c Mon Sep 17 00:00:00 2001
From: Aleksandar Toplek <aleksandar.toplek@gmail.com>
Date: Wed, 27 Dec 2023 22:24:26 +0100
Subject: [PATCH 3/3] fix(web): Page content not displaying

---
 web/apps/web/app/(rest)/layout.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/apps/web/app/(rest)/layout.tsx b/web/apps/web/app/(rest)/layout.tsx
index 5b94d42635..1881813ac8 100644
--- a/web/apps/web/app/(rest)/layout.tsx
+++ b/web/apps/web/app/(rest)/layout.tsx
@@ -1,5 +1,6 @@
+import { PropsWithChildren } from 'react';
 import { PageLayout } from '../../components/layouts/PageLayout';
 
-export default function RestLayout() {
-    return <PageLayout />;
+export default function RestLayout({ children }: PropsWithChildren) {
+    return <PageLayout>{children}</PageLayout>;
 }