ShareX
/
micro
mirror of https://github.com/sylv/micro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(web): images overflowing container

This commit is contained in:
sylv 2022-07-26 05:59:24 +08:00
parent 531aeb6a26
commit 840defcf6d
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/components/embed/embed.tsx
View File

@ -12,7 +12,8 @@ interface EmbedProps {
data: Embeddable;
}
export const BASE_EMBED_CLASSES = 'min-h-[25em] max-h-[70vh] bg-dark-200 rounded-lg w-full';
export const MAX_HEIGHT = 'max-h-[70vh]';
export const BASE_EMBED_CLASSES = `min-h-[150px] bg-dark-200 rounded-lg w-full ${MAX_HEIGHT}`;
export const Embed: FC<EmbedProps> = memo(({ data }) => {
const isText = useMemo(() => EmbedText.embeddable(data), [data]);

10
packages/web/src/components/embed/variants/embed-image.tsx
View File

@ -1,20 +1,22 @@
import classNames from 'classnames';
import Head from 'next/head';
import { Fragment } from 'react';
import { BASE_EMBED_CLASSES } from '../embed';
import { BASE_EMBED_CLASSES, MAX_HEIGHT } from '../embed';
import type { Embeddable } from '../embeddable';
export const EmbedImage = ({ data }: { data: Embeddable }) => {
const classes = classNames('flex items-center justify-center', BASE_EMBED_CLASSES);
const containerClasses = classNames('flex items-center justify-center relative', BASE_EMBED_CLASSES);
const imageClasses = classNames(`object-contain`, MAX_HEIGHT);
return (
<Fragment>
<Head>
<meta name="twitter:image" content={data.paths.direct} />
<meta property="og:image" content={data.paths.direct} />
</Head>
<div className={classes}>
<div className={containerClasses}>
<img
className="object-contain "
className={imageClasses}
src={data.paths.direct}
alt={data.displayName}
height={data.height || undefined}