From c6beba22290134b899407b125d0a170e20725df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Mon, 15 Jun 2026 01:21:35 +0200
Subject: [PATCH] fix(import): keep the import cards on the SPA and balance the
 trio
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The JSON and CSV cards linked to the in-app docs with a raw anchor, so
tapping the schema link triggered a full-page reload that discarded an
in-progress paste or upload in the sibling card; route them through the
Next Link instead. The three import cards also dropped to a two-column grid
at md, orphaning the CSV card alone on a second row — add a three-column
track at xl so the set reads as one family.
---
 src/components/settings/import-panel.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/import-panel.tsx b/src/components/settings/import-panel.tsx
index f30fad3f8..c87efaee1 100644
--- a/src/components/settings/import-panel.tsx
+++ b/src/components/settings/import-panel.tsx
@@ -26,6 +26,7 @@
  */
 
 import { useCallback, useId, useRef, useState } from "react";
+import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertCircle,
@@ -67,7 +68,7 @@ export function ImportPanel() {
           {t("settings.sections.export.import.description")}
         </p>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
         <AppleHealthImportCard />
         <JsonImportCard />
         <CsvImportCard />
@@ -553,12 +554,12 @@ function JsonImportCard() {
 
       <p className="text-muted-foreground text-xs">
         {t("settings.sections.export.import.json.schemaHint")}{" "}
-        <a
+        <Link
           href="/docs/integrations/data-import"
           className="text-primary underline underline-offset-2"
         >
           {t("settings.sections.export.import.json.docsLink")}
-        </a>
+        </Link>
       </p>
 
       <div aria-live="polite" className="space-y-2">
@@ -778,12 +779,12 @@ function CsvImportCard() {
 
       <p className="text-muted-foreground text-xs">
         {t("settings.sections.export.import.csv.schemaHint")}{" "}
-        <a
+        <Link
           href="/docs/integrations/data-import"
           className="text-primary underline underline-offset-2"
         >
           {t("settings.sections.export.import.csv.docsLink")}
-        </a>
+        </Link>
       </p>
 
       <div aria-live="polite" className="space-y-2">