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; }