From 57ce96d23efb4300b2636f2cd2e530d6fea9e12d Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Thu, 30 Jun 2022 21:30:07 +0800
Subject: [PATCH] chore: fix expand style

---
 web/src/components/Memo.tsx | 8 ++++----
 web/src/less/memo.less      | 7 +++++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 5052fc05..12b9aedc 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -165,12 +165,12 @@ const Memo: React.FC<Props> = (props: Props) => {
                   <span className="tip-text">Share</span>
                 </div>
               </div>
-              <span className="btn" onClick={handleShowMemoStoryDialog}>
-                View Story
-              </span>
               <span className="btn" onClick={handleMarkMemoClick}>
                 Mark
               </span>
+              <span className="btn" onClick={handleShowMemoStoryDialog}>
+                View Story
+              </span>
               <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
                 {showConfirmDeleteBtn ? "Delete!" : "Delete"}
               </span>
@@ -180,7 +180,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       </div>
       <div
         ref={memoContainerRef}
-        className={`memo-content-text ${state.expandButtonStatus === 0 ? "!max-h-96 overflow-y-hidden truncate" : ""}`}
+        className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}
       ></div>
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index d2525af6..22ec1b1c 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -88,6 +88,13 @@
   > .memo-content-text {
     @apply w-full h-auto transition-all;
 
+    &.expanded {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 8;
+      overflow: hidden;
+    }
+
     .tag-span {
       @apply cursor-pointer hover:opacity-80;
     }