fix: project card style (#66)

Author: ndthanhdev

apps/app/src/components/fragments/project-card/index.tsx

@@ -4,6 +4,19 @@ import { Link as GatsbyLink } from "gatsby";
 
 import { styles } from "./styles";
 
+export interface MediaProps {
+	title: string;
+	url: string;
+}
+
+export const Media = ({ title, url }: MediaProps) => {
+	return (
+		<mui.Box css={styles.media}>
+			<iframe css={styles.mediaIframe} src={url} title={title} />
+		</mui.Box>
+	);
+};
+
 export interface ProjectCardProps {
 	description?: string;
 	onCopy?: () => void;
@@ -19,12 +32,7 @@ export const ProjectCard = ({
 }: ProjectCardProps) => {
 	return (
 		<mui.Card css={styles.root}>
-			<mui.CardMedia
-				component="iframe"
-				css={styles.media}
-				src={url}
-				title={title}
-			/>
+			<mui.CardMedia component={Media} title={title} url={url} />
 			<mui.Divider />
 			<mui.CardContent css={styles.content}>
 				<mui.Typography gutterBottom variant="h5">

apps/app/src/components/fragments/project-card/styles.ts

@@ -17,13 +17,23 @@ export const styles = {
 	}),
 
 	media: (theme: AppTheme) =>
+		css({
+			height: theme.spacing(27),
+			overflow: "hidden",
+			pointerEvents: "none",
+			position: "relative",
+			width: theme.spacing(40),
+		}),
+
+	mediaIframe: () =>
 		css({
 			border: 0,
-			height: theme.spacing(300),
+			height: "500%",
 			overflow: "hidden",
 			pointerEvents: "none",
-			width: theme.spacing(400),
-			zoom: 0.1,
+			transform: "scale(0.2)",
+			transformOrigin: "top left",
+			width: "500%",
 		}),
 
 	root: (theme: AppTheme) =>