feat(ui): improve mobile responsive layouts

This commit is contained in:
CaIon
2026-04-30 19:53:02 +08:00
parent aa730395f1
commit d46df94f05
84 changed files with 1174 additions and 731 deletions
@@ -20,10 +20,10 @@ export function PanelWrapper(props: PanelWrapperProps) {
if (props.loading) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
<div className='text-sm font-semibold'>{props.title}</div>
</div>
<div className='p-4 sm:p-5'>
<div className='p-3 sm:p-5'>
<Skeleton className={`w-full ${height}`} />
</div>
</div>
@@ -33,7 +33,7 @@ export function PanelWrapper(props: PanelWrapperProps) {
if (props.empty) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
<div className='text-sm font-semibold'>{props.title}</div>
</div>
<div
@@ -47,9 +47,9 @@ export function PanelWrapper(props: PanelWrapperProps) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
{props.headerActions ? (
<div className='flex items-center justify-between'>
<div className='flex items-center justify-between gap-2'>
<div className='text-sm font-semibold'>{props.title}</div>
{props.headerActions}
</div>
@@ -57,7 +57,7 @@ export function PanelWrapper(props: PanelWrapperProps) {
<div className='text-sm font-semibold'>{props.title}</div>
)}
</div>
<div className='p-4 sm:p-5'>{props.children}</div>
<div className='p-3 sm:p-5'>{props.children}</div>
</div>
)
}