Proper h snap constant

client/src/pages/dashboard/NewDashboardPage.tsx

@@ -9,6 +9,7 @@ import { useEffect, useMemo, useState } from 'preact/hooks'
 import { useQuery } from 'react-query'
 import { DashboardGrid } from './components/DashboardGrid'
 import { DashboardHeader } from './components/DashboardHeader'
+import { GRID_H_SNAP, GRID_WIDTH } from './constants'
 import { DashboardContextProvider } from './contexts/DashboardContext'
 import { BoxDefinition } from './types'
 
@@ -48,8 +49,8 @@ export const NewDashboardPage = () => {
 			id: new Date().getTime().toString(),
 			x: 0,
 			y: 0,
-			w: 12,
-			h: 200,
+			w: GRID_WIDTH,
+			h: GRID_H_SNAP * 20,
 		}
 
 		const otherBoxes = boxes.map((b) => {

client/src/pages/dashboard/constants.ts

@@ -1 +1,2 @@
 export const GRID_WIDTH = 20
+export const GRID_H_SNAP = 10

client/src/pages/dashboard/hooks/useDragging.ts

@@ -1,7 +1,7 @@
 import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
 import { useState } from 'preact/hooks'
 import { BoxDefinition } from '../types'
-import { GRID_WIDTH } from '../constants'
+import { GRID_H_SNAP, GRID_WIDTH } from '../constants'
 
 type Props = {
 	cellWidth: number
@@ -24,7 +24,7 @@ export const useDragging = ({ cellWidth, boxes, box }: Props) => {
 		Math.min(GRID_WIDTH - box.w, Math.round(state.x / cellWidth))
 	)
 
-	const dragY = Math.round(state.y / 16) * 16
+	const dragY = Math.round(state.y / GRID_H_SNAP) * GRID_H_SNAP
 
 	const gridHeights = Array(GRID_WIDTH)
 		.fill(null)

client/src/pages/dashboard/hooks/useResize.ts

@@ -1,7 +1,7 @@
 import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
 import { useState } from 'preact/hooks'
 import { BoxDefinition } from '../types'
-import { GRID_WIDTH } from '../constants'
+import { GRID_H_SNAP, GRID_WIDTH } from '../constants'
 
 export enum ResizingMode {
 	NONE,
@@ -53,7 +53,7 @@ export const useResize = ({ cellWidth, box, boxes }: Props) => {
 					.fill(null)
 					.map((_, x) => maxHeights[box.x + x])
 					.filter((x) => x > 0),
-				Math.round(state.h / 16) * 16
+				Math.round(state.h / GRID_H_SNAP) * GRID_H_SNAP
 		  )
 		: 0