changed layout of some UI components

frontend/components/ui/card.tsx

@@ -1,52 +1,73 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const Card = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+    ref={ref}
-        className,
+    className={cn(
-      )}
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
-      {...props}
+      className,
-    />
+    )}
-  )
+    {...props}
-);
+  />
+));
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-5", className)}
+    {...props}
+  />
+));
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <h3
+  React.HTMLAttributes<HTMLHeadingElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn("text-base font-semibold leading-tight tracking-tight", className)}
+  <h3
-      {...props}
+    ref={ref}
-    />
+    className={cn(
-  )
+      "text-base font-semibold leading-tight tracking-tight",
-);
+      className,
+    )}
+    {...props}
+  />
+));
 
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const CardDescription = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  React.HTMLAttributes<HTMLParagraphElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <div ref={ref} className={cn("p-5 pt-0", className)} {...props} />
+));
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex items-center p-4 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <div
+    ref={ref}
+    className={cn("flex items-center p-4 pt-0", className)}
+    {...props}
+  />
+));
 
 Card.displayName = "Card";
 CardHeader.displayName = "CardHeader";
@@ -55,4 +76,11 @@ CardDescription.displayName = "CardDescription";
 CardContent.displayName = "CardContent";
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

frontend/components/ui/input.tsx

@@ -1,15 +1,32 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   icon?: React.ReactNode;
   inputClassName?: string;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, inputClassName, icon, type, placeholder, ...props }, ref) => {
+    const [hasValue, setHasValue] = React.useState(
+      Boolean(props.value || props.defaultValue),
+    );
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setHasValue(e.target.value.length > 0);
+      if (props.onChange) {
+        props.onChange(e);
+      }
+    };
+
     return (
-      <label className={cn("relative block h-fit w-full text-sm", icon ? className : "")}>
+      <label
+        className={cn(
+          "relative block h-fit w-full text-xs",
+          icon ? className : "",
+        )}
+      >
         {icon && (
           <div className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground">
             {icon}
@@ -26,12 +43,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
           ref={ref}
           {...props}
+          onChange={handleChange}
         />
         <span
           className={cn(
             "pointer-events-none absolute top-1/2 -translate-y-1/2 pl-px text-placeholder-foreground font-mono",
             icon ? "left-9" : "left-3",
-            props.value && "hidden",
+            hasValue && "hidden",
           )}
         >
           {placeholder}

frontend/components/ui/tabs.tsx

@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 space-y-5 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}