simplify insight settings

app/(pages)/@modal/(layout)/share/[subjectId]/insights/[insightId]/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl" />;
+const Loading = () => <PageModalLoading className="max-w-5xl" />;
 
 export default Loading;

app/(pages)/@modal/(layout)/share/[subjectId]/insights/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl" />;
+const Loading = () => <PageModalLoading className="max-w-5xl" />;
 
 export default Loading;

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl" />;
+const Loading = () => <PageModalLoading className="max-w-3xl" />;
 
 export default Loading;

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx

@@ -21,7 +21,7 @@ const Page = async ({ params: { insightId, subjectId } }: PageProps) => {
   if (!events || !insight) return null;
 
   return (
-    <Modal.Content className="max-w-4xl">
+    <Modal.Content className="max-w-3xl">
       <PageModalHeader title="Edit insight" />
       <InsightForm events={events} insight={insight} subjectId={subjectId} />
     </Modal.Content>

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl bg-bg-3" />;
+const Loading = () => <PageModalLoading className="max-w-5xl bg-bg-3" />;
 
 export default Loading;

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl" />;
+const Loading = () => <PageModalLoading className="max-w-3xl" />;
 
 export default Loading;

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/page.tsx

@@ -19,7 +19,7 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
   if (!events) return false;
 
   return (
-    <Modal.Content className="max-w-4xl">
+    <Modal.Content className="max-w-3xl">
       <PageModalHeader title="New insight" />
       <InsightForm events={events} subjectId={subjectId} />
     </Modal.Content>

app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/loading.tsx

@@ -1,5 +1,5 @@
 import PageModalLoading from '@/_components/page-modal-loading';
 
-const Loading = () => <PageModalLoading className="max-w-4xl" />;
+const Loading = () => <PageModalLoading className="max-w-5xl" />;
 
 export default Loading;

app/_components/checkbox.tsx

@@ -16,7 +16,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       )}
     >
       <input
-        className="peer absolute inset-0 z-10 opacity-0"
+        className="peer absolute inset-0 opacity-0"
         id={name}
         name={name}
         ref={ref}
@@ -31,7 +31,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       >
         {label && <label htmlFor={name}>{label}</label>}
       </div>
-      <CheckIcon className="h-5 w-5 shrink-0 stroke-fg-2 opacity-0 transition-opacity peer-checked:opacity-100" />
+      <CheckIcon className="relative -z-10 h-5 w-5 shrink-0 stroke-fg-2 opacity-0 transition-opacity peer-checked:opacity-100" />
     </div>
   ),
 );