refactor modal style

src/assets/scss/5-modules/modal.scss

@@ -1,6 +1,6 @@
-/**************************\
-  Basic Modal Styles
-\**************************/
+/* ----------------------------------------------------------- */
+/* == modal style */
+/* ----------------------------------------------------------- */
 
 .modal {
   position: relative;
@@ -16,10 +16,6 @@
   height: 100vh;
 }
 
-.modal[aria-hidden="true"] {
-  display: none;
-}
-
 .modal__overlay {
   position: fixed;
   top: 0;
@@ -35,8 +31,10 @@
   z-index: 21;
   overflow-y: auto;
   box-sizing: border-box;
+  margin-right: 1rem;
+  margin-left: 1rem;
   padding: 3rem;
-  max-width: 50rem;
+  max-width: 52rem;
   max-height: 100vh;
   width: 100%;
   border-radius: .5rem;

src/assets/scss/style.scss

@@ -70,6 +70,7 @@
 @import "5-modules/queue";
 @import "5-modules/track";
 @import "5-modules/context-menu";
+@import "5-modules/modal";
 @import "5-modules/modal-share";
 
 
@@ -87,7 +88,7 @@
 // Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
 // In this context, "o" means "override" and you can use it as a convention.
 
-@import "7-vendors/micromodal.scss";
+// @import "7-vendors/o-vendor.scss";
 
 
 // --------------------------------------------------------------