kevisual/cnb-center
1
0
Fork 0
generated from kevisual/vite-react-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化移动端页面体验

Browse Source 
- repos 页面：标题和按钮移动端换行显示，响应式布局优化
- config 页面：移动端无边框，全屏宽度，按钮垂直堆叠
- gitea config 页面：同 config 页面优化
- BuildConfig、RepoCard、Dialog 等组件响应式优化
This commit is contained in:
xiongxiao
2026-03-13 05:39:26 +08:00
committed by cnb
parent a40cc2175e
commit 500ceb2e42
8 changed files with 120 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/config/gitea/page.tsx
View File

@@ -1,5 +1,4 @@
import { useGiteaConfigStore } from './store'; import { useGiteaConfigStore } from './store';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -39,15 +38,15 @@ export const GiteaConfigPage = () => {
}; };
return ( return (
<div className="container mx-auto max-w-2xl py-8"> <div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
<Card> <div className="bg-white md:rounded-lg md:border md:shadow-sm">
<CardHeader> <div className="p-4 md:p-6 border-b">
<CardTitle>Gitea 配置</CardTitle> <h1 className="text-xl md:text-2xl font-bold">Gitea 配置</h1>
<CardDescription> <p className="text-sm text-muted-foreground mt-1">
配置您的 Gitea API 设置。这些设置会保存在浏览器的本地存储中。 配置您的 Gitea API 设置。这些设置会保存在浏览器的本地存储中。
</CardDescription> </p>
</CardHeader> </div>
<CardContent> <div className="p-4 md:p-6">
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="gitea-url">Gitea 地址</Label> <Label htmlFor="gitea-url">Gitea 地址</Label>
@@ -71,24 +70,24 @@ export const GiteaConfigPage = () => {
/> />
</div> </div>
<div className="flex gap-4"> <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
<Button type="submit">保存配置</Button> <Button type="submit" className="w-full sm:w-auto">保存配置</Button>
<Button type="button" variant="outline" onClick={resetConfig}> <Button type="button" variant="outline" onClick={resetConfig} className="w-full sm:w-auto">
重置为默认值 重置为默认值
</Button> </Button>
{layoutStore.me && <> {layoutStore.me && <>
<Button type="button" variant="outline" onClick={loadFromRemote}> <Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
获取远端配置 获取远端配置
</Button> </Button>
<Button type="button" variant="outline" onClick={saveToRemote}> <Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
保存到远端 保存到远端
</Button> </Button>
</> </>
} }
</div> </div>
</form> </form>
</CardContent> </div>
</Card> </div>
</div> </div>
); );
}; };

27
src/pages/config/page.tsx
View File

@@ -1,5 +1,4 @@
import { useConfigStore } from './store'; import { useConfigStore } from './store';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -19,15 +18,15 @@ export const ConfigPage = () => {
return ( return (
<TooltipProvider> <TooltipProvider>
<div className="container mx-auto max-w-2xl py-8"> <div className="container mx-auto max-w-2xl py-4 md:py-8 px-4">
<Card> <div className="bg-white md:rounded-lg md:border md:shadow-sm">
<CardHeader> <div className="p-4 md:p-6 border-b">
<CardTitle>CNB 配置</CardTitle> <h1 className="text-xl md:text-2xl font-bold">CNB 配置</h1>
<CardDescription> <p className="text-sm text-muted-foreground mt-1">
配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。 配置您的 CNB API 设置。这些设置会保存在浏览器的本地存储中。
</CardDescription> </p>
</CardHeader> </div>
<CardContent> <div className="p-4 md:p-6">
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -91,17 +90,17 @@ export const ConfigPage = () => {
/> />
</div> </div>
<div className="flex gap-4"> <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
<Button type="button" variant="outline" onClick={loadFromRemote}> <Button type="button" variant="outline" onClick={loadFromRemote} className="w-full sm:w-auto">
获取远端配置 获取远端配置
</Button> </Button>
<Button type="button" variant="outline" onClick={saveToRemote}> <Button type="button" variant="outline" onClick={saveToRemote} className="w-full sm:w-auto">
保存到远端 保存到远端
</Button> </Button>
</div> </div>
</form> </form>
</CardContent> </div>
</Card> </div>
</div> </div>
</TooltipProvider> </TooltipProvider>
); );

23
src/pages/repos/components/BuildConfig.tsx
View File

@@ -59,23 +59,24 @@ export const BuildConfig = () => {
return <div>Loading...</div> return <div>Loading...</div>
} }
return ( return (
<div className="flex gap-4 h-full overflow-hidden"> <div className="flex flex-col md:flex-row gap-3 md:gap-4 h-full overflow-hidden">
{/* 左侧边栏 - 配置信息 */} {/* 左侧边栏 - 配置信息 */}
<div className="w-64 shrink-0 space-y-4"> <div className="w-full md:w-64 shrink-0 space-y-3 md:space-y-4 order-2 md:order-1">
<div className="text-xl font-bold border-b pb-2 mb-4 flex"> <div className="text-lg md:text-xl font-bold border-b pb-2 mb-3 md:mb-4 flex items-center gap-2">
<button <button
onClick={() => navigate({ to: '/' })} onClick={() => navigate({ to: '/' })}
className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors" className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors shrink-0"
> >
<ArrowLeft className="w-4 h-4 text-neutral-600" /> <ArrowLeft className="w-4 h-4 text-neutral-600" />
</button> </button>
<span className="text-lg font-semibold">构建配置</span> <span className="text-base md:text-lg font-semibold truncate">构建配置</span>
<button <button
onClick={repoStore.buildWorkspace} onClick={repoStore.buildWorkspace}
className="ml-auto p-2 text-sm cursor-pointer bg-gray-500 text-white rounded hover:bg-gray-600 flex items-center" className="ml-auto p-1.5 md:p-2 text-xs md:text-sm cursor-pointer bg-gray-500 text-white rounded hover:bg-gray-600 flex items-center gap-1"
title="构建工作空间" title="构建工作空间"
> >
<Workflow className="w-4 h-4" /> <Workflow className="w-3 h-3 md:w-4 md:h-4" />
<span className="hidden md:inline">构建</span>
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@@ -105,19 +106,19 @@ export const BuildConfig = () => {
</div> </div>
{/* 右侧 - 编辑器 */} {/* 右侧 - 编辑器 */}
<div className="flex-1 flex flex-col h-full "> <div className="flex-1 flex flex-col h-full order-1 md:order-2 min-h-[300px] md:min-h-0">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2 gap-2">
<span className="text-sm font-medium">配置文件</span> <span className="text-sm font-medium">配置文件</span>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={handleSave} onClick={handleSave}
className="px-3 cursor-pointer py-1 text-sm bg-primary text-white rounded hover:bg-primary/90" className="px-2 md:px-3 cursor-pointer py-1 text-xs md:text-sm bg-primary text-white rounded hover:bg-primary/90"
> >
保存 保存
</button> </button>
<button <button
onClick={() => repoStore.deleteBuildConfig({ repo: repo, user: me })} onClick={() => repoStore.deleteBuildConfig({ repo: repo, user: me })}
className="px-3 cursor-pointer py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600" className="px-2 md:px-3 cursor-pointer py-1 text-xs md:text-sm bg-red-500 text-white rounded hover:bg-red-600"
> >
删除 删除
</button> </button>

28
src/pages/repos/components/RepoCard.tsx
View File

@@ -84,20 +84,20 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
} }
return ( return (
<> <>
<Card className="relative p-0 overflow-hidden border border-neutral-200 bg-white hover:shadow-xl hover:border-neutral-300 transition-all duration-300 group pb-14"> <Card className="relative p-0 overflow-hidden border border-neutral-200 bg-white hover:shadow-xl hover:border-neutral-300 transition-all duration-300 group pb-12 md:pb-14">
<div className="p-6 space-y-4"> <div className="p-4 md:p-6 space-y-3 md:space-y-4">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 flex-1 min-w-0"> <div className="flex items-center gap-2 flex-1 min-w-0">
{showReturn && ( {showReturn && (
<button <button
onClick={() => navigate({ to: '/' })} onClick={() => navigate({ to: '/' })}
className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors" className="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-neutral-100 transition-colors shrink-0"
> >
<ArrowLeft className="w-4 h-4 text-neutral-600" /> <ArrowLeft className="w-4 h-4 text-neutral-600" />
</button> </button>
)} )}
<div <div
className="text-lg font-bold text-neutral-900 hover:text-neutral-600 transition-colors line-clamp-1 group-hover:underline" className="text-base md:text-lg font-bold text-neutral-900 hover:text-neutral-600 transition-colors line-clamp-1 group-hover:underline cursor-pointer"
onClick={() => { onClick={() => {
openInCNB() openInCNB()
}} }}
@@ -127,7 +127,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
</span> </span>
)} )}
</div> </div>
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-1 md:gap-2 shrink-0">
{isWorkspaceActive && ( {isWorkspaceActive && (
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
@@ -288,7 +288,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
</div> </div>
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5 md:gap-2">
{repo.topics && (<> {repo.topics && (<>
{ {
repo.topics.split(',').map((topic: string, idx: number) => ( repo.topics.split(',').map((topic: string, idx: number) => (
@@ -319,27 +319,27 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
</div> </div>
)} )}
{repo.description && ( {repo.description && (
<p className="ml-2 text-sm text-neutral-600 line-clamp-2 min-h-10 grow"> <p className="text-sm text-neutral-600 line-clamp-2 min-h-10">
{repo.description} {repo.description}
</p> </p>
)} )}
</div> </div>
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-4 text-xs text-neutral-500 px-6 py-3 border-t border-neutral-100 bg-neutral-50"> <div className="absolute bottom-0 left-0 right-0 flex items-center gap-2 md:gap-4 text-xs text-neutral-500 px-4 md:px-6 py-2 md:py-3 border-t border-neutral-100 bg-neutral-50 overflow-x-auto">
<span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors"> <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
<Star className="w-3.5 h-3.5" /> <Star className="w-3.5 h-3.5" />
<span className="font-medium">{repo.star_count}</span> <span className="font-medium">{repo.star_count}</span>
</span> </span>
<span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors"> <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
<GitFork className="w-3.5 h-3.5" /> <GitFork className="w-3.5 h-3.5" />
<span className="font-medium">{repo.fork_count}</span> <span className="font-medium">{repo.fork_count}</span>
</span> </span>
<span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors"> <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors whitespace-nowrap">
<FileText className="w-3.5 h-3.5" /> <FileText className="w-3.5 h-3.5" />
<span className="font-medium">{repo.open_issue_count}</span> <span className="font-medium">{repo.open_issue_count}</span>
</span> </span>
{isWorkspaceActive && <span className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors cursor-pointer" {isWorkspaceActive && <span className="flex items-center gap-1 hover:text-neutral-900 transition-colors cursor-pointer whitespace-nowrap"
onClick={() => { onClick={() => {
store.getWorkspaceDetail(workspace) store.getWorkspaceDetail(workspace)
}}> }}>
@@ -348,7 +348,7 @@ export function RepoCard({ showReturn = false, repo }: RepoCardProps) {
</span>} </span>}
{isMine && ( {isMine && (
<span <span
className="flex items-center gap-1.5 hover:text-neutral-900 transition-colors cursor-pointer" className="flex items-center gap-1 hover:text-neutral-900 transition-colors cursor-pointer whitespace-nowrap"
onClick={() => { onClick={() => {
store.setSelectedSyncRepo(repo) store.setSelectedSyncRepo(repo)
store.setSyncDialogOpen(true) store.setSyncDialogOpen(true)

9
src/pages/repos/modules/CreateRepoDialog.tsx
View File

@@ -64,7 +64,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-150"> <DialogContent className="w-[90vw] max-w-lg sm:max-w-[525px]">
<DialogHeader> <DialogHeader>
<DialogTitle>新建仓库</DialogTitle> <DialogTitle>新建仓库</DialogTitle>
<DialogDescription> <DialogDescription>
@@ -87,7 +87,7 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
<Textarea <Textarea
id="description" id="description"
placeholder="简短描述你的仓库..." placeholder="简短描述你的仓库..."
rows={3} rows={2}
{...register('description')} {...register('description')}
/> />
</div> </div>
@@ -110,16 +110,17 @@ export function CreateRepoDialog({ open, onOpenChange }: CreateRepoDialogProps)
/> />
</div> </div>
<DialogFooter> <DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
disabled={isSubmitting} disabled={isSubmitting}
className="w-full sm:w-auto"
> >
取消 取消
</Button> </Button>
<Button type="submit" disabled={isSubmitting}> <Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
{isSubmitting ? '创建中...' : '创建仓库'} {isSubmitting ? '创建中...' : '创建仓库'}
</Button> </Button>
</DialogFooter> </DialogFooter>

15
src/pages/repos/modules/EditRepoDialog.tsx
View File

@@ -76,21 +76,21 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl!"> <DialogContent className="w-[90vw] max-w-2xl! max-h-[85vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle>编辑仓库信息</DialogTitle> <DialogTitle>编辑仓库信息</DialogTitle>
<DialogDescription>{repo.path}</DialogDescription> <DialogDescription className="text-sm truncate">{repo.path}</DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 md:space-y-6">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="description">描述</Label> <Label htmlFor="description">描述</Label>
<Textarea <Textarea
id="description" id="description"
{...register('description')} {...register('description')}
placeholder="输入仓库描述" placeholder="输入仓库描述"
className="w-full min-h-[100px]" className="w-full min-h-[80px] md:min-h-[100px]"
rows={4} rows={3}
/> />
</div> </div>
@@ -125,15 +125,16 @@ export function EditRepoDialog({ open, onOpenChange, repo }: EditRepoDialogProps
/> />
</div> </div>
<DialogFooter> <DialogFooter className="flex-col sm:flex-row gap-2 sm:gap-0">
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
className="w-full sm:w-auto"
> >
取消 取消
</Button> </Button>
<Button type="submit"> <Button type="submit" className="w-full sm:w-auto">
保存 保存
</Button> </Button>
</DialogFooter> </DialogFooter>

43
src/pages/repos/page.tsx
View File

@@ -37,7 +37,6 @@ export const App = () => {
const appList = useMemo(() => { const appList = useMemo(() => {
// 首先按活动状态排序
const sortedList = [...list].sort((a, b) => { const sortedList = [...list].sort((a, b) => {
const aActive = workspaceList.some(ws => ws.slug === a.path) const aActive = workspaceList.some(ws => ws.slug === a.path)
const bActive = workspaceList.some(ws => ws.slug === b.path) const bActive = workspaceList.some(ws => ws.slug === b.path)
@@ -47,12 +46,10 @@ export const App = () => {
return 0 return 0
}) })
// 如果没有搜索词，返回排序后的列表
if (!searchQuery.trim()) { if (!searchQuery.trim()) {
return sortedList return sortedList
} }
// 使用 Fuse.js 进行模糊搜索
const fuse = new Fuse(sortedList, { const fuse = new Fuse(sortedList, {
keys: ['name', 'path', 'description'], keys: ['name', 'path', 'description'],
threshold: 0.3, threshold: 0.3,
@@ -66,50 +63,54 @@ export const App = () => {
const isCNB = location.hostname.includes('cnb.run') const isCNB = location.hostname.includes('cnb.run')
return ( return (
<div className="min-h-screen bg-neutral-50 flex flex-col"> <div className="min-h-screen bg-neutral-50 flex flex-col">
<div className="container mx-auto p-6 max-w-7xl flex-1"> <div className="container mx-auto p-4 md:p-6 max-w-7xl flex-1">
<div className="mb-8 flex items-center justify-between"> <div className="mb-6 md:mb-8 flex flex-col gap-4">
<div > <div className="flex flex-col gap-3">
<h1 className="text-4xl font-bold text-neutral-900 mb-2 flex gap-2 items-center"> <div className="flex items-center justify-between">
仓库列表 <h1 className="text-2xl md:text-4xl font-bold text-neutral-900 flex gap-2 items-center">
<span className="hidden md:inline">仓库列表</span>
<span className="md:hidden">仓库</span>
<Settings className="inline-block h-5 w-5 text-neutral-400 hover:text-neutral-600 cursor-pointer" onClick={() => navigate({ to: '/config' })} /> <Settings className="inline-block h-5 w-5 text-neutral-400 hover:text-neutral-600 cursor-pointer" onClick={() => navigate({ to: '/config' })} />
</h1> </h1>
<p className="text-neutral-600">共 {list.length} 个仓库</p>
</div> </div>
<div className="flex items-center gap-2"> <p className="text-neutral-600 text-sm md:text-base">共 {list.length} 个仓库</p>
<div className="flex flex-wrap items-center gap-2">
<Button <Button
onClick={() => refresh()} onClick={() => refresh()}
variant="outline" variant="outline"
className="gap-2" className="gap-2 flex-1 sm:flex-none"
> >
<RefreshCw className="h-4 w-4" /> <RefreshCw className="h-4 w-4" />
刷新 <span className="hidden sm:inline">刷新</span>
</Button> </Button>
<Button <Button
onClick={() => setShowCreateDialog(true)} onClick={() => setShowCreateDialog(true)}
className="gap-2" className="gap-2 flex-1 sm:flex-none"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
新建仓库 <span className="hidden sm:inline">新建仓库</span>
<span className="sm:hidden">新建</span>
</Button> </Button>
{isCNB && <Button {isCNB && <Button
onClick={() => { onClick={() => {
window.open('/root/cli-center', '_blank') window.open('/root/cli-center', '_blank')
}} }}
className="gap-2" className="gap-2 hidden md:flex"
> >
<ExternalLinkIcon className="h-4 w-4" /> <ExternalLinkIcon className="h-4 w-4" />
CLI CLI
</Button>} </Button>}
</div> </div>
</div> </div>
</div>
<div className="mb-6"> <div className="mb-4 md:mb-6">
<div className="relative"> <div className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" /> <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
<Input <Input
type="text" type="text"
placeholder="搜索仓库名称、路径或描述..." placeholder="搜索仓库..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10" className="pl-10"
@@ -117,7 +118,7 @@ export const App = () => {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
{appList.map((repo) => ( {appList.map((repo) => (
<RepoCard <RepoCard
key={repo.id} key={repo.id}
@@ -135,9 +136,9 @@ export const App = () => {
)} )}
</div> </div>
<footer className="border-t border-neutral-200 bg-white py-6 mt-auto"> <footer className="border-t border-neutral-200 bg-white py-4 md:py-6 mt-auto">
<div className="container mx-auto px-6 max-w-7xl"> <div className="container mx-auto px-4 md:px-6 max-w-7xl">
<div className="flex items-center justify-between text-sm text-neutral-500"> <div className="flex flex-col md:flex-row items-center justify-between gap-2 md:gap-4 text-sm text-neutral-500">
<div>© 2026 仓库管理系统</div> <div>© 2026 仓库管理系统</div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<a href="#" className="hover:text-neutral-900 transition-colors">关于</a> <a href="#" className="hover:text-neutral-900 transition-colors">关于</a>

14
src/pages/repos/repo/page.tsx
View File

@@ -31,13 +31,13 @@ export const App = () => {
return <div>Loading...</div> return <div>Loading...</div>
} }
return ( return (
<div className="p-2 flex-col flex gap-2 h-full"> <div className="p-2 md:p-4 flex-col flex gap-2 md:gap-4 h-full">
<div className="px-4 h-full scrollbar flex-col flex gap-4 overflow-hidden"> <div className="px-2 md:px-4 h-full scrollbar flex-col flex gap-3 md:gap-4 overflow-hidden">
<div className="flex border-b mb-4"> <div className="flex border-b overflow-x-auto">
{tabs.map(tab => ( {tabs.map(tab => (
<div <div
key={tab.key} key={tab.key}
className={`px-4 py-2 cursor-pointer ${activeTab === tab.key ? 'border-b-2 border-gray-500' : ''}`} className={`px-3 md:px-4 py-2 cursor-pointer whitespace-nowrap text-sm md:text-base ${activeTab === tab.key ? 'border-b-2 border-gray-500 font-medium' : ''}`}
onClick={() => { onClick={() => {
setActiveTab(tab.key) setActiveTab(tab.key)
history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`) history.replaceState(null, '', `?repo=${params.repo}&tab=${tab.key}`)
@@ -49,10 +49,10 @@ export const App = () => {
</div> </div>
{activeTab === 'build' && <BuildConfig />} {activeTab === 'build' && <BuildConfig />}
{activeTab === 'info' && ( {activeTab === 'info' && (
<div className="flex flex-col gap-4 h-full"> <div className="flex flex-col gap-3 md:gap-4 h-full">
<RepoCard repo={repoStore.editRepo} showReturn /> <RepoCard repo={repoStore.editRepo} showReturn />
<div className="p-4 border rounded bg-white h-full overflow-auto scrollbar"> <div className="p-3 md:p-4 border rounded bg-white h-full overflow-auto scrollbar">
<pre className="whitespace-pre-wrap break-all">{JSON.stringify(repoStore.editRepo, null, 2)}</pre> <pre className="whitespace-pre-wrap break-all text-xs md:text-sm">{JSON.stringify(repoStore.editRepo, null, 2)}</pre>
</div> </div>
</div> </div>
)} )}