fixes for toplevel media embeds

This commit is contained in:
k00b 2024-09-16 11:54:22 -05:00
parent d9213da268
commit 404cb0aaa7
2 changed files with 12 additions and 8 deletions

View File

@ -23,6 +23,7 @@ import { decodeProxyUrl, IMGPROXY_URL_REGEXP } from '@/lib/url'
import { numWithUnits } from '@/lib/format' import { numWithUnits } from '@/lib/format'
import { useQuoteReply } from './use-quote-reply' import { useQuoteReply } from './use-quote-reply'
import { UNKNOWN_LINK_REL } from '@/lib/constants' import { UNKNOWN_LINK_REL } from '@/lib/constants'
import classNames from 'classnames'
function BioItem ({ item, handleClick }) { function BioItem ({ item, handleClick }) {
const { me } = useMe() const { me } = useMe()
@ -89,7 +90,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
belowTitle={item.forwards && item.forwards.length > 0 && <FwdUsers forwards={item.forwards} />} belowTitle={item.forwards && item.forwards.length > 0 && <FwdUsers forwards={item.forwards} />}
{...props} {...props}
> >
<article className={styles.fullItemContainer} ref={textRef}> <article className={classNames(styles.fullItemContainer, 'topLevel')} ref={textRef}>
{item.text && <ItemText item={item} />} {item.text && <ItemText item={item} />}
{item.url && !item.outlawed && <ItemEmbed url={item.url} imgproxyUrls={item.imgproxyUrls} />} {item.url && !item.outlawed && <ItemEmbed url={item.url} imgproxyUrls={item.imgproxyUrls} />}
{item.poll && <Poll item={item} />} {item.poll && <Poll item={item} />}

View File

@ -143,7 +143,7 @@
margin: 0 !important; margin: 0 !important;
} }
.text>*:last-child { .text>*:last-child:not(.textShowFull) {
padding-bottom: 0 !important; padding-bottom: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@ -229,7 +229,7 @@
object-position: left top; object-position: left top;
} }
.topLevel .mediaContainer { .topLevel .mediaContainer, :global(.topLevel) .mediaContainer {
max-height: 35vh; max-height: 35vh;
} }
@ -331,7 +331,10 @@ img.fullScreen {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper, .topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer { .topLevel .twitterContainer, .topLevel .nostrContainer, .topLevel .videoWrapper,
.topLevel .wavlakeWrapper, .topLevel .spotifyWrapper, .topLevel .mediaContainer,
:global(.topLevel) .twitterContainer, :global(.topLevel) .nostrContainer, :global(.topLevel) .videoWrapper,
:global(.topLevel) .wavlakeWrapper, :global(.topLevel) .spotifyWrapper, :global(.topLevel) .mediaContainer {
margin-top: 0.375rem; margin-top: 0.375rem;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
} }
@ -340,7 +343,7 @@ img.fullScreen {
max-width: 320px; max-width: 320px;
} }
.topLevel .videoWrapper { .topLevel .videoWrapper, :global(.topLevel) .videoWrapper {
max-width: 640px; max-width: 640px;
margin: 0.75rem 0; margin: 0.75rem 0;
} }
@ -383,7 +386,7 @@ img.fullScreen {
overflow: hidden; overflow: hidden;
} }
.topLevel .twitterContained { .topLevel .twitterContained, :global(.topLevel) .twitterContained {
height: 200px; height: 200px;
} }
@ -404,7 +407,7 @@ img.fullScreen {
padding-right: 12px; padding-right: 12px;
} }
.topLevel .tweetsSkeleton { .topLevel .tweetsSkeleton, :global(.topLevel) .tweetsSkeleton {
max-width: 550px; max-width: 550px;
} }
@ -419,7 +422,7 @@ img.fullScreen {
padding: 1.5rem; padding: 1.5rem;
} }
.topLevel .tweetSkeleton { .topLevel .tweetSkeleton, :global(.topLevel) .tweetSkeleton {
height: 200px; height: 200px;
} }