refactor: mobile UX friendly

src/common/component/styled/Modal.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const StyledModal: FC<Props> = ({ compact = false, title = "", description = "", buttons, children, className }) => {
   return (
-    <div className={clsx("rounded-lg bg-white dark:bg-gray-900 drop-shadow", compact ? "p-4 min-w-[406px] text-left" : "p-8 min-w-[440px] text-center", className)} >
+    <div className={clsx("rounded-lg bg-white dark:bg-gray-900 drop-shadow", compact ? "p-4 md:min-w-[406px] text-left" : "p-5 md:p-8 md:min-w-[440px] text-center", className)} >
       {title && <h3 className="text-xl text-gray-600 dark:text-white mb-4 font-semibold">{title}</h3>}
       {description && <p className="text-sm text-gray-400 dark:text-gray-100 mb-2">{description}</p>}
       {children}

src/common/component/styled/Textarea.tsx

@@ -1,13 +1,13 @@
-import { TextareaHTMLAttributes } from "react";
+import { forwardRef, TextareaHTMLAttributes } from "react";
 
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
-const StyledTextarea = ({ className, ...rest }: Props) => {
-  return <textarea className={`rounded text-sm p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 resize-none w-full shadow-sm border border-gray-200 dark:border-gray-400 
+const StyledTextarea = forwardRef(({ className, ...rest }: Props, ref) => {
+  return <textarea ref={ref} className={`rounded text-sm p-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 resize-none w-full shadow-sm border border-gray-200 dark:border-gray-400 
   disabled:bg-gray-100 dark:disabled:bg-gray-800/50 
   disabled:text-gray-400 dark:disabled:text-gray-500 
   disabled:pointer-events-none 
   placeholder:text-gray-400 
   ${className}`}
     {...rest}></textarea>;
-};
+});
 export default StyledTextarea;