style(editor): height in mobile

Novout · Sep 24, 2021 · a9ea30c · a9ea30c
1 parent 443038f
commit a9ea30c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
@@ -1,8 +1,15 @@
 <template>
-  <div class="md:px-20 sm:px-0 px-0 h-screen flex items-center">
+  <div class="md:px-20 px-2 h-screen flex items-center">
     <div
       ref="main"
-      class="md:w-8/12 w-full h-editor bg-gray-100 dark:bg-gray-700"
+      class="
+        md:w-8/12
+        w-full
+        h-editor-mobile
+        md:h-editor
+        bg-gray-100
+        dark:bg-gray-700
+      "
       :class="[
         store.state.editor.configuration.draggable ? 'fixed' : 'inline-block',
       ]"

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,12 +36,15 @@ module.exports = {
       }),
       height: theme => ({
         "editor": "75vh",
+        "editor-mobile": "90vh"
       }),
       maxHeight: theme => ({
-        "editor": "75vh"
+        "editor": "75vh",
+        "editor-mobile": "90vh"
       }),
       minHeight: theme => ({
-        "editor": "75vh"
+        "editor": "75vh",
+        "editor-mobile": "90vh"
       }),
       backgroundColor: theme => ({
         "black-opacity": 'rgba(0,0,0, 0.1)',