fix: grid style

web/src/less/editor.less

@@ -5,7 +5,8 @@
   @apply relative w-full h-full bg-white grow;
 
   > .common-editor-inputer {
-    @apply w-full h-full pt-1 pb-3 grow;
+    @apply w-full h-full mt-1 mb-4 grow;
+    .pretty-scroll-bar(2px, 0);
     font-size: 15px;
     line-height: 24px;
     resize: none;

web/src/less/home.less

@@ -5,6 +5,6 @@
 }
 
 #page-wrapper {
-  .flex(row, flex-start, flex-start);
-  @apply w-full h-full m-auto;
+  @apply w-full h-full m-auto grid;
+  grid-template-columns: 256px 1fr;
 }

web/src/less/memo-content.less

@@ -5,7 +5,7 @@
   @apply w-full whitespace-pre-wrap break-words;
 
   > p {
-    @apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap;
+    @apply inline-block w-full h-auto mb-1 text-base leading-6 whitespace-pre-wrap break-words;
   }
 
   .tag-span {

web/src/less/memo-filter.less

@@ -2,7 +2,7 @@
 
 .filter-query-container {
   .flex(row, flex-start, flex-start);
-  @apply w-full flex-wrap p-3 pb-1 text-sm leading-7;
+  @apply w-full flex-wrap p-2 pb-1 text-sm leading-7;
 
   > .tip-text {
     @apply mr-2;

web/src/less/memo-list.less

@@ -2,8 +2,8 @@
 
 .memo-list-container {
   .flex(column, flex-start, flex-start);
-  flex-grow: 1;
   width: 100%;
+  max-width: 100%;
   overflow-y: scroll;
   .hide-scroll-bar();
 

web/src/less/memo.less

@@ -3,7 +3,7 @@
 
 .memo-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
+  @apply w-full max-w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
 
   &.deleted-memo {
     @apply border-gray-200;

web/src/less/memos.less

@@ -2,14 +2,16 @@
 @import "./memos-header.less";
 
 .memos-wrapper {
-  .flex(row, flex-start, flex-start);
-  @apply w-auto h-full grow;
+  @apply w-full h-full overflow-x-hidden grid;
+  grid-template-columns: 384px 1fr;
 
   > .memo-editor-wrapper {
-    @apply w-96 h-full shrink-0 py-16 px-8 bg-white;
+    @apply w-full h-full py-16 px-8 bg-white;
   }
 
   > .memo-list-wrapper {
-    @apply w-auto h-full grow px-16 flex flex-col justify-start items-start;
+    @apply w-full h-full overflow-y-auto px-16 grid;
+    grid-auto-rows: min-content;
+    grid-auto-flow: dense;
   }
 }