From cf3957c2a23e5b2f65a2cff4c2b37fe45130960d Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 5 Aug 2025 01:00:18 +0530
Subject: [PATCH] feat: Example highlight in Privacy

---
 src/lib/components/Privacy.svelte | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Privacy.svelte b/src/lib/components/Privacy.svelte
index 70b34cda..d477c3d8 100644
--- a/src/lib/components/Privacy.svelte
+++ b/src/lib/components/Privacy.svelte
@@ -1,13 +1,14 @@
 <script>
   import * as Dialog from '$/components/ui/dialog';
   import ShieldIcon from '~icons/material-symbols/shield-lock-outline-rounded';
+  import ExternalLinkWrapper from '$/components/ExternalLinkWrapper.svelte';
 </script>
 
 <Dialog.Root>
   <Dialog.Trigger>
     <ShieldIcon />
   </Dialog.Trigger>
-  <Dialog.Content class="max-h-full overflow-y-auto">
+  <Dialog.Content class="max-h-full overflow-hidden overflow-y-auto p-12">
     <Dialog.Header>
       <Dialog.Title class="flex items-center gap-2 text-xl">
         <ShieldIcon class="size-8 text-green-700" />
@@ -34,9 +35,11 @@
         target="_blank">publicly available</a
       >.
     </p>
-    <p>
-      External services (PNG/SVG/Kroki exports, "Save to Mermaid Chart", "Repair with AI") will
-      share your diagram with those 3rd parties, and are highlighted in the UI.
-    </p>
+    <ExternalLinkWrapper domain="example.com" isVisible>
+      <p class="text-left">
+        External services (PNG/SVG/Kroki exports, "Save to Mermaid Chart", "Repair with AI", etc)
+        will share your diagram with those 3rd parties, and are highlighted in the UI on hover.
+      </p>
+    </ExternalLinkWrapper>
   </Dialog.Content>
 </Dialog.Root>