fix: stop skeleton card rows stretching to fill leftover space
163 unmodified linesExpand all164165166167168168169170171172129 unmodified linesExpand all163 unmodified linesExpand all}
export function TitleAndBylinePlaceholder({ creator }: { creator?: boolean }) { return ( <Skeleton.Col> <Skeleton.Col grow> <Skeleton.Text size="md" width="60%" /> {creator && <Skeleton.Text color="contrast_25" size="md" width="40%" />} </Skeleton.Col> );129 unmodified linesExpand all169 unmodified linesExpand all17017117217317417417517617717857 unmodified lines169 unmodified linesExpand all}
export function TitleAndBylinePlaceholder({ creator }: { creator?: boolean }) { return ( <Skeleton.Col> <Skeleton.Col grow> <Skeleton.Text size="md" width="60%" /> {creator && <Skeleton.Text color="contrast_25" size="md" width="40%" />} </Skeleton.Col> );57 unmodified lines205 unmodified linesExpand all20620720820921021021121221321462 unmodified lines205 unmodified linesExpand all
/** Placeholder for the title + byline stack that sits beside the icon. */function TitleAndBylinePlaceholder() { return ( <Skeleton.Col> <Skeleton.Col grow> <Skeleton.Text size="md" width="60%" /> <Skeleton.Text color="contrast_25" size="md_sub" width="40%" /> </Skeleton.Col> );62 unmodified lines231 unmodified linesExpand all232233234235236236237238239240211 unmodified linesExpand all231 unmodified linesExpand all * @param color contrast level of the placeholders; raise it on tinted surfaces. */export function NameAndHandlePlaceholder({ color }: { color?: Skeleton.Color }) { return ( <Skeleton.Col> <Skeleton.Col grow> <Skeleton.Text color={color} size="md" width="20%" /> <Skeleton.Text color={color} size="md_sub" width="25%" /> </Skeleton.Col> );211 unmodified linesExpand all153 unmodified linesExpand all1541551561571581581591601611 unmodified line163164165166167168169170171172173153 unmodified linesExpand allexport const col = recipe( { base: { display: 'flex', flex: 1, flexDirection: 'column', minWidth: 0, }, variants: {1 unmodified line md: { gap: space.md }, sm: { gap: space.sm }, xs: { gap: space.xs }, }, grow: { true: { flex: 1 }, }, }, }, { debugId: 'col' },);55 unmodified lines565758596060616263646566676869707170727374757683 unmodified lines55 unmodified lines}) { return <div className={clsx(styles.row({ align, gap }), className)}>{children}</div>;}
/** A flex-1 vertical flex group of placeholders. *//** A vertical flex group of placeholders. */export function Col({ children, className, gap, grow,}: { children?: ReactNode; className?: string; gap?: RecipeVariants<typeof styles.col>['gap']; grow?: boolean;}) { return <div className={clsx(styles.col({ gap }), className)}>{children}</div>; return <div className={clsx(styles.col({ gap, grow }), className)}>{children}</div>;}
/** Loading placeholder for a circular element (e.g. a user avatar), sized to `size` pixels. */export function Circle({83 unmodified lines162 unmodified linesExpand all1631641651661671671681691701714 unmodified lines162 unmodified linesExpand all return ( <div className={css.card}> <AvatarStack numPending={profileCount} profiles={[]} /> <div className={css.body}> <Skeleton.Col gap="xs"> <Skeleton.Col gap="xs" grow> <Skeleton.Text size="md" width={180} /> <Skeleton.Text size="sm" width={120} /> </Skeleton.Col> <div className={css.openPackPlaceholder} />4 unmodified lines19 unmodified lines202122232424252627282 unmodified lines19 unmodified lines return rows.map((row, i) => ( // oxlint-disable-next-line react/no-array-index-key -- static skeleton <Skeleton.Row key={i} align="start" className={css.item} gap="md"> <Skeleton.Circle size={40} /> <Skeleton.Col> <Skeleton.Col grow> <Skeleton.Text width={row.titleWidth} /> <Skeleton.Lines count={row.messageLines} lastWidth={row.messageLastWidth} size="md_sub" /> </Skeleton.Col> </Skeleton.Row>2 unmodified lines