Improve overall responsiveness on mobile devices (#214)
This commit is contained in:
committed by
GitHub
parent
4bba67246b
commit
fcb37e7d75
@@ -3,15 +3,13 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
import { LoadingOverlay } from '@kit/ui/loading-overlay';
|
||||
import { Trans } from '@kit/ui/trans';
|
||||
|
||||
export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<LoadingOverlay>
|
||||
<span className={'text-muted-foreground'}>
|
||||
<Trans i18nKey={'common:loading'} />
|
||||
</span>
|
||||
</LoadingOverlay>
|
||||
<LoadingOverlay
|
||||
fullPage={false}
|
||||
className={'flex flex-1 flex-col items-center justify-center'}
|
||||
/>
|
||||
),
|
||||
});
|
||||
|
||||
@@ -162,7 +162,7 @@ function TeamAccountsModal(props: {
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className={'py-16'}>
|
||||
<div className={'py-6'}>
|
||||
<AccountSelector
|
||||
className={'w-full max-w-full'}
|
||||
collisionPadding={0}
|
||||
|
||||
@@ -10,23 +10,23 @@
|
||||
}
|
||||
|
||||
.markdoc h1 {
|
||||
@apply mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
||||
@apply mt-8 lg:mt-14 text-4xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
||||
}
|
||||
|
||||
.markdoc h2 {
|
||||
@apply mb-6 mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
|
||||
@apply mb-3 lg:mb-6 mt-6 lg:mt-12 font-semibold text-2xl font-heading tracking-tight dark:text-white text-foreground;
|
||||
}
|
||||
|
||||
.markdoc h3 {
|
||||
@apply mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
||||
@apply mt-6 lg:mt-12 text-xl font-semibold font-heading tracking-tight dark:text-white text-foreground;
|
||||
}
|
||||
|
||||
.markdoc h4 {
|
||||
@apply mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
|
||||
@apply mt-4 lg:mt-8 text-lg font-medium tracking-tight dark:text-white text-foreground;
|
||||
}
|
||||
|
||||
.markdoc h5 {
|
||||
@apply mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
|
||||
@apply mt-3 lg:mt-6 text-base font-medium tracking-tight dark:text-white text-foreground;
|
||||
}
|
||||
|
||||
.markdoc h6 {
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.markdoc p {
|
||||
@apply mb-6 mt-4 text-base leading-7 text-muted-foreground;
|
||||
@apply mb-3 lg:mb-6 mt-2 lg:mt-4 text-base leading-7 text-muted-foreground;
|
||||
}
|
||||
|
||||
.markdoc li {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@utility container {
|
||||
margin-inline: auto;
|
||||
|
||||
@apply xl:max-w-[80rem] px-8;
|
||||
@apply xl:max-w-[80rem] px-4 lg:px-8;
|
||||
}
|
||||
|
||||
@@ -172,7 +172,7 @@ function DeleteTeamConfirmationForm({
|
||||
email={user.email}
|
||||
onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
|
||||
CancelButton={
|
||||
<AlertDialogCancel>
|
||||
<AlertDialogCancel className={'m-0'}>
|
||||
<Trans i18nKey={'common:cancel'} />
|
||||
</AlertDialogCancel>
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
||||
className,
|
||||
...props
|
||||
}) => (
|
||||
<div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
||||
<div className={cn('flex flex-col space-y-1.5 p-4 lg:p-6', className)} {...props} />
|
||||
);
|
||||
CardHeader.displayName = 'CardHeader';
|
||||
|
||||
@@ -43,7 +43,7 @@ CardDescription.displayName = 'CardDescription';
|
||||
const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
||||
className,
|
||||
...props
|
||||
}) => <div className={cn('p-6 pt-0', className)} {...props} />;
|
||||
}) => <div className={cn('p-4 pt-0 lg:p-6 lg:pt-0', className)} {...props} />;
|
||||
CardContent.displayName = 'CardContent';
|
||||
|
||||
const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
|
||||
|
||||
@@ -56,7 +56,7 @@ const DialogHeader = ({
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col space-y-1.5 text-center sm:text-left',
|
||||
'flex flex-col space-y-1.5 text-left',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user