From 1082d041ca04527e7d1ed4ef0604133ca9271947 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 9 Oct 2022 05:18:41 +0800
Subject: [PATCH] refactor: improve prompt box layout

When the prompt is inside the list, the icon position is outside the prompt box.

Introduced by fb13e32
---
 _sass/addon/commons.scss | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index c3a4961..9549d04 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -91,21 +91,25 @@ blockquote {
   color: var(--blockquote-text-color);
 
   &[class^="prompt-"] {
+    display: flex;
     border-left: 0;
     border-radius: 6px;
-    padding: 0.75rem 1.2rem 0.75rem 3rem;
+    padding: 1rem;
     color: var(--prompt-text-color);
 
     &::before {
       font-family: "Font Awesome 5 Free";
       text-align: center;
       width: 1.25rem;
-      position: absolute;
-      left: 2.5rem;
+      margin-right: 0.75rem;
     }
 
-    p:last-child {
-      margin-bottom: 0rem;
+    > div {
+      max-width: calc(100% - 2rem);
+
+      > :last-child {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -1199,12 +1203,11 @@ $sidebar-display: "sidebar-display";
 
     .post-content {
       > blockquote[class^=prompt-] {
+        @include pl-pr(1.25rem);
         @include ml-mr(-1.25rem);
-        border-radius: 0;
 
-        &::before {
-          left: 1rem;
-        }
+        border-radius: 0;
+        max-width: none;
       }
     }