fix: expand btn display in front of menu (#1342)

* Docker

* fix:expand btn display issue

* restore Dockerfile

* change Header z-index to 2

* Update web/src/less/memo-content.less

Co-authored-by: boojack <stevenlgtm@gmail.com>

---------

Co-authored-by: boojack <stevenlgtm@gmail.com>

web/src/components/MobileHeader.tsx

@@ -28,7 +28,7 @@ const MobileHeader = (props: Props) => {
   }, [filter, shortcuts]);
 
   return (
-    <div className="sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex sm:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1">
+    <div className="sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex sm:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
         <div
           className="flex sm:hidden flex-row justify-center items-center w-6 h-6 mr-1 shrink-0 bg-transparent"

web/src/less/memo-content.less

@@ -107,8 +107,7 @@
   }
 
   > .expand-btn-container {
-    @apply w-full relative flex flex-row justify-start items-center;
-
+    @apply w-full relative flex flex-row justify-start items-center z-1;
     > .btn {
       @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-2 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 shadow hover:opacity-90 cursor-pointer;
 

web/tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
       },
       zIndex: {
         1: "1",
+        2: "2",
         20: "20",
         100: "100",
         1000: "1000",