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;
variant?: 'default' | 'rounded' | 'slim';
showGroup?: boolean;
accountAction?: React.ReactElement;
fromBookmarks?: boolean;
className?: string;
}
@ -59,7 +58,6 @@ interface IStatus {
const Status: React.FC<IStatus> = (props) => {
const {
status,
accountAction,
avatarSize = 42,
focusable = true,
hoverable = true,
@ -385,33 +383,31 @@ const Status: React.FC<IStatus> = (props) => {
{statusInfo}
<div className='flex'>
<div className='grow'>
<AccountContainer
key={actualStatus.account_id}
id={actualStatus.account_id}
action={accountAction}
hideActions={!accountAction}
showAccountHoverCard={hoverable}
withLinkToProfile={hoverable}
approvalStatus={actualStatus.approval_status}
avatarSize={avatarSize}
/>
</div>
<AccountContainer
key={actualStatus.account_id}
id={actualStatus.account_id}
action={
<div className='flex flex-row-reverse items-center gap-1 self-baseline'>
<Link to={statusUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
<RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
</Link>
<StatusTypeIcon visibility={actualStatus.visibility} />
<StatusLanguagePicker status={actualStatus} />
{!!actualStatus.edited_at && (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<div className='flex flex-row-reverse items-center gap-1 self-baseline'>
<Link to={statusUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
<RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
</Link>
<StatusTypeIcon visibility={actualStatus.visibility} />
<StatusLanguagePicker status={actualStatus} />
{!!actualStatus.edited_at && (
<>
<Text tag='span' theme='muted' size='sm'>&middot;</Text>
<Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
</>
)}
</div>
<Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
</>
)}
</div>
}
showAccountHoverCard={hoverable}
withLinkToProfile={hoverable}
approvalStatus={actualStatus.approval_status}
avatarSize={avatarSize}
actionAlignment='top'
/>
</div>
<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 MissingIndicator from 'pl-fe/components/missing-indicator';
import SiteLogo from 'pl-fe/components/site-logo';
import Status from 'pl-fe/components/status';
import Spinner from 'pl-fe/components/ui/spinner';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useLogo } from 'pl-fe/hooks/use-logo';
import { iframeId } from 'pl-fe/iframe';
import { makeGetStatus } from 'pl-fe/selectors';
@ -25,7 +23,6 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
const history = useHistory();
const getStatus = useCallback(makeGetStatus(), []);
const intl = useIntl();
const { src: logoSrc } = useLogo();
const status = useAppSelector(state => getStatus(state, { id: params.statusId }));
@ -49,17 +46,11 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
}, '*');
}, [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 = () => {
if (loading) {
return <Spinner />;
} else if (status) {
return <Status status={status} accountAction={logo || undefined} variant='default' />;
return <Status status={status} variant='default' />;
} else {
return <MissingIndicator nested />;
}