Merge b9669fffed into 0cee284561

Fixed the Tailwind CSS syntax for `in` (nested) selector
Added missing React dependency for `useEffect`

Makefile

@@ -2,8 +2,8 @@ BRANCH    ?= $(shell git rev-parse --abbrev-ref HEAD)
 BUILDDATE ?= $(shell date -u +%FT%T%z)
 BUILDTS   ?= $(shell date -u +%s)
 REVISION  ?= $(shell git rev-parse HEAD)
-VERSION_DEV := 0.4.1-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.4.0
+VERSION_DEV := 0.4.2-dev$(shell date +%Y%m%d%H%M)
+VERSION := 0.4.1
 
 PROMETHEUS_TAG := github.com/prometheus/common/version
 KVM_PKG_NAME := github.com/jetkvm/kvm

ui/src/components/WebRTCVideo.tsx

@@ -674,7 +674,6 @@ export default function WebRTCVideo() {
                 <div className="grid grow grid-rows-(--grid-bodyFooter) overflow-hidden">
                   <div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
                     <div className="relative flex h-full w-full items-center justify-center">
-                      <div className="relative inline-block">
                         {/* In relative mouse mode and under https, we enable the pointer lock, and to do so we need a bar to show the user to click on the video to enable mouse control */}
                         <PointerLockBar show={showPointerLockBar} />
                         <video
@@ -688,7 +687,7 @@ export default function WebRTCVideo() {
                           disablePictureInPicture
                           controlsList="nofullscreen"
                           className={cx(
-                            "z-30 max-h-full min-h-[384px] max-w-full min-w-[512px] bg-black/50 object-contain transition-all duration-1000",
+                            "max-h-full min-h-[384px] max-w-full min-w-[512px] bg-black/50 object-contain transition-all duration-1000",
                             {
                               "cursor-none": settings.isCursorHidden,
                               "opacity-0":
@@ -718,7 +717,6 @@ export default function WebRTCVideo() {
                             </div>
                           </div>
                         )}
-                      </div>
                     </div>
                   </div>
                   <VirtualKeyboard />

ui/src/keyboardLayouts.ts

@@ -11,7 +11,7 @@ import { chars as chars_sv_SE, name as name_sv_SE } from "@/keyboardLayouts/sv_S
 import { chars as chars_fr_CH, name as name_fr_CH } from "@/keyboardLayouts/fr_CH"
 import { chars as chars_de_CH, name as name_de_CH } from "@/keyboardLayouts/de_CH"
 
-type KeyInfo = { key: string | number; shift?: boolean, altRight?: boolean }
+interface KeyInfo { key: string | number; shift?: boolean, altRight?: boolean }
 export type KeyCombo = KeyInfo & { deadKey?: boolean, accentKey?: KeyInfo }
 
 export const layouts: Record<string, string> = {

ui/src/keyboardLayouts/fr_CH.ts

@@ -1,4 +1,5 @@
 import { KeyCombo } from "../keyboardLayouts"
+
 import { chars as chars_de_CH } from "./de_CH"
 
 export const name = "Français de Suisse";

ui/src/routes/devices.$id.settings.keyboard.tsx

@@ -25,7 +25,7 @@ export default function SettingsKeyboardRoute() {
       if ("error" in resp) return;
       setKeyboardLayout(resp.result as string);
     });
-  }, []);
+  }, [send, setKeyboardLayout]);
 
   const onKeyboardLayoutChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {

ui/src/routes/devices.$id.settings.tsx

@@ -20,8 +20,8 @@ import { LinkButton } from "@/components/Button";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import { useUiStore } from "@/hooks/stores";
 import useKeyboard from "@/hooks/useKeyboard";
-import { FeatureFlag } from "../components/FeatureFlag";
 
+import { FeatureFlag } from "../components/FeatureFlag";
 import { cx } from "../cva.config";
 
 
@@ -151,7 +151,6 @@ export default function SettingsRoute() {
                     className={({ isActive }) => (isActive ? "active" : "")}
                   >
                     <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
-
                       <LuMouse className="h-4 w-4 shrink-0" />
                       <h1>Mouse</h1>
                     </div>
@@ -163,7 +162,7 @@ export default function SettingsRoute() {
                       to="keyboard"
                       className={({ isActive }) => (isActive ? "active" : "")}
                     >
-                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 in-[.active]:bg-blue-50 in-[.active]:text-blue-700! md:in-[.active]:bg-transparent dark:in-[.active]:bg-blue-900 dark:in-[.active]:text-blue-200! dark:md:in-[.active]:bg-transparent">
                         <LuKeyboard className="h-4 w-4 shrink-0" />
                         <h1>Keyboard</h1>
                       </div>