From 1ad180938ca081813cca6b2277a05cdc731d6e0a Mon Sep 17 00:00:00 2001
From: Bissbert <43237892+Bissbert@users.noreply.github.com>
Date: Mon, 11 May 2026 15:59:57 +0700
Subject: [PATCH] refactor(tools): move methodology disclosure below the tool
 widget

Users land directly on the interactive widget without having to scroll
past a collapsed prose block. The <details> SEO disclosure remains in
the DOM after the widget, keeping all content indexable, but no longer
gates access to the tool on page load. mb-6 replaced with mt-12 for
adequate visual separation below the widget.
---
 src/pages/tools/advanced.astro       | 6 +++---
 src/pages/tools/conversions.astro    | 6 +++---
 src/pages/tools/identification.astro | 6 +++---
 src/pages/tools/index.astro          | 6 +++---
 src/pages/tools/lab.astro            | 6 +++---
 src/pages/tools/measurement.astro    | 6 +++---
 src/pages/tools/optical.astro        | 6 +++---
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/pages/tools/advanced.astro b/src/pages/tools/advanced.astro
index 33b962a..80ce456 100644
--- a/src/pages/tools/advanced.astro
+++ b/src/pages/tools/advanced.astro
@@ -36,7 +36,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <AdvancedTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About these advanced tools &amp; methodology
         </summary>
@@ -83,8 +85,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <AdvancedTools client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/conversions.astro b/src/pages/tools/conversions.astro
index f3d68ff..f313b53 100644
--- a/src/pages/tools/conversions.astro
+++ b/src/pages/tools/conversions.astro
@@ -36,7 +36,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <ConversionTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About these converters
         </summary>
@@ -77,8 +79,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <ConversionTools client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/identification.astro b/src/pages/tools/identification.astro
index bca80ad..b92cf54 100644
--- a/src/pages/tools/identification.astro
+++ b/src/pages/tools/identification.astro
@@ -34,7 +34,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <IdentificationTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About the identifier &amp; methodology
         </summary>
@@ -82,8 +84,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <IdentificationTools client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/index.astro b/src/pages/tools/index.astro
index 7e7d366..376ff12 100644
--- a/src/pages/tools/index.astro
+++ b/src/pages/tools/index.astro
@@ -39,7 +39,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <ToolsHub client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About the gemmology toolkit
         </summary>
@@ -73,8 +75,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <ToolsHub client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/lab.astro b/src/pages/tools/lab.astro
index 95c9540..5d03c08 100644
--- a/src/pages/tools/lab.astro
+++ b/src/pages/tools/lab.astro
@@ -36,7 +36,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <LabTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About these lab tools &amp; methodology
         </summary>
@@ -87,8 +89,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <LabTools client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/measurement.astro b/src/pages/tools/measurement.astro
index 32dfa15..e0e5e98 100644
--- a/src/pages/tools/measurement.astro
+++ b/src/pages/tools/measurement.astro
@@ -39,7 +39,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <MeasurementTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About these calculators &amp; methodology
         </summary>
@@ -94,8 +96,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <MeasurementTools client:load />
     </div>
   </div>
 </BaseLayout>
diff --git a/src/pages/tools/optical.astro b/src/pages/tools/optical.astro
index 6097935..de19b16 100644
--- a/src/pages/tools/optical.astro
+++ b/src/pages/tools/optical.astro
@@ -38,7 +38,9 @@ const tools = [
         </p>
       </header>
 
-      <details class="group mb-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
+      <OpticalTools client:load />
+
+      <details class="group mt-12 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 open:bg-white">
         <summary class="cursor-pointer select-none text-sm font-medium text-crystal-700 hover:text-crystal-900 marker:text-slate-400">
           About these optical tools &amp; methodology
         </summary>
@@ -98,8 +100,6 @@ const tools = [
           </p>
         </div>
       </details>
-
-      <OpticalTools client:load />
     </div>
   </div>
 </BaseLayout>