matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: fix newly introduced overflows

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-13 19:31:56 +02:00
parent 914a57e951
commit 6f8c44d237
2 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/pl-fe/src/components/status.tsx
View File

@ -51,7 +51,6 @@ interface IStatus {
hoverable?: boolean; hoverable?: boolean;
variant?: 'default' | 'rounded' | 'slim'; variant?: 'default' | 'rounded' | 'slim';
showGroup?: boolean; showGroup?: boolean;
accountAction?: React.ReactElement;
fromBookmarks?: boolean; fromBookmarks?: boolean;
className?: string; className?: string;
} }
@ -59,7 +58,6 @@ interface IStatus {
const Status: React.FC<IStatus> = (props) => { const Status: React.FC<IStatus> = (props) => {
const { const {
status, status,
accountAction,
avatarSize = 42, avatarSize = 42,
focusable = true, focusable = true,
hoverable = true, hoverable = true,
@ -385,33 +383,31 @@ const Status: React.FC<IStatus> = (props) => {
{statusInfo} {statusInfo}
<div className='flex'> <div className='flex'>
<div className='grow'> <AccountContainer
<AccountContainer key={actualStatus.account_id}
key={actualStatus.account_id} id={actualStatus.account_id}
id={actualStatus.account_id} action={
action={accountAction} <div className='flex flex-row-reverse items-center gap-1 self-baseline'>
hideActions={!accountAction} <Link to={statusUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
showAccountHoverCard={hoverable} <RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
withLinkToProfile={hoverable} </Link>
approvalStatus={actualStatus.approval_status} <StatusTypeIcon visibility={actualStatus.visibility} />
avatarSize={avatarSize} <StatusLanguagePicker status={actualStatus} />
/> {!!actualStatus.edited_at && (
</div> <>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<div className='flex flex-row-reverse items-center gap-1 self-baseline'> <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
<Link to={statusUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}> </>
<RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' /> )}
</Link> </div>
<StatusTypeIcon visibility={actualStatus.visibility} /> }
<StatusLanguagePicker status={actualStatus} /> showAccountHoverCard={hoverable}
{!!actualStatus.edited_at && ( withLinkToProfile={hoverable}
<> approvalStatus={actualStatus.approval_status}
<Text tag='span' theme='muted' size='sm'>&middot;</Text> avatarSize={avatarSize}
actionAlignment='top'
<Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} /> />
</>
)}
</div>
</div> </div>
<div className='status__content-wrapper'> <div className='status__content-wrapper'>

11
packages/pl-fe/src/features/embedded-status/index.tsx
View File

@ -4,12 +4,10 @@ import { useHistory } from 'react-router-dom';
import { fetchStatus } from 'pl-fe/actions/statuses'; import { fetchStatus } from 'pl-fe/actions/statuses';
import MissingIndicator from 'pl-fe/components/missing-indicator'; import MissingIndicator from 'pl-fe/components/missing-indicator';
import SiteLogo from 'pl-fe/components/site-logo';
import Status from 'pl-fe/components/status'; import Status from 'pl-fe/components/status';
import Spinner from 'pl-fe/components/ui/spinner'; import Spinner from 'pl-fe/components/ui/spinner';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useLogo } from 'pl-fe/hooks/use-logo';
import { iframeId } from 'pl-fe/iframe'; import { iframeId } from 'pl-fe/iframe';
import { makeGetStatus } from 'pl-fe/selectors'; import { makeGetStatus } from 'pl-fe/selectors';
@ -25,7 +23,6 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
const history = useHistory(); const history = useHistory();
const getStatus = useCallback(makeGetStatus(), []); const getStatus = useCallback(makeGetStatus(), []);
const intl = useIntl(); const intl = useIntl();
const { src: logoSrc } = useLogo();
const status = useAppSelector(state => getStatus(state, { id: params.statusId })); const status = useAppSelector(state => getStatus(state, { id: params.statusId }));
@ -49,17 +46,11 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
}, '*'); }, '*');
}, [status, loading]); }, [status, loading]);
const logo = logoSrc && (
<div className='ml-4 flex justify-center align-middle'>
<SiteLogo className='max-h-[20px] max-w-[112px]' />
</div>
);
const renderInner = () => { const renderInner = () => {
if (loading) { if (loading) {
return <Spinner />; return <Spinner />;
} else if (status) { } else if (status) {
return <Status status={status} accountAction={logo || undefined} variant='default' />; return <Status status={status} variant='default' />;
} else { } else {
return <MissingIndicator nested />; return <MissingIndicator nested />;
} }