Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): improve mobile responsive layouts

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/dashboard/components/overview/announcements-panel.tsx
Vendored
+4 -4
View File
@@ -47,10 +47,10 @@ export function AnnouncementsPanel() {
loading={loading}
empty={!list.length}
emptyMessage={t('No announcements at this time')}
height='h-64'
height='h-56 sm:h-64'
>
<ScrollArea className='h-64'>
<div className='-mx-4 sm:-mx-5'>
<ScrollArea className='h-56 sm:h-64'>
<div className='-mx-3 sm:-mx-5'>
{list.map((item: AnnouncementItem, idx: number) => {
const key = item.id ?? `announcement-${idx}`
return (
@@ -59,7 +59,7 @@ export function AnnouncementsPanel() {
type='button'
onClick={() => handleAnnouncementClick(item)}
className={cn(
'group hover:bg-muted/40 w-full px-4 py-3.5 text-left transition-colors sm:px-5',
'group hover:bg-muted/40 w-full px-3 py-3 text-left transition-colors sm:px-5 sm:py-3.5',
idx < list.length - 1 && 'border-border/60 border-b'
)}
>
web/default/src/features/dashboard/components/overview/api-info-item.tsx
Vendored
+4 -4
View File
@@ -23,8 +23,8 @@ export function ApiInfoItemComponent(props: ApiInfoItemProps) {
const status = props.status
return (
<div className='group hover:bg-muted/40 flex items-center justify-between gap-3 px-4 py-3 transition-colors sm:px-5'>
<div className='flex min-w-0 flex-1 items-center gap-3'>
<div className='group hover:bg-muted/40 flex items-center justify-between gap-2 px-3 py-2.5 transition-colors sm:gap-3 sm:px-5 sm:py-3'>
<div className='flex min-w-0 flex-1 items-center gap-2 sm:gap-3'>
<span
className={cn(
'inline-block size-2 shrink-0 rounded-full',
@@ -91,7 +91,7 @@ export function ApiInfoItemComponent(props: ApiInfoItemProps) {
variant='ghost'
size='sm'
onClick={() => openExternalSpeedTest(item.url)}
className='size-7 p-0'
className='hidden size-7 p-0 sm:inline-flex'
title={t('External Speed Test')}
>
<Gauge className='size-3.5' />
@@ -111,7 +111,7 @@ export function ApiInfoItemComponent(props: ApiInfoItemProps) {
variant='ghost'
size='sm'
asChild
className='size-7 p-0'
className='hidden size-7 p-0 sm:inline-flex'
title={t('Open in New Tab')}
>
<a href={item.url} target='_blank' rel='noreferrer'>
web/default/src/features/dashboard/components/overview/api-info-panel.tsx
Vendored
+3 -3
View File
@@ -37,10 +37,10 @@ export function ApiInfoPanel() {
loading={loading}
empty={!list.length}
emptyMessage={t('No API routes configured')}
height='h-64'
height='h-56 sm:h-64'
>
<ScrollArea className='h-64'>
<div className='-mx-4 sm:-mx-5'>
<ScrollArea className='h-56 sm:h-64'>
<div className='-mx-3 sm:-mx-5'>
{list.map((item: ApiInfoItem, idx: number) => (
<div
key={item.url}
web/default/src/features/dashboard/components/overview/faq-panel.tsx
Vendored
+2 -2
View File
@@ -27,9 +27,9 @@ export function FAQPanel() {
loading={loading}
empty={!list.length}
emptyMessage={t('No FAQ entries available')}
height='h-80'
height='h-64 sm:h-80'
>
<ScrollArea className='h-80'>
<ScrollArea className='h-64 sm:h-80'>
<Accordion type='single' collapsible className='w-full'>
{list.map((item: FAQItem, idx: number) => {
const key = item.id ?? `faq-${idx}`
web/default/src/features/dashboard/components/overview/summary-cards.tsx
Vendored
+4 -9
View File
@@ -53,14 +53,9 @@ export function SummaryCards() {
return (
<div className='overflow-hidden rounded-lg border'>
<StaggerContainer className='grid sm:grid-cols-2 lg:grid-cols-3'>
{items.map((it, idx) => (
<StaggerItem
key={it.title}
className={`px-4 sm:px-5 ${
idx > 0 ? 'border-t sm:border-t-0 sm:border-l' : ''
}`}
>
<StaggerContainer className='divide-border/60 grid grid-cols-3 divide-x'>
{items.map((it) => (
<StaggerItem key={it.title} className='px-3 py-3 sm:px-5 sm:py-4'>
<StatCard
title={it.title}
value={it.value}
@@ -72,7 +67,7 @@ export function SummaryCards() {
<Button
variant='outline'
size='sm'
className='h-6 gap-1 px-2 text-xs'
className='hidden h-6 gap-1 px-2 text-xs sm:inline-flex'
asChild
>
<Link to='/wallet'>
web/default/src/features/dashboard/components/overview/uptime-panel.tsx
Vendored
+5 -5
View File
@@ -84,7 +84,7 @@ export function UptimePanel() {
loading={loading}
empty={!groups.length}
emptyMessage={t('No uptime monitoring configured')}
height='h-80'
height='h-64 sm:h-80'
headerActions={
<Button
variant='ghost'
@@ -100,11 +100,11 @@ export function UptimePanel() {
</Button>
}
>
<ScrollArea className='h-80'>
<div className='-mx-4 space-y-0 sm:-mx-5'>
<ScrollArea className='h-64 sm:h-80'>
<div className='-mx-3 space-y-0 sm:-mx-5'>
{groups.map((group, groupIdx) => (
<div key={group.categoryName}>
<div className='bg-muted/30 border-border/60 border-b px-4 py-2 sm:px-5'>
<div className='bg-muted/30 border-border/60 border-b px-3 py-2 sm:px-5'>
<div className='flex items-center gap-2'>
<h4 className='text-muted-foreground text-xs font-semibold tracking-wider uppercase'>
{group.categoryName}
@@ -120,7 +120,7 @@ export function UptimePanel() {
<div
key={monitor.name}
className={cn(
'hover:bg-muted/40 flex items-center justify-between px-4 py-2.5 transition-colors sm:px-5',
'hover:bg-muted/40 flex items-center justify-between gap-2 px-3 py-2 transition-colors sm:px-5 sm:py-2.5',
monitorIdx < (group.monitors?.length || 0) - 1 &&
'border-border/40 border-b',
groupIdx < groups.length - 1 &&