From 9bce31103a374ada0822beab6156f926cab2343e Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Fri, 19 Jan 2024 22:36:13 +0100
Subject: [PATCH] fix modal width

---
 src/components/Hero/ui/ModalCreateNew.jsx |  2 +-
 src/components/Hero/ui/styles/modal.css   | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Hero/ui/ModalCreateNew.jsx b/src/components/Hero/ui/ModalCreateNew.jsx
index 3c62c98..9cf1831 100644
--- a/src/components/Hero/ui/ModalCreateNew.jsx
+++ b/src/components/Hero/ui/ModalCreateNew.jsx
@@ -131,7 +131,7 @@ export const ModalCreate = ({ withCarousel = false }) => {
           <div className="hero__modal__carousel">
             <StoryItem story={currentStory} reduced />
           </div>
-          <div className="Form w-100 mt-3" style={{ textAlign: 'start', maxWidth: 500 }}>
+          <div className="Form w-100 mt-3" style={{ textAlign: 'start' }}>
             {withCarousel ? (
               <div className="hero__modal__carousel mx-3 ">
                 <ModalCarousel options={[0, 1, 2, 3, 4]} setOption={setSelectedColor}>
diff --git a/src/components/Hero/ui/styles/modal.css b/src/components/Hero/ui/styles/modal.css
index a64fd26..44a34ee 100644
--- a/src/components/Hero/ui/styles/modal.css
+++ b/src/components/Hero/ui/styles/modal.css
@@ -1,9 +1,6 @@
 .hero__modal {
   position: absolute;
   bottom: 5.5rem;
-  width: 50%;
-  left: 25%;
-
   background: var(--linen-500, #fcede2);
   border-radius: 1rem;
   padding: 1rem;
@@ -18,6 +15,14 @@
   z-index: 120;
 }
 
+@media (min-width: 992px) {
+  .hero__modal {
+    width: 600px;
+    left: 50%;
+    margin-left: -300px;
+  }
+}
+
 .hero__modal p {
   padding: 0;
   line-height: 1rem;