@platformatic/ui-components 0.1.144 → 0.1.145

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.144",
+  "version": "0.1.145",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Modal.jsx

@@ -84,7 +84,7 @@ function Modal ({
     case MODAL_POPUP_V2:
       whichModal = (
         <>
-          <div className={`${styles['blur-absolute']}`} onClick={() => setIsOpen(false)} />
+          <div className={`${styles['blur-fixed']}`} onClick={() => setIsOpen(false)} />
           <div className={`${styles.container} ${styles.centered}`}>
             <div className={modalClassName}>
               <div className={headerClassName}>

package/src/components/Modal.module.css

@@ -5,12 +5,15 @@
 .blur-absolute {
   @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/75;
 }
+.blur-fixed {
+  @apply fixed top-0 left-0 w-screen h-full z-10 bg-rich-black/75;
+}
+
 .container {
   @apply z-20;
 }
 .centered {
-  @apply fixed top-[50%] left-[50%];
-  transform: translate(-50%, -50%);
+  @apply fixed top-[50%] left-0 lg:left-[50%] translate-y-[-50%] translate-x-[0] lg:translate-x-[-50%];
 }
 .modal {
   @apply p-4 rounded-md mx-auto my-auto max-h-[85vh] overflow-y-auto;
@@ -48,10 +51,10 @@
   @apply inline-flex items-center;
 }
 .modal--small {
-  @apply w-auto lg:min-w-[480px] lg:max-w-[480px];
+  @apply w-[calc(100vW-2rem)] lg:min-w-[480px] lg:max-w-[480px];
 }
 .modal--medium {
-  @apply w-auto lg:min-w-[880px] lg:max-w-[880px];
+  @apply w-[calc(100vW-2rem)] lg:min-w-[880px] lg:max-w-[880px];
 }
 .modal--full-width {
   @apply w-screen min-w-full;

package/src/components/VerticalSeparator.jsx

@@ -5,10 +5,10 @@ import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY
 import commonStyles from './Common.module.css'
 import styles from './VerticalSeparator.module.css'
 
-function VerticalSeparator ({ color, backgroundColorOpacity }) {
+function VerticalSeparator ({ color, backgroundColorOpacity, classes }) {
   const backgroundColor = commonStyles[`background-color-${color}`]
   const backgroundOpacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
-  const className = `${backgroundColor} ${backgroundOpacity} ${styles.fullHeight}`
+  const className = `${backgroundColor} ${backgroundOpacity} ${styles.fullHeight} ${classes}`
   return <div className={className} />
 }
 
@@ -24,12 +24,18 @@ VerticalSeparator.propTypes = {
     OPACITY_20,
     OPACITY_30,
     OPACITY_60,
-    OPACITY_100])
+    OPACITY_100]),
+  /**
+   * backgroundColorOpacity
+   */
+  classes: PropTypes.string
+
 }
 
 VerticalSeparator.defaultProps = {
   color: DARK_GREEN,
-  backgroundColorOpacity: 100
+  backgroundColorOpacity: 100,
+  classes: ''
 }
 
 export default VerticalSeparator