feat: add auto size

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/ModalDemo.tsx

@@ -94,7 +94,7 @@ export const ModalDemo = () => {
 
       <Section title={t("modal.usage.basic")}>
         <Button label="Open modal" onClick={() => setIsOpen(true)}></Button>
-        <Modal onHide={() => setIsOpen(false)} visible={isOpen}>
+        <Modal onHide={() => setIsOpen(false)} visible={isOpen} size="auto">
           <p style={{ lineHeight: 1.6 }}>{content}</p>
         </Modal>
         <CodeBlock

packages/ui/src/Modal/index.tsx

@@ -8,7 +8,7 @@ interface ModalProperties {
   footer?: React.ReactNode;
   header?: string | JSX.Element;
   onHide: () => void;
-  size?: "medium" | "large";
+  size?: "auto" | "medium" | "large";
   visible: boolean;
 }
 

packages/ui/src/assets/css/modal.css

@@ -17,10 +17,11 @@
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   color: var(--color);
   max-height: 80%;
+  max-width: calc(100% - 2rem);
   min-width: 300px;
   overflow-y: auto;
   padding: 1rem;
-  width: calc(100% - 2rem);
+  width: auto;
   z-index: 1000;
 }
 
@@ -55,10 +56,9 @@
 }
 
 @media screen and (min-width: 576px) {
-  .dz-modal {
+  .dz-modal.medium {
     max-width: 35rem;
     min-width: 25rem;
-    width: auto;
   }
 
   .dz-modal.large {