From 7c2d6e81a7f2ef714fef50d419a6ab1971837940 Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Mon, 9 Jun 2025 12:44:56 +0700
Subject: [PATCH 1/2] fix: improve back-to-top button to adapt layout changes
 properly

Update back-to-top button to accommodate properly
even if the max-width of the blog post is updated.
Use `fixed` position on mobile and `sticky` position
on large screens.
---
 src/assets/icons/IconArrowNarrowUp.svg |  1 +
 src/components/BackToTopButton.astro   | 34 ++++++++++----------------
 src/components/ShareLinks.astro        |  6 ++++-
 src/layouts/PostDetails.astro          | 14 ++++-------
 4 files changed, 24 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/icons/IconArrowNarrowUp.svg

diff --git a/src/assets/icons/IconArrowNarrowUp.svg b/src/assets/icons/IconArrowNarrowUp.svg
new file mode 100644
index 0000000000..ac166a36c5
--- /dev/null
+++ b/src/assets/icons/IconArrowNarrowUp.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-narrow-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M16 9l-4 -4" /><path d="M8 9l4 -4" /></svg>
\ No newline at end of file
diff --git a/src/components/BackToTopButton.astro b/src/components/BackToTopButton.astro
index 98650959b4..c2f7617df8 100644
--- a/src/components/BackToTopButton.astro
+++ b/src/components/BackToTopButton.astro
@@ -1,41 +1,33 @@
 ---
 import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
-
-/*
-In #btt-btn-container, left position is `left-[calc((var(--container-3xl)/2)+50%+1rem)]`.
-This is because we use `max-w-3xl` in `PostDetails.astro`.
-If `max-width` in `PostDetails.astro` get updated, make sure to update the `var(--container-3xl)` as well.
-max-w-3xl => var(--container-3xl)
-max-w-4xl => var(--container-4xl)
-max-w-5xl => var(--container-5xl) 
-etc...
-*/
+import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
 ---
 
 <div
   id="btt-btn-container"
   class:list={[
-    "fixed right-4 bottom-8 xl:right-auto xl:left-[calc((var(--container-3xl)/2)+50%+1rem)]",
-    "translate-y-14 opacity-0 transition-all duration-500",
+    "fixed right-4 bottom-8 z-50",
+    "md:sticky md:right-auto md:float-end md:mr-1",
+    "translate-y-14 opacity-0 transition duration-500",
   ]}
 >
   <button
     data-button="back-to-top"
     class:list={[
-      "group relative",
-      "size-14 rounded-full px-2 py-1 shadow-xl lg:h-8 lg:w-fit lg:rounded-md lg:shadow-none",
-      "bg-background lg:bg-transparent",
+      "group relative bg-background px-2 py-1",
+      "size-14 rounded-full shadow-xl",
+      "md:h-8 md:w-fit md:rounded-md md:shadow-none",
+      "md:bg-background/35 md:bg-clip-padding md:backdrop-blur-lg",
     ]}
   >
     <span
       id="progress-indicator"
-      class="absolute inset-0 -z-10 block size-14 scale-110 rounded-full bg-transparent lg:hidden lg:h-8 lg:rounded-md"
+      class="absolute inset-0 -z-10 block size-14 scale-110 rounded-full bg-transparent md:hidden md:h-8 md:rounded-md"
     ></span>
-    <IconChevronLeft class="inline-block rotate-90 lg:hidden" />
-    <span
-      class="sr-only underline decoration-dashed decoration-2 underline-offset-4 group-hover:text-accent lg:not-sr-only"
-    >
-      <span class="text-xl" tabindex="0">&uarr;</span> Back To Top
+    <IconChevronLeft class="inline-block rotate-90 md:hidden" />
+    <span class="sr-only text-sm group-hover:text-accent md:not-sr-only">
+      <IconArrowNarrowUp class="inline-block size-4" />
+      Back To Top
     </span>
   </button>
 </div>
diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
index 55a642ad01..6b95369dc9 100644
--- a/src/components/ShareLinks.astro
+++ b/src/components/ShareLinks.astro
@@ -7,7 +7,11 @@ const URL = Astro.url;
 
 {
   SHARE_LINKS.length > 0 && (
-    <div class="flex flex-none flex-col items-center justify-center gap-1 sm:items-end">
+    <div
+      class:list={[
+        "flex flex-none flex-col items-center justify-center gap-1 md:items-start",
+      ]}
+    >
       <span class="italic">Share this post on:</span>
       <div class="text-center">
         {SHARE_LINKS.map(social => (
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 039322edf9..a846060583 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -110,17 +110,13 @@ const nextPost =
 
     <EditPost class="sm:hidden" {hideEditPost} {post} />
 
-    <BackToTopButton />
+    <ul class="mt-4 mb-8 sm:my-8">
+      {tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} />)}
+    </ul>
 
-    <div
-      class="flex flex-col items-center justify-between gap-6 sm:flex-row sm:items-start sm:gap-8"
-    >
-      <ul class="self-start">
-        {tags.map(tag => <Tag tag={slugifyStr(tag)} tagName={tag} />)}
-      </ul>
+    <BackToTopButton />
 
-      <ShareLinks />
-    </div>
+    <ShareLinks />
 
     <hr class="my-6 border-dashed" />
 

From 93f504e75820eb72919b212e0a020c256d378322 Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Tue, 10 Jun 2025 08:00:09 +0700
Subject: [PATCH 2/2] refactor: update className style in ShareLink

---
 src/components/ShareLinks.astro | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
index 6b95369dc9..d65a0de1ea 100644
--- a/src/components/ShareLinks.astro
+++ b/src/components/ShareLinks.astro
@@ -7,11 +7,7 @@ const URL = Astro.url;
 
 {
   SHARE_LINKS.length > 0 && (
-    <div
-      class:list={[
-        "flex flex-none flex-col items-center justify-center gap-1 md:items-start",
-      ]}
-    >
+    <div class="flex flex-none flex-col items-center justify-center gap-1 md:items-start">
       <span class="italic">Share this post on:</span>
       <div class="text-center">
         {SHARE_LINKS.map(social => (