From 066d41e56537eb71d9d2d45010734d69c457e168 Mon Sep 17 00:00:00 2001
From: Charly Gomez <charly.gomez@sentry.io>
Date: Fri, 16 May 2025 10:22:51 +0200
Subject: [PATCH] fix expandable on safari

---
 src/components/expandable/index.tsx         | 17 +++++++----------
 src/components/expandable/style.module.scss | 11 ++---------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/expandable/index.tsx b/src/components/expandable/index.tsx
index 34941445336dc..363f5ea5b5de0 100644
--- a/src/components/expandable/index.tsx
+++ b/src/components/expandable/index.tsx
@@ -57,6 +57,7 @@ export function Expandable({title, level = 'info', children, permalink, group}:
 
   function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
     const newVal = event.currentTarget.open;
+    setIsExpanded(newVal);
 
     if (id) {
       if (newVal) {
@@ -65,8 +66,6 @@ export function Expandable({title, level = 'info', children, permalink, group}:
         window.history.pushState({}, '', '#');
       }
     }
-
-    setIsExpanded(newVal);
   }
 
   return (
@@ -74,17 +73,15 @@ export function Expandable({title, level = 'info', children, permalink, group}:
       name={group}
       className={`${styles.expandable} callout !block ${'callout-' + level}`}
       open={isExpanded}
-      // We only need this to keep the URL hash in sync
-      onToggle={id ? toggleIsExpanded : undefined}
+      onToggle={toggleIsExpanded}
       id={id}
     >
       <summary className={`${styles['expandable-header']} callout-header`}>
-        <ChevronDownIcon
-          className={`${styles['expandable-icon-expanded']} callout-icon`}
-        />
-        <ChevronRightIcon
-          className={`${styles['expandable-icon-collapsed']} callout-icon`}
-        />
+        {isExpanded ? (
+          <ChevronDownIcon className="callout-icon" />
+        ) : (
+          <ChevronRightIcon className="callout-icon" />
+        )}
         <div>{title}</div>
       </summary>
       <div className={`${styles['expandable-body']} callout-body content-flush-bottom`}>
diff --git a/src/components/expandable/style.module.scss b/src/components/expandable/style.module.scss
index 54bd3ef6632c3..1d265dd73b9b4 100644
--- a/src/components/expandable/style.module.scss
+++ b/src/components/expandable/style.module.scss
@@ -8,7 +8,8 @@
 .expandable-body {
   margin-left: 1.6rem;
 
-  & ul, & ol {
+  & ul,
+  & ol {
     padding-left: 1.2rem;
   }
 }
@@ -21,12 +22,4 @@
   &:not(:open) .expandable-header {
     margin-bottom: 0;
   }
-
-  &:open .expandable-icon-collapsed {
-    display: none;
-  }
-
-  &:not(:open) .expandable-icon-expanded {
-    display: none;
-  }
 }