Merge 916ed3e97f into 25e30f6420

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.2-dev$(shell date +%Y%m%d%H%M)
-VERSION := 0.4.1
+VERSION_DEV := 0.4.1-dev$(shell date +%Y%m%d%H%M)
+VERSION := 0.4.0
 
 PROMETHEUS_TAG := github.com/prometheus/common/version
 KVM_PKG_NAME := github.com/jetkvm/kvm

ui/src/components/WebRTCVideo.tsx

@@ -674,6 +674,7 @@ 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
@@ -687,7 +688,7 @@ export default function WebRTCVideo() {
                           disablePictureInPicture
                           controlsList="nofullscreen"
                           className={cx(
-                            "max-h-full min-h-[384px] max-w-full min-w-[512px] bg-black/50 object-contain transition-all duration-1000",
+                            "z-30 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":
@@ -717,6 +718,7 @@ 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"
 
-interface KeyInfo { key: string | number; shift?: boolean, altRight?: boolean }
+type 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,5 +1,4 @@
 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

@@ -51,7 +51,6 @@ export default function SettingsKeyboardRoute() {
       />
 
       <div className="space-y-4">
-        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
         <SettingsItem
           title="Paste text"
           description="Keyboard layout of target operating system"

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 { cx } from "../cva.config";