chore

src/components/features/card/mode/edit/index.tsx

@@ -62,7 +62,7 @@ export const EditMode = ({
 	}, [handleUpdateContents]);
 
 	return (
-		<div className="relative">
+		<div className="relative w-full">
 			<div className="absolute top-2 right-4">
 				<SaveCardIcon
 					updateContents={handleUpdateContents}
@@ -71,7 +71,7 @@ export const EditMode = ({
 			</div>
 			<textarea
 				ref={textareaRef}
-				className="w-full text-base border-2 border-gray-300 rounded-md p-2 box-border bg-white resize-none shadow-sm"
+				className="w-full h-full text-base  rounded-md p-2  resize-none "
 				value={editContent}
 				onChange={(event) => {
 					setEditContent(event.target.value);

src/components/ui/card.tsx

@@ -1,68 +1,75 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card"
+			className={cn(
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm w-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn("flex flex-col gap-1.5 px-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-header"
+			className={cn("flex flex-col gap-1.5 px-6", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

src/layouts/MainContent/index.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from "react";
 
 export const MainContent = ({ children }: PropsWithChildren) => (
-	<div className="grid grid-cols-2">{children}</div>
+	<div className="grid grid-cols-2 gap-4 w-full">{children}</div>
 );