From 8c6c7c9364c19c869c343a8afe54c6e1be808c9b Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Thu, 23 Nov 2023 23:24:05 +0800
Subject: [PATCH] fix: back-to-top button breaks layout

https://github.com/saicaca/hexo-theme-vivia/issues/42
---
 src/components/control/BackToTop.astro | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/control/BackToTop.astro b/src/components/control/BackToTop.astro
index d3d191e..e4bffab 100644
--- a/src/components/control/BackToTop.astro
+++ b/src/components/control/BackToTop.astro
@@ -5,21 +5,19 @@ import Button from "./Button.astro";
 
 <!-- There can't be a filter on parent element, or it will break `fixed` -->
 <div class="back-to-top-wrapper hidden lg:block" transition:persist>
-    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition active:scale-90" onclick="topFunction()">
+    <div id="back-to-top-btn" class="back-to-top-btn hide flex items-center rounded-2xl overflow-hidden transition" onclick="topFunction()">
         <Button name="Back to Top" card height="60px" width="60px">
             <Icon name="material-symbols:keyboard-arrow-up-rounded" class="mx-auto"></Icon>
         </Button>
     </div>
 </div>
 
-
-
 <style lang="stylus">
 .back-to-top-wrapper
     width: 60px
     height: 60px
     position: absolute
-    right: -84px
+    right: 0
     top: 0
 
 .back-to-top-btn
@@ -31,12 +29,15 @@ import Button from "./Button.astro";
     bottom: 240px
     opacity: 1
     cursor: pointer
+    transform: translateX(80px)
     i
         font-size: 28px
     &.hide
-        transform: scale(0.9)
+        transform: translateX(80px) scale(0.9)
         opacity: 0
         pointer-events: none
+    &:active
+      transform: translateX(80px) scale(0.9)
 
 </style>