chore: Upgrade UI vite and tailwind packages (#443)

* chore: Upgrade UI vite and tailwind packages Vite 5.2.0 -> 6.3.5 @vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0 cva: 1.0.0-beta.1 -> 1.0.0-beta.3 focus-trap-react 10.2.3 -> 11.0.3 framer-motion 11.15.0 -> 12.11.0 @tailwindcss/postcss 4.1.6 @tailwindcss/vite 4.1.6 tailwind 3.4.17 -> 4.1.6 tailwind-merge 2.5.5 -> 3.3.0 Minor updates: @headlessui/react 2.2.2 -> 2.2.3 @types/react 19.1.3 -> 19.1.4 @types/react-dom 19.1.3 -> 19.1.5 @typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1 @typescript-eslint/parser 8.32.0 -> 8.32.1 react-simple-keyboard 3.8.71 -> 3.8.72 The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL) The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) Done in this order (important): `shadow-sm` -> `shadow-xs` `shadow` -> `shadown-sm` `rounded` -> `rounded-sm` `outline-none` -> `outline-hidden` `32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props) `ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50` `flex-shrink-0` -> `shrink-0` `flex-grow-0` -> `grow-0` `outline outline-1` -> `outline-1` ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible) FocusTrap is now not exported as the default, so change those imports headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work * Update eslint config and fix errors
2026-06-02 19:32:58 +02:00 · 2025-05-15 07:21:03 -05:00
parent 340babac24
commit 7ccb8e617c
44 changed files with 2006 additions and 1381 deletions
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -16,7 +16,7 @@ const sizes = {
 const themes = {
  primary: cx(
    // Base styles
-    "bg-blue-700 dark:border-blue-600 border border-blue-900/60 text-white shadow",
+    "bg-blue-700 dark:border-blue-600 border border-blue-900/60 text-white shadow-sm",
    // Hover states
    "group-hover:bg-blue-800",
    // Active states
@@ -24,7 +24,7 @@ const themes = {
  ),
  danger: cx(
    // Base styles
-    "bg-red-600 text-white border-red-700 shadow-sm shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
+    "bg-red-600 text-white border-red-700 shadow-xs shadow-red-200/80 dark:border-red-600 dark:shadow-red-900/20",
    // Hover states
    "group-hover:bg-red-700 group-hover:border-red-800 dark:group-hover:bg-red-700 dark:group-hover:border-red-600",
    // Active states
@@ -34,7 +34,7 @@ const themes = {
  ),
  light: cx(
    // Base styles
-    "bg-white text-black border-slate-800/30 shadow dark:bg-slate-800 dark:border-slate-300/20 dark:text-white",
+    "bg-white text-black border-slate-800/30 shadow-xs dark:bg-slate-800 dark:border-slate-300/20 dark:text-white",
    // Hover states
    "group-hover:bg-blue-50/80 dark:group-hover:bg-slate-700",
    // Active states
@@ -44,7 +44,7 @@ const themes = {
  ),
  lightDanger: cx(
    // Base styles
-    "bg-white text-black border-red-400/60 shadow-sm",
+    "bg-white text-black border-red-400/60 shadow-xs",
    // Hover states
    "group-hover:bg-red-50/80",
    // Active states
@@ -56,7 +56,7 @@ const themes = {
    // Base styles
    "bg-white/0 text-black border-transparent dark:text-white",
    // Hover states
-    "group-hover:bg-white group-hover:border-slate-800/30 group-hover:shadow dark:group-hover:bg-slate-700 dark:group-hover:border-slate-600",
+    "group-hover:bg-white group-hover:border-slate-800/30 group-hover:shadow-sm dark:group-hover:bg-slate-700 dark:group-hover:border-slate-600",
    // Active states
    "group-active:bg-slate-100/80",
  ),
@@ -65,15 +65,15 @@ const themes = {
 const btnVariants = cva({
  base: cx(
    // Base styles
-    "border rounded select-none",
+    "border rounded-sm select-none",
    // Size classes
    "justify-center items-center shrink-0",
    // Transition classes
-    "outline-none transition-all duration-200",
+    "outline-hidden transition-all duration-200",
    // Text classes
    "font-display text-center font-medium leading-tight",
    // States
-    "group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 group-focus:ring-blue-700",
+    "group-focus:outline-hidden group-focus:ring-2 group-focus:ring-offset-2 group-focus:ring-blue-700",
    "group-disabled:opacity-50 group-disabled:pointer-events-none",
  ),

@@ -175,7 +175,7 @@ type ButtonPropsType = Pick<
 export const Button = React.forwardRef<HTMLButtonElement, ButtonPropsType>(
  ({ type, disabled, onClick, formNoValidate, loading, fetcher, ...props }, ref) => {
    const classes = cx(
-      "group outline-none",
+      "group outline-hidden",
      props.fullWidth ? "w-full" : "",
      loading ? "pointer-events-none" : "",
    );
@@ -215,7 +215,7 @@ type LinkPropsType = Pick<LinkProps, "to"> &
  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LinkButton = ({ to, ...props }: LinkPropsType) => {
  const classes = cx(
-    "group outline-none",
+    "group outline-hidden",
    props.disabled ? "pointer-events-none !opacity-70" : "",
    props.fullWidth ? "w-full" : "",
    props.loading ? "pointer-events-none" : "",
@@ -241,7 +241,7 @@ type LabelPropsType = Pick<HTMLLabelElement, "htmlFor"> &
  React.ComponentProps<typeof ButtonContent> & { disabled?: boolean };
 export const LabelButton = ({ htmlFor, ...props }: LabelPropsType) => {
  const classes = cx(
-    "group outline-none block cursor-pointer",
+    "group outline-hidden block cursor-pointer",
    props.disabled ? "pointer-events-none !opacity-70" : "",
    props.fullWidth ? "w-full" : "",
    props.loading ? "pointer-events-none" : "",
--- a/ui/src/components/Card.tsx
+++ b/ui/src/components/Card.tsx
@@ -30,7 +30,7 @@ const Card = forwardRef<HTMLDivElement, CardPropsType>(({ children, className },
    <div
      ref={ref}
      className={cx(
-        "w-full rounded border-none bg-white shadow outline outline-1 outline-slate-800/30 dark:bg-slate-800 dark:outline-slate-300/20",
+        "w-full rounded-sm border-none bg-white shadow-xs outline-1 outline-slate-800/30 dark:bg-slate-800 dark:outline-slate-300/20",
        className,
      )}
    >
--- a/ui/src/components/Checkbox.tsx
+++ b/ui/src/components/Checkbox.tsx
@@ -24,7 +24,7 @@ const checkboxVariants = cva({
    "active:bg-slate-200 dark:active:bg-slate-700",

    // Focus
-    "focus:border-slate-300 dark:focus:border-slate-600 focus:outline-none focus:ring-2 focus:ring-blue-700 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900",
+    "focus:border-slate-300 dark:focus:border-slate-600 focus:outline-hidden focus:ring-2 focus:ring-blue-700 dark:focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900",

    // Disabled
    "disabled:pointer-events-none disabled:opacity-30",
--- a/ui/src/components/Combobox.tsx
+++ b/ui/src/components/Combobox.tsx
@@ -58,7 +58,7 @@ export function Combobox({
    <HeadlessCombobox onChange={onChange} {...otherProps}>
      {() => (
        <>
-          <Card className="w-auto !border border-solid !border-slate-800/30 shadow outline-0 dark:!border-slate-300/30">
+          <Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
            <ComboboxInput
              ref={inputRef}
              className={clsx(
--- a/ui/src/components/GridBackground.tsx
+++ b/ui/src/components/GridBackground.tsx
@@ -2,7 +2,7 @@ export default function GridBackground() {
  return (
    <div className="absolute w-screen h-screen overflow-hidden isolate opacity-60">
      <svg
-        className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)] dark:stroke-slate-300/20"
+        className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-300 [mask-image:radial-gradient(center_at_32rem_32rem,white,transparent)] dark:stroke-slate-300/20"
        aria-hidden="true"
      >
        <defs>
--- a/ui/src/components/Header.tsx
+++ b/ui/src/components/Header.tsx
@@ -1,12 +1,11 @@
-import { Fragment, useCallback } from "react";
+import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { ArrowLeftEndOnRectangleIcon, ChevronDownIcon } from "@heroicons/react/16/solid";
-import { Menu, MenuButton } from "@headlessui/react";
+import { Button, Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { LuMonitorSmartphone } from "react-icons/lu";

 import Container from "@/components/Container";
 import Card from "@/components/Card";
-import { cx } from "@/cva.config";
 import { useHidStore, useRTCStore, useUserStore } from "@/hooks/stores";
 import LogoBlueIcon from "@/assets/logo-blue.svg";
 import LogoWhiteIcon from "@/assets/logo-white.svg";
@@ -17,7 +16,7 @@ import { CLOUD_API, DEVICE_API } from "@/ui.config";
 import api from "../api";
 import { isOnDevice } from "../main";

-import { Button, LinkButton } from "./Button";
+import { LinkButton } from "./Button";

 interface NavbarProps {
  isLoggedIn: boolean;
@@ -51,6 +50,10 @@ export default function DashboardNavbar({

  const usbState = useHidStore(state => state.usbState);

+  // for testing
+  //userEmail = "user@example.org";
+  //picture = "https://placehold.co/32x32"
+
  return (
    <div className="w-full select-none border-b border-b-slate-800/20 bg-white dark:border-b-slate-300/20 dark:bg-slate-900">
      <Container>
@@ -78,86 +81,79 @@ export default function DashboardNavbar({
          </div>
          <div className="flex w-full items-center justify-end gap-x-2">
            <div className="flex shrink-0 items-center space-x-4">
-              {showConnectionStatus && (
-                <div className="hidden items-center gap-x-2 md:flex">
-                  <div className="w-[159px]">
-                    <PeerConnectionStatusCard
-                      state={peerConnectionState}
-                      title={kvmName}
-                    />
-                  </div>
-                  <div className="hidden w-[159px] md:block">
-                    <USBStateStatus
-                      state={usbState}
-                        peerConnectionState={peerConnectionState}
-                    />
-                  </div>
-                </div>
-              )}
-              {isLoggedIn ? (
-                <>
-                  <hr className="h-[20px] w-[1px] border-none bg-slate-800/20 dark:bg-slate-300/20" />
-                  <Menu as="div" className="relative inline-block text-left">
-                    <div>
-                      <MenuButton as={Fragment}>
-                        <Button
-                          theme="blank"
-                          size="SM"
-                          text={
-                            <>
-                              {picture ? <></> : userEmail}
-                              <ChevronDownIcon className="h-4 w-4 shrink-0 text-slate-900 dark:text-white" />
-                            </>
-                          }
-                          LeadingIcon={({ className }) =>
-                            picture && (
-                              <img
-                                src={picture}
-                                alt="Avatar"
-                                className={cx(
-                                  className,
-                                  "h-8 w-8 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700",
-                                )}
-                              />
-                            )
-                          }
-                        />
-                      </MenuButton>
+              <div className="hidden items-center gap-x-2 md:flex">
+                {showConnectionStatus && (
+                  <>
+                    <div className="w-[159px]">
+                      <PeerConnectionStatusCard
+                        state={peerConnectionState}
+                        title={kvmName}
+                      />
                    </div>
-
-                    <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right focus:outline-none">
-                      <Card className="overflow-hidden">
-                        <div className="space-y-1 p-1 dark:text-white">
-                          {userEmail && (
-                            <div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
-                              <Menu.Item>
-                                <div className="p-2">
-                                  <div className="font-display text-xs">Logged in as</div>
-                                  <div className="w-[200px] truncate font-display text-sm font-semibold">
-                                    {userEmail}
-                                  </div>
-                                </div>
-                              </Menu.Item>
-                            </div>
-                          )}
-                          <div>
-                            <Menu.Item>
-                              <div onClick={onLogout}>
-                                <button className="block w-full">
-                                  <div className="flex items-center gap-x-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
-                                    <ArrowLeftEndOnRectangleIcon className="h-4 w-4" />
-                                    <div className="font-display">Log out</div>
+                    <div className="hidden w-[159px] md:block">
+                      <USBStateStatus
+                        state={usbState}
+                        peerConnectionState={peerConnectionState}
+                      />
+                    </div>
+                  </>
+                )}
+                {isLoggedIn ? (
+                  <>
+                    <hr className="h-[20px] w-[1px] border-none bg-slate-800/20 dark:bg-slate-300/20" />
+                    <div className="relative inline-block text-left">
+                      <Menu>
+                        <MenuButton>
+                          <Button className="flex items-center gap-x-3 rounded-md border bg-white dark:border-slate-600 dark:bg-slate-800 dark:text-white border-slate-800/20 px-2 py-1.5">
+                            {picture
+                              ? (
+                                <img
+                                  src={picture}
+                                  alt="Avatar"
+                                  className="size-6 rounded-full border-2 border-transparent transition-colors group-hover:border-blue-700"
+                                />
+                              )
+                              : (
+                                <span className="max-w-[200px] text-sm/6 font-display font-semibold truncate">
+                                  {userEmail}
+                                </span>
+                              )
+                            }
+                            <ChevronDownIcon className="size-4 shrink-0 text-slate-900 dark:text-white" />
+                          </Button>
+                        </MenuButton>
+                        <MenuItems
+                          transition
+                          anchor="bottom end"
+                          className="right-0 mt-1 w-56 origin-top-right data-closed:opacity-0 focus:outline-hidden">
+                          <MenuItem>
+                            <Card className="overflow-hidden">
+                              <div className="space-y-1 p-1 dark:text-white">
+                                {userEmail && (
+                                  <div className="border-b border-b-slate-800/20 dark:border-slate-300/20">
+                                    <div className="p-2">
+                                      <div className="font-display text-xs">Logged in as</div>
+                                      <div className="max-w-[200px] truncate font-display text-sm font-semibold">
+                                        {userEmail}
+                                      </div>
+                                    </div>
                                  </div>
+                                )}
+                              </div>
+                              <div className="space-y-1 p-1 dark:text-white" onClick={onLogout}>
+                                <button className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700">
+                                  <ArrowLeftEndOnRectangleIcon className="size-4" />
+                                  <div className="font-display">Log out</div>
                                </button>
                              </div>
-                            </Menu.Item>
-                          </div>
-                        </div>
-                      </Card>
-                    </Menu.Items>
-                  </Menu>
-                </>
-              ) : null}
+                            </Card>
+                          </MenuItem>
+                        </MenuItems>
+                      </Menu>
+                    </div>
+                  </>
+                ) : null}
+              </div>
            </div>
          </div>
        </div>
--- a/ui/src/components/InputField.tsx
+++ b/ui/src/components/InputField.tsx
@@ -44,7 +44,7 @@ const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputF
          "[&:has(:user-invalid)]:ring-2 [&:has(:user-invalid)]:ring-red-600 [&:has(:user-invalid)]:ring-offset-2",

          // Focus Within
-          "focus-within:border-slate-300 dark:focus-within:border-slate-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-700 focus-within:ring-offset-2",
+          "focus-within:border-slate-300 dark:focus-within:border-slate-600 focus-within:outline-hidden focus-within:ring-2 focus-within:ring-blue-700 focus-within:ring-offset-2",

          // Disabled Within
          "disabled-within:pointer-events-none disabled-within:select-none disabled-within:bg-slate-50 dark:disabled-within:bg-slate-800 disabled-within:text-slate-500/80",
--- a/ui/src/components/KvmCard.tsx
+++ b/ui/src/components/KvmCard.tsx
@@ -113,7 +113,7 @@ export default function KvmCard({
              transition
              className="data-[closed]:scale-95 data-[closed]:transform data-[closed]:opacity-0 data-[enter]:duration-100 data-[leave]:duration-75 data-[enter]:ease-out data-[leave]:ease-in"
            >
-              <Card className="absolute right-0 z-10 w-56 px-1 mt-2 transition origin-top-right ring-1 ring-black ring-opacity-5 focus:outline-none">
+              <Card className="absolute right-0 z-10 w-56 px-1 mt-2 transition origin-top-right ring-1 ring-black/50 focus:outline-hidden">
                <div className="divide-y divide-slate-800/20 dark:divide-slate-300/20">
                  <MenuItem>
                    <div>
--- a/ui/src/components/LoadingSpinner.tsx
+++ b/ui/src/components/LoadingSpinner.tsx
@@ -7,7 +7,7 @@ export default function LoadingSpinner({
 }) {
  return (
    <svg
-      className={clsx(className, "flex-shrink-0 animate-spin p-[2px]")}
+      className={clsx(className, "shrink-0 animate-spin p-[2px]")}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
--- a/ui/src/components/SelectMenuBasic.tsx
+++ b/ui/src/components/SelectMenuBasic.tsx
@@ -63,7 +63,7 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
        )}
      >
        {label && <FieldLabel label={label} id={id} as="span" />}
-        <Card className="w-auto !border border-solid !border-slate-800/30 shadow outline-0 dark:!border-slate-300/30">
+        <Card className="w-auto !border border-solid !border-slate-800/30 shadow-xs outline-0 dark:!border-slate-300/30">
          <select
            ref={ref}
            name={name}
@@ -72,7 +72,7 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
              classes,

              // General styling
-              "block w-full cursor-pointer rounded border-none py-0 font-medium shadow-none outline-0 transition duration-300",
+              "block w-full cursor-pointer rounded-sm border-none py-0 font-medium shadow-none outline-0 transition duration-300",

              // Hover
              "hover:bg-blue-50/80 active:bg-blue-100/60 disabled:hover:bg-white",
--- a/ui/src/components/StepCounter.tsx
+++ b/ui/src/components/StepCounter.tsx
@@ -44,7 +44,7 @@ export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props)
          return (
            <div
              className={cx(
-                "rounded-md border border-blue-800 bg-blue-700 px-2 py-1 font-medium text-white shadow-sm dark:border-blue-300",
+                "rounded-md border border-blue-800 bg-blue-700 px-2 py-1 font-medium text-white shadow-xs dark:border-blue-300",
                textStyle,
              )}
              key={`${i}-${currStepIdx}`}
--- a/ui/src/components/TextArea.tsx
+++ b/ui/src/components/TextArea.tsx
@@ -17,7 +17,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
        className={cx(
          "relative w-full",
          "invalid-within::ring-2 invalid-within::ring-red-600 invalid-within::ring-offset-2",
-          "focus-within:border-slate-300 focus-within:outline-none focus-within:ring-1 focus-within:ring-blue-700 dark:focus-within:border-slate-600",
+          "focus-within:border-slate-300 focus-within:outline-hidden focus-within:ring-1 focus-within:ring-blue-700 dark:focus-within:border-slate-600",
        )}
      >
        <textarea
@@ -25,7 +25,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
          {...props}
          id="asd"
          className={clsx(
-            "block w-full rounded border-transparent bg-transparent text-black placeholder:text-slate-300 focus:ring-0 disabled:pointer-events-none disabled:select-none disabled:bg-slate-50 disabled:text-slate-300 dark:text-white dark:placeholder:text-slate-500 dark:disabled:bg-slate-800 sm:text-sm",
+            "block w-full rounded-sm border-transparent bg-transparent text-black placeholder:text-slate-300 focus:ring-0 disabled:pointer-events-none disabled:select-none disabled:bg-slate-50 disabled:text-slate-300 dark:text-white dark:placeholder:text-slate-500 dark:disabled:bg-slate-800 sm:text-sm",
            props.className,
          )}
        />
--- a/ui/src/components/VideoOverlay.tsx
+++ b/ui/src/components/VideoOverlay.tsx
@@ -14,7 +14,7 @@ interface OverlayContentProps {
 }
 function OverlayContent({ children }: OverlayContentProps) {
  return (
-    <GridCard cardClassName="h-full pointer-events-auto !outline-none">
+    <GridCard cardClassName="h-full pointer-events-auto !outline-hidden">
      <div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-slate-800/30 dark:border-slate-300/20">
        {children}
      </div>
@@ -377,7 +377,7 @@ export function PointerLockBar({ show }: PointerLockBarProps) {
        >
          <div>
            <Card className="rounded-b-none shadow-none !outline-0">
-              <div className="flex items-center justify-between border border-slate-800/50 px-4 py-2 outline-0 backdrop-blur-sm dark:border-slate-300/20 dark:bg-slate-800">
+              <div className="flex items-center justify-between border border-slate-800/50 px-4 py-2 outline-0 backdrop-blur-xs dark:border-slate-300/20 dark:bg-slate-800">
                <div className="flex items-center space-x-2">
                  <BsMouseFill className="h-4 w-4 text-blue-700 dark:text-blue-500" />
                  <span className="text-sm text-black dark:text-white">
--- a/ui/src/components/WebRTCVideo.tsx
+++ b/ui/src/components/WebRTCVideo.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useResizeObserver } from "usehooks-ts";

 import {
  useDeviceSettingsStore,
@@ -10,7 +11,6 @@ import {
  useVideoStore,
 } from "@/hooks/stores";
 import { keys, modifiers } from "@/keyboardMappings";
-import { useResizeObserver } from "usehooks-ts";
 import { cx } from "@/cva.config";
 import VirtualKeyboard from "@components/VirtualKeyboard";
 import Actionbar from "@components/ActionBar";
@@ -724,7 +724,7 @@ export default function WebRTCVideo() {
                                hdmiError ||
                                peerConnectionState !== "connected",
                              "!opacity-60": showPointerLockBar,
-                              "animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
+                              "animate-slideUpFade border border-slate-800/30 shadow-xs dark:border-slate-300/20":
                                isPlaying,
                            },
                          )}
@@ -732,7 +732,7 @@ export default function WebRTCVideo() {
                        {peerConnection?.connectionState == "connected" && (
                          <div
                            style={{ animationDuration: "500ms" }}
-                            className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
+                            className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center"
                          >
                            <div className="relative h-full w-full rounded-md">
                              <LoadingVideoOverlay show={isVideoLoading} />
--- a/ui/src/components/extensions/ATXPowerControl.tsx
+++ b/ui/src/components/extensions/ATXPowerControl.tsx
@@ -107,7 +107,7 @@ export function ATXPowerControl() {
          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
        </Card>
      ) : (
-        <Card className="h-[120px] animate-fadeIn opacity-0">
+        <Card className="h-[120px] animate-fadeIn">
          <div className="space-y-4 p-3">
            {/* Control Buttons */}
            <div className="flex items-center space-x-2">
--- a/ui/src/components/extensions/DCPowerControl.tsx
+++ b/ui/src/components/extensions/DCPowerControl.tsx
@@ -63,7 +63,7 @@ export function DCPowerControl() {
          <LoadingSpinner className="h-6 w-6 text-blue-500 dark:text-blue-400" />
        </Card>
      ) : (
-        <Card className="h-[160px] animate-fadeIn opacity-0">
+        <Card className="h-[160px] animate-fadeIn">
          <div className="space-y-4 p-3">
            {/* Power Controls */}
            <div className="flex items-center space-x-2">
--- a/ui/src/components/extensions/SerialConsole.tsx
+++ b/ui/src/components/extensions/SerialConsole.tsx
@@ -58,7 +58,7 @@ export function SerialConsole() {
        description="Configure your serial console settings"
      />

-      <Card className="animate-fadeIn opacity-0">
+      <Card className="animate-fadeIn">
        <div className="space-y-4 p-3">
          {/* Open Console Button */}
          <div className="flex items-center">
--- a/ui/src/components/popovers/ExtensionPopover.tsx
+++ b/ui/src/components/popovers/ExtensionPopover.tsx
@@ -92,7 +92,7 @@ export default function ExtensionPopover() {
                {renderActiveExtension()}

                <div
-                  className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
+                  className="flex animate-fadeIn items-center justify-end space-x-2"
                  style={{
                    animationDuration: "0.7s",
                    animationDelay: "0.2s",
@@ -113,7 +113,7 @@ export default function ExtensionPopover() {
                  title="Extensions"
                  description="Load and manage your extensions"
                />
-                <Card className="animate-fadeIn opacity-0">
+                <Card className="animate-fadeIn">
                  <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
                    {AVAILABLE_EXTENSIONS.map(extension => (
                      <div
--- a/ui/src/components/popovers/MountPopover.tsx
+++ b/ui/src/components/popovers/MountPopover.tsx
@@ -214,7 +214,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
              ) : null}

              <div
-                className="animate-fadeIn space-y-2 opacity-0"
+                className="animate-fadeIn space-y-2"
                style={{
                  animationDuration: "0.7s",
                  animationDelay: "0.1s",
@@ -289,7 +289,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {

        {!remoteVirtualMediaState && (
          <div
-            className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
+            className="flex animate-fadeIn items-center justify-end space-x-2"
            style={{
              animationDuration: "0.7s",
              animationDelay: "0.2s",
--- a/ui/src/components/popovers/PasteModal.tsx
+++ b/ui/src/components/popovers/PasteModal.tsx
@@ -83,7 +83,7 @@ export default function PasteModal() {
              />

              <div
-                className="animate-fadeIn space-y-2 opacity-0"
+                className="animate-fadeIn space-y-2"
                style={{
                  animationDuration: "0.7s",
                  animationDelay: "0.1s",
@@ -137,7 +137,7 @@ export default function PasteModal() {
          </div>
        </div>
        <div
-          className="flex animate-fadeIn items-center justify-end gap-x-2 opacity-0"
+          className="flex animate-fadeIn items-center justify-end gap-x-2"
          style={{
            animationDuration: "0.7s",
            animationDelay: "0.2s",
--- a/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
+++ b/ui/src/components/popovers/WakeOnLan/AddDeviceForm.tsx
@@ -26,7 +26,7 @@ export default function AddDeviceForm({
  return (
    <div className="space-y-4">
      <div
-        className="animate-fadeIn space-y-4 opacity-0"
+        className="animate-fadeIn space-y-4"
        style={{
          animationDuration: "0.5s",
          animationFillMode: "forwards",
@@ -73,7 +73,7 @@ export default function AddDeviceForm({
        />
      </div>
      <div
-        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
+        className="flex animate-fadeIn items-center justify-end space-x-2"
        style={{
          animationDuration: "0.7s",
          animationDelay: "0.2s",
--- a/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
+++ b/ui/src/components/popovers/WakeOnLan/DeviceList.tsx
@@ -28,7 +28,7 @@ export default function DeviceList({
 }: DeviceListProps) {
  return (
    <div className="space-y-4">
-      <Card className="animate-fadeIn opacity-0">
+      <Card className="animate-fadeIn">
        <div className="w-full divide-y divide-slate-700/30 dark:divide-slate-600/30">
          {storedDevices.map((device, index) => (
            <div key={index} className="flex items-center justify-between gap-x-2 p-3">
@@ -63,7 +63,7 @@ export default function DeviceList({
        </div>
      </Card>
      <div
-        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
+        className="flex animate-fadeIn items-center justify-end space-x-2"
        style={{
          animationDuration: "0.7s",
          animationDelay: "0.2s",
--- a/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
+++ b/ui/src/components/popovers/WakeOnLan/EmptyStateCard.tsx
@@ -13,7 +13,7 @@ export default function EmptyStateCard({
 }) {
  return (
    <div className="select-none space-y-4">
-      <Card className="animate-fadeIn opacity-0">
+      <Card className="animate-fadeIn">
        <div className="flex items-center justify-center py-8 text-center">
          <div className="space-y-3">
            <div className="space-y-1">
@@ -35,7 +35,7 @@ export default function EmptyStateCard({
        </div>
      </Card>
      <div
-        className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
+        className="flex animate-fadeIn items-center justify-end space-x-2"
        style={{
          animationDuration: "0.7s",
          animationDelay: "0.2s",
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -99,7 +99,7 @@ export default function ConnectionStatsSidebar() {
  }, 500);

  return (
-    <div className="grid h-full grid-rows-headerBody shadow-sm">
+    <div className="grid h-full grid-rows-headerBody shadow-xs">
      <SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
      <div className="h-full space-y-4 overflow-y-scroll bg-white px-4 py-2 pb-8 dark:bg-slate-900">
        <div className="space-y-4">