From 1e5a3e8c7ce682bb2aa66c7cba6e61a4791e2ad6 Mon Sep 17 00:00:00 2001
From: Claire Peng <clairepeng94@gmail.com>
Date: Sat, 3 May 2025 17:21:21 +0100
Subject: [PATCH 1/2] move line-clamp for .renderable-alt to global.scss for
 workaround on safari

---
 src/components/Image/index.astro | 3 +--
 styles/global.scss               | 9 +++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Image/index.astro b/src/components/Image/index.astro
index 1aa6a0825d..0115d5fc7c 100644
--- a/src/components/Image/index.astro
+++ b/src/components/Image/index.astro
@@ -37,8 +37,7 @@ const noAltText = t("No alt text");
     class:list={[
       "renderable-alt",
       "text-body-caption",
-      "bg-bg-gray-40 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl text-ellipsis",
-      "line-clamp-3 hover:line-clamp-none",
+      "bg-bg-gray-40 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl",
       props.visibleAltTextClass,
     ]}
   >
diff --git a/styles/global.scss b/styles/global.scss
index 5f34f2ec78..85a30c7cc2 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -509,6 +509,15 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .show-alt-text .renderable-alt {
   display: -webkit-box; // Needs webkit box to support line-clamp
+  // The below is a workaround for known issues with Safari compatibility for Tailwind line-clamp
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+}
+
+.show-alt-text .renderable-alt:hover {
+  -webkit-line-clamp: unset;
 }
 
 .dark-theme.monochrome-theme .renderable-alt{

From 8acf4aebad3761f562bc27abc8fc7e902937a3c1 Mon Sep 17 00:00:00 2001
From: Claire Peng <claire.peng@justeattakeaway.com>
Date: Mon, 12 May 2025 16:51:46 +0100
Subject: [PATCH 2/2] remove comment above getSketchSize, not accurate after
 issue discussion

---
 src/api/OpenProcessing.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/api/OpenProcessing.ts b/src/api/OpenProcessing.ts
index adb842b669..b73255db5b 100644
--- a/src/api/OpenProcessing.ts
+++ b/src/api/OpenProcessing.ts
@@ -104,11 +104,6 @@ export const getSketch = memoize(
   return payload as OpenProcessingSketchResponse;
 });
 
-/**
- * Note: this currently calls `/api/sketch/:id/code`
- * But only uses the width and height properties from this call
- * Width and height should instead be added to properties for `/api/sketch/:id` or `api/curation/:curationId/sketches` instead
- */
 export const getSketchSize = memoize(async (id: string) => {
   const sketch = await getSketch(id)
   if (sketch.mode !== 'p5js') {