Adjusting modals and updating close icon on input (#4458)

* Adjusting modals and updating close icon on input * Updating test * Updating css * Updating dialog css
2024-11-24 08:22:29 +02:00 · 2023-01-16 15:18:15 +05:00 · 2023-01-16 15:18:15 +05:00 · 297e8f4d31
commit 297e8f4d31
parent 7d663ef0ec
19 changed files with 138 additions and 152 deletions
--- a/mattermost-plugin/webapp/src/components/snapshots/boardSelector.test.tsx.snap
+++ b/mattermost-plugin/webapp/src/components/snapshots/boardSelector.test.tsx.snap
@ -6,7 +6,7 @@ exports[`components/boardSelector escape button should unmount the component 1`]
    class="focalboard-body"
  >
    <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
    >
      <div
        class="backdrop"
@ -111,7 +111,7 @@ exports[`components/boardSelector renders with no results 1`] = `
    class="focalboard-body"
  >
    <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
    >
      <div
        class="backdrop"
@ -217,7 +217,7 @@ exports[`components/boardSelector renders with some results 1`] = `
    class="focalboard-body"
  >
    <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
    >
      <div
        class="backdrop"
@ -421,7 +421,7 @@ exports[`components/boardSelector renders without start searching 1`] = `
    class="focalboard-body"
  >
    <div
-      class="Dialog dialog-back BoardSelector"
+      class="Dialog dialog-back BoardSelector size--medium"
    >
      <div
        class="backdrop"
--- a/webapp/src/components/snapshots/cardDialog.test.tsx.snap
+++ b/webapp/src/components/snapshots/cardDialog.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`components/cardDialog already following card 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -215,7 +215,7 @@ exports[`components/cardDialog already following card 1`] = `
 exports[`components/cardDialog limited card shows hidden view (no toolbar) 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -447,7 +447,7 @@ exports[`components/cardDialog limited card shows hidden view (no toolbar) 1`] =
 exports[`components/cardDialog return a cardDialog readonly 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -578,7 +578,7 @@ exports[`components/cardDialog return a cardDialog readonly 1`] = `
 exports[`components/cardDialog return cardDialog menu content 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -927,7 +927,7 @@ exports[`components/cardDialog return cardDialog menu content 1`] = `
 exports[`components/cardDialog return cardDialog menu content and cancel delete confirmation do nothing 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -1139,7 +1139,7 @@ exports[`components/cardDialog return cardDialog menu content and cancel delete
 exports[`components/cardDialog should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
@ -1351,7 +1351,7 @@ exports[`components/cardDialog should match snapshot 1`] = `
 exports[`components/cardDialog should match snapshot without permissions 1`] = `
 <div>
  <div
-    class="Dialog dialog-back cardDialog"
+    class="Dialog dialog-back cardDialog size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/snapshots/confirmAddUserForNotifications.test.tsx.snap
+++ b/webapp/src/components/snapshots/confirmAddUserForNotifications.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`/components/confirmAddUserForNotifications should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/snapshots/confirmationDialogBox.test.tsx.snap
+++ b/webapp/src/components/snapshots/confirmationDialogBox.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
  >
    <div
      class="backdrop"
@ -84,7 +84,7 @@ exports[`/components/confirmationDialogBox confirmDialog should match snapshot 1
 exports[`/components/confirmationDialogBox confirmDialog with Confirm Button Text should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/snapshots/dialog.test.tsx.snap
+++ b/webapp/src/components/snapshots/dialog.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`components/dialog should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back undefined size--medium"
  >
    <div
      class="backdrop"
@ -50,7 +50,7 @@ exports[`components/dialog should match snapshot 1`] = `
 exports[`components/dialog should return dialog and click on cancel button 1`] = `
 <div>
  <div
-    class="Dialog dialog-back undefined"
+    class="Dialog dialog-back undefined size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/boardTemplateSelector/snapshots/boardTemplateSelectorItem.test.tsx.snap
+++ b/webapp/src/components/boardTemplateSelector/snapshots/boardTemplateSelectorItem.test.tsx.snap
@ -143,7 +143,7 @@ exports[`components/boardTemplateSelector/boardTemplateSelectorItem should trigg
  </div>
  <div>
    <div
-      class="Dialog dialog-back DeleteBoardDialog"
+      class="Dialog dialog-back DeleteBoardDialog size--medium"
    >
      <div
        class="backdrop"
--- a/webapp/src/components/boardsSwitcherDialog/snapshots/boardSwitcherDialog.test.tsx.snap
+++ b/webapp/src/components/boardsSwitcherDialog/snapshots/boardSwitcherDialog.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`component/BoardSwitcherDialog base case 1`] = `
 <div>
  <div
-    class="Dialog dialog-back BoardSwitcherDialog"
+    class="Dialog dialog-back BoardSwitcherDialog size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/cardDialog.scss
+++ b/webapp/src/components/cardDialog.scss
@ -1,10 +1,25 @@
-.Dialog {
-    &.cardDialog {
-        .dialog {
+.cardDialog {
+    .dialog {
+        width: 100%;
+        top: 0;
+        height: 100%;
+
+        >.CardDetail {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
            @media not screen and (max-width: 975px) {
-                width: 800px;
-                max-width: 100%;
+                padding: 10px 126px;
            }
+
+            @media screen and (max-width: 975px) {
+                padding: 16px 32px;
+            }
+        }
+
+        >.CardDetail--fullwidth {
+            padding-left: 78px;
        }
    }
 }
--- a/webapp/src/components/confirmationDialogBox.scss
+++ b/webapp/src/components/confirmationDialogBox.scss
@ -3,30 +3,11 @@
 .confirmation-dialog-box {
    .dialog {
        @include z-index(confirmation-dialog-box);
-        color: rgb(var(--center-channel-color-rgb));
-        max-width: 512px;
-        width: 100%;
-        position: fixed;
-        top: 30%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        height: max-content;
-
-        background-color: rgb(var(--center-channel-bg-rgb));
-        box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
-            rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
-
-        border-radius: var(--modal-rad);
-        padding: 0;
-        -webkit-overflow-scrolling: touch;
-        overflow-x: hidden;
-        overflow-y: auto;

        > .toolbar {
            position: absolute;
            top: 0;
            right: 0;
-            padding: 16px;
        }
    }
 }
--- a/webapp/src/components/confirmationDialogBox.tsx
+++ b/webapp/src/components/confirmationDialogBox.tsx
@ -28,6 +28,7 @@ export const ConfirmationDialogBox = (props: Props) => {

    return (
        <Dialog
+            size='small'
            className='confirmation-dialog-box'
            onClose={handleOnClose}
        >
--- a/webapp/src/components/createCategory/snapshots/createCategory.test.tsx.snap
+++ b/webapp/src/components/createCategory/snapshots/createCategory.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`components/createCategory/CreateCategory base case should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back CreateCategoryModal"
+    class="Dialog dialog-back CreateCategoryModal size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/createCategory/createCategory.scss
+++ b/webapp/src/components/createCategory/createCategory.scss
@ -6,62 +6,71 @@
            width: 600px;
            height: auto;
        }
+    }

-        .CreateCategory {
+    .CreateCategory {
+        display: flex;
+        flex-direction: column;
+        padding: 0 32px 24px;
+        gap: 24px;
+
+        .inputWrapper {
+            position: relative;
+
+            .inputWrapper__close-wrapper {
+                position: absolute;
+                height: 100%;
+                top: 0;
+                right: 0;
+                display: flex;
+                align-items: center;
+                padding-right: 12px;
+            }
+
+            .CloseCircle {
+                cursor: pointer;
+                font-size: 18px;
+                color: rgba(var(--center-channel-color-rgb), 0.64);
+
+                &:hover {
+                    color: rgba(var(--center-channel-color-rgb), 0.8);
+                }
+            }
+        }
+
+        .categoryNameInput {
+            width: 100%;
+        }
+
+        input {
+            height: 48px;
+            font-size: 16px;
+            border-radius: 4px;
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+            background: var(--center-channel-bg);
+            color: var(--center-channel-color);
+            padding: 0 16px;
+            flex: 1;
+            transition: border 0.15s ease-in;
+
+            &:focus {
+                border-color: var(--button-bg);
+                box-shadow: inset 0 0 0 1px var(--button-bg);
+            }
+        }
+
+        .footer {
            display: flex;
-            flex-direction: column;
-            padding: 0 32px 24px;
-            gap: 24px;
+            flex-direction: row;
+            justify-content: flex-end;
+        }

-            .inputWrapper {
-                position: relative;
-
-                .CloseCircle {
-                    cursor: pointer;
-                    position: absolute;
-                    font-size: 18px;
-                    width: 16px;
-                    height: 16px;
-                    right: 16px;
-                    top: 6px;
-                    color: rgba(var(--center-channel-color-rgb), 0.64);
-                }
-            }
-
-            .categoryNameInput {
-                width: 100%;
-            }
-
-            input {
-                height: 48px;
-                font-size: 16px;
-                border-radius: 4px;
-                border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-                background: var(--center-channel-bg);
-                color: var(--center-channel-color);
-                padding: 0 16px;
-                flex: 1;
-                transition: border 0.15s ease-in;
-
-                &:focus {
-                    border-color: var(--button-bg);
-                    box-shadow: inset 0 0 0 1px var(--button-bg);
-                }
-            }
-
-            .footer {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-            }
-
-            .createCategoryActions {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-end;
-                margin-top: auto;
-                gap: 12px;
-            }
+        .createCategoryActions {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            margin-top: auto;
+            gap: 12px;
        }
    }
 }
--- a/webapp/src/components/createCategory/createCategory.tsx
+++ b/webapp/src/components/createCategory/createCategory.tsx
@ -97,7 +97,7 @@ const CreateCategory = (props: Props): JSX.Element => {
                    {
                        Boolean(name) &&
                        <div
-                            className='clearBtn'
+                            className='clearBtn inputWrapper__close-wrapper'
                            onClick={() => setName('')}
                        >
                            <CloseCircle/>
--- a/webapp/src/components/dialog.scss
+++ b/webapp/src/components/dialog.scss
@ -10,6 +10,14 @@
        bottom: 0;
    }

+    &.size--small {
+        .dialog {
+            max-width: 512px;
+            width: 100%;
+            height: max-content;
+        }
+    }
+
    .dialog-title {
        margin: 0;
        font-weight: 600;
@ -22,10 +30,6 @@
        margin-top: 8px;
    }

-    .dialog__close {
-        margin: 0 -14px 0 0;
-    }
-
    .backdrop {
        @include z-index(dialog-backdrop);
        position: fixed;
@ -66,14 +70,6 @@
            }
        }

-        @media screen and (max-width: 975px) {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-        }
-
        > * {
            flex-shrink: 0;
        }
@ -106,7 +102,7 @@
        .toolbar {
            display: flex;
            flex-direction: row;
-            padding: 24px 32px;
+            padding: 24px 0;
            justify-content: space-between;
            align-items: flex-start;
        }
@ -116,24 +112,7 @@
            gap: 8px;
            align-items: center;
            height: 28px;
-        }
-
-        > .CardDetail {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            @media not screen and (max-width: 975px) {
-                padding: 10px 126px;
-            }
-
-            @media screen and (max-width: 975px) {
-                padding: 10px;
-            }
-        }
-
-        > .CardDetail--fullwidth {
-            padding-left: 78px;
+            margin-right: 16px;
        }
    }

--- a/webapp/src/components/dialog.tsx
+++ b/webapp/src/components/dialog.tsx
@ -12,6 +12,7 @@ import './dialog.scss'

 type Props = {
    children: React.ReactNode
+    size?: string
    toolsMenu?: React.ReactNode // some dialogs may not  require a toolmenu
    toolbar?: React.ReactNode
    hideCloseButton?: boolean
@ -22,7 +23,7 @@ type Props = {
 }

 const Dialog = (props: Props) => {
-    const {toolsMenu, toolbar, title, subtitle} = props
+    const {toolsMenu, toolbar, title, subtitle, size} = props
    const intl = useIntl()

    const closeDialogText = intl.formatMessage({
@ -35,7 +36,7 @@ const Dialog = (props: Props) => {
    const isBackdropClickedRef = useRef(false)

    return (
-        <div className={`Dialog dialog-back ${props.className}`}>
+        <div className={`Dialog dialog-back ${props.className} size--${size || 'medium'}`}>
            <div className='backdrop'/>
            <div
                className='wrapper'
--- a/webapp/src/components/gallery/snapshots/galleryCard.test.tsx.snap
+++ b/webapp/src/components/gallery/snapshots/galleryCard.test.tsx.snap
@ -905,7 +905,7 @@ exports[`src/components/gallery/GalleryCard without block content return Gallery
    </div>
  </div>
  <div
-    class="Dialog dialog-back confirmation-dialog-box"
+    class="Dialog dialog-back confirmation-dialog-box size--small"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/shareBoard/snapshots/shareBoard.test.tsx.snap
+++ b/webapp/src/components/shareBoard/snapshots/shareBoard.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`src/components/shareBoard/shareBoard confirm unlinking linked channel 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -253,7 +253,7 @@ exports[`src/components/shareBoard/shareBoard confirm unlinking linked channel 1
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -462,7 +462,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 2`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -671,7 +671,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy l
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Regenerate token 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -903,7 +903,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Regene
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -1139,7 +1139,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 2`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -1607,7 +1607,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -1843,7 +1843,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 2`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -2311,7 +2311,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard and click Select
 exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -2496,7 +2496,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard template and cli
 exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 2`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -2817,7 +2817,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard template and cli
 exports[`src/components/shareBoard/shareBoard return shareBoard, and click switch 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -3049,7 +3049,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoard, and click switc
 exports[`src/components/shareBoard/shareBoard return shareBoardComponent and click Switch without sharing 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -3281,7 +3281,7 @@ exports[`src/components/shareBoard/shareBoard return shareBoardComponent and cli
 exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -3490,7 +3490,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -3699,7 +3699,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and subpath 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -3908,7 +3908,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and without workspaceId and subpath 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
@ -4117,7 +4117,7 @@ exports[`src/components/shareBoard/shareBoard should match snapshot with sharing
 exports[`src/components/shareBoard/shareBoard should match snapshot, with template 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ShareBoardDialog"
+    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/viewLImitDialog/snapshots/viewLimitDialog.test.tsx.snap
+++ b/webapp/src/components/viewLImitDialog/snapshots/viewLimitDialog.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`components/viewLimitDialog/ViewLiimitDialog show notify upgrade button for non sys admin user 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
  >
    <div
      class="backdrop"
@ -85,7 +85,7 @@ exports[`components/viewLimitDialog/ViewLiimitDialog show notify upgrade button
 exports[`components/viewLimitDialog/ViewLiimitDialog show upgrade button for sys admin user 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
  >
    <div
      class="backdrop"
--- a/webapp/src/components/viewLImitDialog/snapshots/viewLimitDialogWrapper.test.tsx.snap
+++ b/webapp/src/components/viewLImitDialog/snapshots/viewLimitDialogWrapper.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`components/viewLimitDialog/ViewL]imitDialog show notify admin confirmation msg 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
  >
    <div
      class="backdrop"
@ -119,7 +119,7 @@ exports[`components/viewLimitDialog/ViewL]imitDialog show notify admin confirmat
 exports[`components/viewLimitDialog/ViewL]imitDialog show view limit dialog 1`] = `
 <div>
  <div
-    class="Dialog dialog-back ViewLimitDialog"
+    class="Dialog dialog-back ViewLimitDialog size--medium"
  >
    <div
      class="backdrop"