Improve overall responsiveness on mobile devices (#214)

This commit is contained in:
Giancarlo Buomprisco
2025-03-19 10:24:53 +07:00
committed by GitHub
parent 4bba67246b
commit fcb37e7d75
7 changed files with 16 additions and 18 deletions

View File

@@ -3,15 +3,13 @@
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { LoadingOverlay } from '@kit/ui/loading-overlay'; import { LoadingOverlay } from '@kit/ui/loading-overlay';
import { Trans } from '@kit/ui/trans';
export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), { export const DashboardDemo = dynamic(() => import('./dashboard-demo-charts'), {
ssr: false, ssr: false,
loading: () => ( loading: () => (
<LoadingOverlay> <LoadingOverlay
<span className={'text-muted-foreground'}> fullPage={false}
<Trans i18nKey={'common:loading'} /> className={'flex flex-1 flex-col items-center justify-center'}
</span> />
</LoadingOverlay>
), ),
}); });

View File

@@ -162,7 +162,7 @@ function TeamAccountsModal(props: {
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className={'py-16'}> <div className={'py-6'}>
<AccountSelector <AccountSelector
className={'w-full max-w-full'} className={'w-full max-w-full'}
collisionPadding={0} collisionPadding={0}

View File

@@ -10,23 +10,23 @@
} }
.markdoc h1 { .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 { .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 { .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 { .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 { .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 { .markdoc h6 {
@@ -34,7 +34,7 @@
} }
.markdoc p { .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 { .markdoc li {

View File

@@ -1,5 +1,5 @@
@utility container { @utility container {
margin-inline: auto; margin-inline: auto;
@apply xl:max-w-[80rem] px-8; @apply xl:max-w-[80rem] px-4 lg:px-8;
} }

View File

@@ -172,7 +172,7 @@ function DeleteTeamConfirmationForm({
email={user.email} email={user.email}
onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })} onSuccess={(otp) => form.setValue('otp', otp, { shouldValidate: true })}
CancelButton={ CancelButton={
<AlertDialogCancel> <AlertDialogCancel className={'m-0'}>
<Trans i18nKey={'common:cancel'} /> <Trans i18nKey={'common:cancel'} />
</AlertDialogCancel> </AlertDialogCancel>
} }

View File

@@ -17,7 +17,7 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
className, className,
...props ...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'; CardHeader.displayName = 'CardHeader';
@@ -43,7 +43,7 @@ CardDescription.displayName = 'CardDescription';
const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
className, className,
...props ...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'; CardContent.displayName = 'CardContent';
const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({

View File

@@ -56,7 +56,7 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => ( }: React.HTMLAttributes<HTMLDivElement>) => (
<div <div
className={cn( className={cn(
'flex flex-col space-y-1.5 text-center sm:text-left', 'flex flex-col space-y-1.5 text-left',
className, className,
)} )}
{...props} {...props}