From 225c4a8dfba0060e31e68d19bcfeec85fc1f6ad5 Mon Sep 17 00:00:00 2001
From: email <imrealleonardo@gmail.com>
Date: Fri, 15 Apr 2022 00:34:37 +0800
Subject: [PATCH] fix: grid style

---
 web/src/less/editor.less       |  3 ++-
 web/src/less/home.less         |  4 ++--
 web/src/less/memo-content.less |  2 +-
 web/src/less/memo-filter.less  |  2 +-
 web/src/less/memo-list.less    |  2 +-
 web/src/less/memo.less         |  2 +-
 web/src/less/memos.less        | 10 ++++++----
 7 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/src/less/editor.less b/web/src/less/editor.less
index a1dc80fa..5b862979 100644
--- a/web/src/less/editor.less
+++ b/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;
diff --git a/web/src/less/home.less b/web/src/less/home.less
index a9d6eafb..cea4e47a 100644
--- a/web/src/less/home.less
+++ b/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;
 }
diff --git a/web/src/less/memo-content.less b/web/src/less/memo-content.less
index cddf47a4..55c9d993 100644
--- a/web/src/less/memo-content.less
+++ b/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 {
diff --git a/web/src/less/memo-filter.less b/web/src/less/memo-filter.less
index 754fb90b..f38223ad 100644
--- a/web/src/less/memo-filter.less
+++ b/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;
diff --git a/web/src/less/memo-list.less b/web/src/less/memo-list.less
index a8596956..a6d7899c 100644
--- a/web/src/less/memo-list.less
+++ b/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();
 
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index 52565d0b..d4ee60c2 100644
--- a/web/src/less/memo.less
+++ b/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;
diff --git a/web/src/less/memos.less b/web/src/less/memos.less
index 1f44bf67..88ec6f2a 100644
--- a/web/src/less/memos.less
+++ b/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;
   }
 }