From 06f5a5788ed9e86edf5e2a4c4d418c1741c0a17d Mon Sep 17 00:00:00 2001
From: boojack <stevenlgtm@gmail.com>
Date: Tue, 27 Sep 2022 22:58:03 +0800
Subject: [PATCH] fix: mobile editor float style (#247)

---
 web/src/less/memo-editor.less | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index dfa130c6..d70f5e44 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -3,6 +3,26 @@
 .memo-editor-container {
   @apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
 
+  &.float {
+    @media (max-width: 640px) {
+      @apply fixed w-full bottom-2 left-0 border-none rounded-none sm:relative sm:bottom-0 sm:w-full;
+      background-color: #f6f5f4;
+
+      > .memo-editor {
+        @apply p-4 rounded-lg border-2 flex flex-col flex-grow justify-start items-start relative w-full h-full bg-white;
+
+        .tag-action > .tag-list {
+          @apply bottom-7;
+          top: unset;
+        }
+      }
+
+      & .emoji-picker-react {
+        @apply bottom-16 sm:bottom-auto;
+      }
+    }
+  }
+
   &.fullscreen {
     @apply fixed w-full h-full top-0 left-0 z-1000 border-none rounded-none sm:p-8;
     background-color: #f6f5f4;
@@ -25,15 +45,6 @@
     border-color: @text-blue;
   }
 
-  &.float {
-    width: calc(100% - 2rem);
-    @apply fixed bottom-4 sm:relative sm:bottom-0 sm:w-full;
-
-    & .emoji-picker-react {
-      @apply bottom-16 sm:bottom-auto;
-    }
-  }
-
   > .tip-container {
     @apply mb-1 w-full flex flex-row justify-start items-center text-xs leading-6;
 
@@ -74,7 +85,7 @@
 
   .emoji-picker-react {
     @apply absolute;
-    
+
     li.emoji::before {
       @apply hidden;
     }