fix SettingsModal proportions

src/components/SettingsModal.jsx

@@ -23,6 +23,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   useError(errorMessage, [errorMessage]);
   useSuccess(successMessage, [successMessage]);
 
+
   const handleCloseModal = () => {
     closeModal();
 
@@ -33,6 +34,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
 
+
   const toggleExpanded = (index) => {
     setExpanded((prevExpanded) => {
       const newExpanded = [...prevExpanded];
@@ -45,6 +47,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     });
   };
 
+
   const expandAll = () => {
     if (expanded.length === 3) {
       setExpanded([]);
@@ -53,6 +56,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
   };
   
+  
   useEffect(() => {
     if (localStorage.getItem("cacheCleared") === "true") {
       setSuccessMessage("Cache Cleared");

src/components/styled/SettingsModal.styled.jsx

@@ -4,8 +4,11 @@ import Modal from 'react-modal';
 export const StyledModal = styled(Modal)`
   .panel {
     top: 60px;
-    width: 330px;
+    width: 400px;
-    left: 50%;
+    height: auto;
+    max-height: 80%;
+    left: calc(50% - 25px);
+    overflow-y: auto;
     margin-left: -178px;
     position: absolute;
     padding: 2px 5px 5px;
@@ -13,6 +16,14 @@ export const StyledModal = styled(Modal)`
     box-shadow: 0 0 5px rgba(0, 0, 0, .25);
   }
 
+  @media (max-width: 768px) {
+    .panel {
+      width: 320px !important;
+      max-height: 60% !important;
+      left: calc(50% + 15px) !important;
+    }
+  }
+
   .panel-header {
     font-size: 16px;
     font-weight: 700;
@@ -142,7 +153,7 @@ export const StyledModal = styled(Modal)`
     background-color: currentColor;
     position: absolute;
     left: 28px;
-    top: 13px; /* Change this value according to your needs */
+    top: 13px;
   }
 
   .settings-input::after {
@@ -153,7 +164,7 @@ export const StyledModal = styled(Modal)`
     background-color: currentColor;
     position: absolute;
     left: 28px;
-    top: 1px; /* Change this value according to your needs */
+    top: 1px;
   }