feat: header and utenti page mobile friendly

src/client/ComboBox.tsx

@@ -1,6 +1,6 @@
 import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
-import { clsx } from './lib/util'
+import { clsx, isMobile } from './lib/util'
 
 export const ComboBox = ({
     value,
@@ -33,7 +33,11 @@ export const ComboBox = ({
     }, [])
 
     return (
-        <div class="combobox" ref={comboRef} style={{ width: itemWidth + 48 + 'px' }}>
+        <div
+            class="combobox"
+            ref={comboRef}
+            style={{ width: isMobile() ? undefined : itemWidth + 48 + 'px' }}
+        >
             <div class="selected" onClick={() => setOpen(!open)}>
                 <div class="content">{children[value]}</div>
                 <span class="material-symbols-outlined">expand_more</span>

src/client/lib/util.ts

@@ -1,3 +1,5 @@
+import { useEffect, useMemo, useState } from 'preact/hooks'
+
 export const trottleDebounce = <T extends any[], R>(
     fn: (...args: T) => R,
     delay: number,
@@ -52,3 +54,13 @@ export function clsx(...args: ClassValue[]): string {
         })
         .join(' ')
 }
+
+export const isMobile = () => {
+    const [windowWidth, setWindowWidth] = useState(0)
+
+    useEffect(() => {
+        setWindowWidth(window.innerWidth)
+    }, [])
+
+    return windowWidth < 1024
+}