Added vertical mode for small devices

client/src/pages/dashboard/components/EditableBox.tsx

@@ -1,6 +1,7 @@
 import { useWindowEvent } from '@/utils/hooks/useWindowEvent'
 import { useRef, useState } from 'preact/hooks'
 import { GRID_WIDTH } from '../constants'
+import { useDashboardContext } from '../contexts/DashboardContext'
 import { useDragging } from '../hooks/useDragging'
 import { ResizingMode, useResize } from '../hooks/useResize'
 import { BoxDefinition } from '../types'
@@ -23,6 +24,7 @@ export const EditableBox = ({
 	onEdit,
 }: Props) => {
 	const boxRef = useRef<HTMLDivElement>(null)
+	const { verticalMode } = useDashboardContext()
 
 	const [editing, setEditing] = useState(false)
 
@@ -92,17 +94,24 @@ export const EditableBox = ({
 			<div
 				ref={boxRef}
 				className={`grid-box${dragging ? ' dragging' : ''}`}
-				style={{
+				style={
-					left: (box.x / GRID_WIDTH) * 100 + '%',
+					verticalMode
-					top: box.y + 'px',
+						? {
-					width: (box.w / GRID_WIDTH) * 100 + '%',
+								position: 'relative',
-					height: box.h + 'px',
+								height: box.h + 'px',
-					...(dragging.active && {
+						  }
-						left: dragging.x,
+						: {
-						top: dragging.y,
+								left: (box.x / GRID_WIDTH) * 100 + '%',
-						zIndex: 2,
+								top: box.y + 'px',
-					}),
+								width: (box.w / GRID_WIDTH) * 100 + '%',
-				}}
+								height: box.h + 'px',
+								...(dragging.active && {
+									left: dragging.x,
+									top: dragging.y,
+									zIndex: 2,
+								}),
+						  }
+				}
 			>
 				<div className="box" style={{ height: '100%' }}>
 					<div className="header">

client/src/pages/dashboard/contexts/DashboardContext.tsx

@@ -1,3 +1,4 @@
+import { useViewportSize } from '@/utils/hooks/useViewportSize'
 import { intervalToRange } from '@/utils/intervalToRange'
 import { ComponentChild, createContext } from 'preact'
 import { StateUpdater, useContext, useMemo, useState } from 'preact/hooks'
@@ -6,6 +7,7 @@ import { FilterValue } from '../components/Filters'
 type DashboardContextType = {
 	filter: FilterValue
 	setFilter: StateUpdater<FilterValue>
+	verticalMode: boolean
 }
 
 const DashboardContext = createContext<DashboardContextType | null>(null)
@@ -15,13 +17,20 @@ export const DashboardContextProvider = ({
 }: {
 	children: ComponentChild
 }) => {
+	const viewport = useViewportSize()
+
 	const [filter, setFilter] = useState<FilterValue>(() => {
 		const range = intervalToRange('week', new Date(), new Date())
 
 		return { interval: 'week', customFrom: range[0], customTo: range[1] }
 	})
 
-	const value = useMemo(() => ({ filter, setFilter }), [filter])
+	const verticalMode = viewport.width < 800
+
+	const value = useMemo(
+		() => ({ filter, setFilter, verticalMode }),
+		[filter, verticalMode]
+	)
 
 	return (
 		<DashboardContext.Provider value={value}>

client/src/pages/dashboard/utils/normalizeBoxes.tsx

@@ -1,5 +1,9 @@
 import { BoxDefinition } from '../types'
 
+/**
+ * Makes sure the boxes stick to the top and also that the array
+ * is sorted by y coordinate
+ */
 export function normalizeBoxes(boxes: BoxDefinition[]) {
 	let sorted = false
 

client/src/utils/hooks/useViewportSize.ts

@@ -0,0 +1,15 @@
+import { useState } from 'preact/hooks'
+import { useWindowEvent } from './useWindowEvent'
+
+const getSize = () => ({
+	width: window.innerWidth,
+	height: window.innerHeight,
+})
+
+export const useViewportSize = () => {
+	const [size, setSize] = useState(getSize())
+
+	useWindowEvent('resize', () => setSize(getSize()))
+
+	return size
+}