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

Make floating column header pretty much work

Browse Source
This commit is contained in:
Alex Gleason
2023-04-05 13:16:18 -05:00
parent 96cece3d2e
commit 9e62226bd1
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/components/ui/card/card.tsx
View File

@ -35,7 +35,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
ref={ref}
{...filteredProps}
className={clsx({
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
[sizes[size]]: variant === 'rounded',
}, className)}
>
@ -74,7 +74,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
};
return (
<HStack alignItems='center' space={2} className={clsx('mb-4', className)}>
<HStack alignItems='center' space={2} className={className}>
{renderBackButton()}
{children}

6
app/soapbox/components/ui/column/column.tsx
View File

@ -85,8 +85,10 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
label={label}
backHref={backHref}
className={clsx({
'px-4 pt-4 sm:p-0': transparent,
'mb-6': size === 'lg',
'sticky top-12 z-10 bg-white dark:bg-primary-900 lg:top-16': !transparent,
'p-4 sm:p-0 sm:pb-4': transparent,
'-mt-4 py-4': size !== 'lg' && !transparent,
'-mt-4 py-4 sm:-mt-6 sm:py-6': size === 'lg' && !transparent,
})}
action={action}
/>

4
app/soapbox/features/status/index.tsx
View File

@ -485,7 +485,7 @@ const Thread: React.FC<IThread> = (props) => {
{!isUnderReview ? (
<>
<hr className='-mx-6 mb-2 border-t-2 dark:border-primary-800' />
<hr className='-mx-6 mb-2 max-w-[100vw] border-t-2 dark:border-primary-800' />
<StatusActionBar
status={status}
@ -499,7 +499,7 @@ const Thread: React.FC<IThread> = (props) => {
</HotKeys>
{hasDescendants && (
<hr className='-mx-6 mt-2 border-t-2 dark:border-primary-800' />
<hr className='-mx-6 mt-2 max-w-[100vw] border-t-2 dark:border-primary-800' />
)}
</div>
);