redesigned camera settings page, left the minimum height at 100%, open to change

src/components/CameraSettings/CameraSettingFields.tsx

@@ -53,7 +53,7 @@ const CameraSettingFields = ({
       enableReinitialize
     >
       {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-4 p-2">
+        <Form className="flex flex-col space-y-6 p-2">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (

src/components/CameraSettings/CameraSettings.tsx

@@ -15,10 +15,10 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
   console.log(updateCameraConfigError);
 
   return (
-    <Card className="px-4 py-4">
+    <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
       {isPending && <>Loading camera config</>}
       {isError && <>Error fetching camera config</>}
-      <div className="relative flex flex-col space-y-3 h-full">
+      <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
         <CameraSettingFields
           initialData={data}