@apify/ui-library 0.67.1 → 0.67.3-fixactorreadmeinlinecodeover-4ecb5d.23

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.67.1",
+    "version": "0.67.3-fixactorreadmeinlinecodeover-4ecb5d.23+5cbc5775c48",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "a5af4be08a617688ebd731af077ee5c8d7c1ebeb"
+    "gitHead": "5cbc5775c48fd61c63a7f703418c2fa1446fbb28"
 }

package/src/components/code/code_block/utils.tsx

@@ -27,18 +27,29 @@ export const getBashLinePrefixes = (
 
         if (bashCommandsStart.includes(i + 1)) {
             return (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    color={theme.color.lavender.base}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                >$</CodeHighlighterLineBashPrefix>
             );
         }
 
         if (isEmptyLine) {
             return (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine}/>
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                />
             );
         }
 
         return (
-            <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>&lt;</CodeHighlighterLineBashPrefix>
+            <CodeHighlighterLineBashPrefix
+                $isOneLine={isOneLine}
+                color={theme.color.lavender.base}
+                key={`code-highlighter-line-bash-prefix-${i}`}
+            >&lt;</CodeHighlighterLineBashPrefix>
         );
     });
 
@@ -49,5 +60,8 @@ export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> =
     const numberOfLines = code.split('\n').length;
     const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
 
-    return Object.fromEntries(numbersArray.map((number) => [number, <CodeHighlighterLinePrefix>{number}</CodeHighlighterLinePrefix>]));
+    return Object.fromEntries(numbersArray.map((number) => [
+        number,
+        <CodeHighlighterLinePrefix key={`code-highlighter-line-prefix-${number}`}>{number}</CodeHighlighterLinePrefix>,
+    ]));
 };

package/src/components/to_consolidate/markdown.tsx

@@ -259,12 +259,18 @@ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
     .${markdownClassNames.INLINE_CODE} {
         ${inlineCodeStyles}
         ${theme.typography.content.mobile.snippet}
+        /* prevents long URLs from overflowing its container */
+        hyphens: auto;
+        overflow-wrap: break-word;
+
         @media (min-width: ${theme.layout.tablet}) {
             ${theme.typography.content.tablet.snippet}
         }
+        
         @media (min-width: ${theme.layout.desktop}) {
             ${theme.typography.content.desktop.snippet}
         }
+        
         b, strong{
             font-size: inherit !important;
             line-height: inherit !important;