feat(ui): improve mobile responsive layouts
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user