From 4cd5f93aff0b6a18672eda275dd77821f5463371 Mon Sep 17 00:00:00 2001
From: Nikita Yutanov <nikitayutanov@gmail.com>
Date: Fri, 27 Sep 2024 17:35:14 +0300
Subject: [PATCH] feat(vara-ui): mobile modal

---
 utils/vara-ui/package-lock.json               |  4 +--
 utils/vara-ui/package.json                    |  2 +-
 .../src/components/modal/modal.module.scss    | 16 +++++++++++-
 .../src/components/modal/modal.stories.ts     | 26 ++++++++++++++++---
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/utils/vara-ui/package-lock.json b/utils/vara-ui/package-lock.json
index 86ee2a312e..eca466eb89 100644
--- a/utils/vara-ui/package-lock.json
+++ b/utils/vara-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gear-js/vara-ui",
-      "version": "0.0.10",
+      "version": "0.0.11",
       "license": "GPL-3.0",
       "devDependencies": {
         "@storybook/addon-essentials": "7.2.1",
diff --git a/utils/vara-ui/package.json b/utils/vara-ui/package.json
index 2cda3971a5..31d3d7b175 100644
--- a/utils/vara-ui/package.json
+++ b/utils/vara-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/vara-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "description": "React UI components used across Vara applications",
   "author": "Gear Technologies",
diff --git a/utils/vara-ui/src/components/modal/modal.module.scss b/utils/vara-ui/src/components/modal/modal.module.scss
index 6c66e248a9..326aabff3d 100644
--- a/utils/vara-ui/src/components/modal/modal.module.scss
+++ b/utils/vara-ui/src/components/modal/modal.module.scss
@@ -47,6 +47,12 @@
   background-color: rgba(0, 0, 0, 0.2);
   backdrop-filter: blur(10px);
   z-index: 10;
+
+  @media screen and (max-width: 768px) {
+    padding: 0;
+
+    align-items: flex-end;
+  }
 }
 
 .modal {
@@ -60,9 +66,17 @@
   border-radius: 4px;
   filter: drop-shadow(0px 4px 4px #00000011);
 
+  @media screen and (max-width: 768px) {
+    max-width: unset;
+  }
+
   > * {
-    /* every standalone item for body scrollbar padding */
+    /* applying x-padding to every child, to preserve body scrollbar padding */
     padding: 0 32px;
+
+    @media screen and (max-width: 768px) {
+      padding: 0 16px;
+    }
   }
 }
 
diff --git a/utils/vara-ui/src/components/modal/modal.stories.ts b/utils/vara-ui/src/components/modal/modal.stories.ts
index 783b5dbed6..5b8aabc53a 100644
--- a/utils/vara-ui/src/components/modal/modal.stories.ts
+++ b/utils/vara-ui/src/components/modal/modal.stories.ts
@@ -4,6 +4,9 @@ import { Modal } from './modal';
 type Type = typeof Modal;
 type Story = StoryObj<Type>;
 
+const LONG_TEXT =
+  'Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text';
+
 const meta: Meta<Type> = {
   title: 'Modal',
   component: Modal,
@@ -20,11 +23,28 @@ const Default: Story = {
 const Scroll: Story = {
   args: {
     heading: 'Heading',
-    children:
-      'Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text',
+    children: LONG_TEXT,
     footer: 'Footer',
   },
 };
 
+const Mobile: Story = {
+  args: {
+    heading: 'Mobile Modal',
+    children: 'Some modal text',
+    close: () => {},
+  },
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
+const MobileScroll: Story = {
+  args: {
+    heading: 'Mobile Modal',
+    children: LONG_TEXT,
+    close: () => {},
+  },
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
 export default meta;
-export { Default, Scroll };
+export { Default, Scroll, Mobile, MobileScroll };