feat: some style fixes

src/components/ui/Modal.tsx

@@ -6,8 +6,9 @@ interface ModalWindowProps {
   isOpen?: boolean;
   setIsOpen?: Dispatch<StateUpdater<boolean>>;
   onClose?: () => void;
+  className?: string;
 }
-const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose }) => {
+const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, setIsOpen, onClose, className = "" }) => {
   useEffect(() => {
     if (isOpen) return;
     if (onClose) onClose();
@@ -26,7 +27,10 @@ const ModalWindow: FunctionComponent<ModalWindowProps> = ({ isOpen, children, se
       )}
     >
       <div
-        class="h-[40rem] w-[95%] cursor-auto rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16"
+        class={cn(
+          "h-[40rem] w-[95%] cursor-auto rounded-[4rem] bg-white px-8 py-12 md:me-[20rem] md:h-[20rem] md:w-[65%] md:px-16",
+          className
+        )}
         onClick={(e) => e.stopPropagation()}
       >
         {children}

src/pages/profile_tasks.tsx

@@ -132,7 +132,7 @@ const ProfileTasks: FunctionComponent = () => {
               <CalendarDaysIcon class="size-10 cursor-pointer" />
               <BookmarkIcon class="ms-4 size-10 cursor-pointer" />
             </div>
-            <div className="flex h-16 flex-row gap-6">
+            <div className="mb-8 flex h-16 flex-col items-center gap-6 self-center md:mb-0 md:flex-row">
               <Button
                 className="text-sm"
                 onClick={() => {