feat: remove sticky style for memo editor (#752)

web/src/components/MemoFilter.tsx

@@ -16,7 +16,7 @@ const MemoFilter = () => {
 
   return (
     <div className={`filter-query-container ${showFilter ? "" : "!hidden"}`}>
-      <span className="tip-text">{t("common.filter")}:</span>
+      <span className="mx-2 text-gray-400">{t("common.filter")}:</span>
       <div
         className={"filter-item-container " + (shortcut ? "" : "!hidden")}
         onClick={() => {

web/src/components/MemosHeader.tsx

@@ -36,7 +36,7 @@ const MemosHeader = () => {
   }, []);
 
   return (
-    <div className="section-header-container memos-header-container">
+    <div className="memos-header-container">
       <div className="title-container">
         <div className="action-btn" onClick={() => toggleSidebar(true)}>
           <Icon.Menu className="icon-img" />

web/src/less/home.less

@@ -16,7 +16,7 @@
       @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
 
       > .memos-editor-wrapper {
-        @apply sticky top-0 w-full h-full flex flex-col justify-start items-start z-10 bg-zinc-100 dark:bg-zinc-800;
+        @apply w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800;
       }
 
       > .addition-btn-container {

web/src/less/memo-filter.less

@@ -1,9 +1,5 @@
 .filter-query-container {
-  @apply flex flex-row justify-start items-start w-full flex-wrap p-2 pb-1 text-sm font-mono leading-7 dark:text-gray-300;
+  @apply flex flex-row justify-start items-start w-full flex-wrap px-2 pt-2 text-sm font-mono leading-7 dark:text-gray-300;
-
-  > .tip-text {
-    @apply mr-2;
-  }
 
   > .filter-item-container {
     @apply flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through;

web/src/less/memo-list.less

@@ -1,5 +1,5 @@
 .memo-list-container {
-  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36 hide-scrollbar;
+  @apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll hide-scrollbar;
 
   > .status-text-container {
     @apply flex flex-col justify-start items-center w-full my-6;
@@ -12,8 +12,4 @@
       @apply text-sm text-gray-400 italic;
     }
   }
-
-  &.completed {
-    @apply pb-16;
-  }
 }

web/src/less/memos-header.less

@@ -1,6 +1,5 @@
-.section-header-container,
 .memos-header-container {
-  @apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-10;
+  @apply sticky top-0 pt-4 pb-1 mb-1 backdrop-blur-sm flex flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-10;
 
   > .title-container {
     @apply flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden;

web/src/less/search-bar.less

@@ -25,7 +25,7 @@
 
     > .quickly-action-container {
       @apply flex flex-col justify-start items-start w-full bg-white dark:bg-zinc-700 px-4 py-3 rounded-lg;
-      box-shadow: 0 0 8px 0 rgb(0 0 0 / 40%);
+      box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
 
       > .title-text {
         @apply text-gray-600 dark:text-gray-400 text-xs;

web/src/pages/Home.tsx

@@ -41,8 +41,8 @@ function Home() {
       <div className="page-container">
         <Sidebar />
         <main className="memos-wrapper">
+          <MemosHeader />
           <div className="memos-editor-wrapper">
-            <MemosHeader />
             {!userService.isVisitorMode() && <MemoEditor />}
             <MemoFilter />
           </div>