From f61ebcac58aeffd090795031d32bdf90a5b3154f Mon Sep 17 00:00:00 2001
From: Santiago Palenque <santipalenque@gmail.com>
Date: Thu, 12 Nov 2026 18:28:20 -0300
Subject: [PATCH] fix: move expand text read more beside the line clamp so
 Safari renders the text

---
 src/components/mui/ExpandText/index.jsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/mui/ExpandText/index.jsx b/src/components/mui/ExpandText/index.jsx
index 889ca9730..004d5c777 100644
--- a/src/components/mui/ExpandText/index.jsx
+++ b/src/components/mui/ExpandText/index.jsx
@@ -77,27 +77,25 @@ const ExpandText = ({ children, lines = DEFAULT_LINES, charCount }) => {
     );
   }
 
-  // flex parent gives the clamped box a definite height so the ::before spacer can use 100%
+  // toggle sits beside the clamp, not floated inside it: Safari blanks clamped text that wraps a float
   return (
-    <Box sx={{ display: "flex", overflowWrap: "anywhere" }}>
+    <Box
+      sx={{ display: "flex", alignItems: "flex-end", overflowWrap: "anywhere" }}
+    >
       <Box
         ref={textRef}
         sx={{
+          flex: 1,
+          minWidth: 0,
           display: "-webkit-box",
           WebkitLineClamp: lines,
           WebkitBoxOrient: "vertical",
-          overflow: "hidden",
-          // spacer float pushes the toggle down to the last visible line, so the ellipsis lands before it
-          "&::before": {
-            content: "\"\"",
-            float: "right",
-            height: "calc(100% - 1lh)"
-          }
+          overflow: "hidden"
         }}
       >
-        {isClamped && renderToggle({ float: "right", clear: "both", ml: 0.5 })}
         {text}
       </Box>
+      {isClamped && renderToggle({ flexShrink: 0, ml: 0.5 })}
     </Box>
   );
 };