Merge pull request #4207 from signalco-io/next

Next

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}>

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

web/apps/blog/app/global.css

@@ -4,3 +4,7 @@ html, body, #__next {
   height: 100%;
   width: 100%;
 }
+
+:target {
+  scroll-margin-top: 80px;
+}

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>;
 }

web/apps/web/app/global.css

@@ -1 +1,5 @@
 @import '@signalco/ui/index.css';
+
+:target {
+    scroll-margin-top: 80px;
+}