fix(web): link and font size adjustments (#498)

Closes #488

- fixes font size on mobile app
- fixes links to apify store

Author: jmikitova

src/web/src/components/actor/ActorCard.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { Actor } from "../../types";
-import { Text, Box, IconButton, ICON_BUTTON_VARIANTS, ActorAvatar, theme, clampLines } from "@apify/ui-library";
+import { Text, Box, ActorAvatar, theme, clampLines, Link } from "@apify/ui-library";
 import { PeopleIcon, CoinIcon, StarEmptyIcon, ExternalLinkIcon } from "@apify/ui-icons";
 import { formatNumber, formatDecimalNumber, formatPricing } from "../../utils/formatting";
 import { ActorStats, StructuredPricingInfo } from "../../types";
@@ -50,6 +50,29 @@ const BoxGroup = styled(Box)`
     align-items: center;
 `;
 
+const ExternalLinkButton = styled(Link)`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    border-radius: ${theme.radius.radius6};
+    background-color: ${theme.color.neutral.backgroundMuted};
+    border: 1px solid ${theme.color.neutral.border};
+    color: ${theme.color.neutral.text};
+    flex-shrink: 0;
+    text-decoration: none;
+
+    &:hover {
+        background-color: ${theme.color.neutral.hover};
+    }
+
+    & > * {
+        pointer-events: none;
+    }
+`;
+
 const StyledSeparator = styled(Box)`
     border-left: 1px solid ${theme.color.neutral.separatorSubtle};
     height: 8px;
@@ -200,8 +223,7 @@ export const ActorCard: React.FC<ActorCardProps> = ({
                         </ActorTitleWrapper>
                     </ActorHeader>
                     {customActionButton || (
-                        // @ts-expect-error IconButton doesn't recognize `to` and `hideExternalIcon` props from Button
-                        <IconButton Icon={ExternalLinkIcon} variant={ICON_BUTTON_VARIANTS.BORDERED} to={actor.url} hideExternalIcon className="flexShrink0" />
+                        <ExternalLinkButton to={actor.url} hideExternalIcon className="flexShrink0"><ExternalLinkIcon size="16" /></ExternalLinkButton>
                     )}
                 </ActorHeaderWithActionButton>
             </BoxRow>

src/web/src/utils/init-widget.tsx

@@ -70,6 +70,11 @@ function injectStylesheets(): void {
         href: "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap",
     });
 
+    // Inject base font size so 1rem = 10px in the iframe
+    injectElement("apify-base-font-size", "style", {
+        textContent: `html, :root { font-size: 10px !important; }`,
+    });
+
     // Inject CSS variables
     injectElement("apify-css-variables", "style", {
         textContent: `:root {${cssColorsVariablesLight}}`,