4 files changed, 47 insertions, 10 deletions
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 9db8a268..d9962dd2 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -82,6 +82,10 @@ const DropdownMenuContent = React.forwardRef<
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
+      onCloseAutoFocus={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
new file mode 100644
index 00000000..9a152fd4
--- /dev/null
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -0,0 +1,40 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+
+interface FontPickerProps {
+  defaultValue?: FontFamily;
+  onValueChange?: (value: FontFamily) => void;
+  className?: string;
+}
+
+export function FontPicker({
+  defaultValue,
+  onValueChange,
+  className,
+}: FontPickerProps) {
+  return (
+    <Select defaultValue={defaultValue} onValueChange={onValueChange}>
+      <SelectTrigger className={`w-full text-xs ${className || ""}`}>
+        <SelectValue placeholder="Select a font" />
+      </SelectTrigger>
+      <SelectContent>
+        {FONT_OPTIONS.map((font) => (
+          <SelectItem
+            key={font.value}
+            value={font.value}
+            className="text-xs"
+            style={{ fontFamily: font.value }}
+          >
+            {font.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 72314045..8fc31a58 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -11,14 +11,7 @@ interface InputProps extends React.ComponentProps<"input"> {
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
-    {
-      className,
-      type,
-      showPassword,
-      onShowPasswordChange,
-      value,
-      ...props
-    },
+    { className, type, showPassword, onShowPasswordChange, value, ...props },
     ref
   ) => {
     const isPassword = type === "password";
@@ -26,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const inputType = isPassword && showPassword ? "text" : type;
 
     return (
-      <div className="relative w-full">
+      <div className={showPassword ? "relative w-full" : ""}>
         <input
           type={inputType}
           className={cn(
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index d8a72e40..29d82cdf 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -118,7 +118,7 @@ export function VideoPlayer({
       ref={videoRef}
       src={src}
       poster={poster}
-      className={`w-full h-full object-cover ${className}`}
+      className={`max-w-full max-h-full object-contain ${className}`}
       playsInline
       preload="auto"
       controls={false}