Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2025-12-10 05:26:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added basic responsive layout

Browse Source
This commit is contained in:
Arunavo Ray
2025-07-07 17:34:54 +05:30
parent 6155e39360
commit 24bd0aefe6
10 changed files with 715 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/dashboard/RepositoryList.tsx
View File

@@ -54,7 +54,7 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
<a href="/repositories">View All</a>
</Button>
</CardHeader>
<CardContent className="max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
<CardContent className="max-h-[300px] sm:max-h-[400px] lg:max-h-[calc(100dvh-22.5rem)] overflow-y-auto">
{repositories.length === 0 ? (
<div className="flex flex-col items-center justify-center py-6 text-center">
<GitFork className="h-10 w-10 text-muted-foreground mb-4" />
@@ -71,11 +71,11 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
{repositories.map((repo, index) => (
<div
key={index}
className="flex items-center justify-between gap-x-4 py-4"
className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-x-4 py-4"
>
<div className="flex-1">
<div className="flex items-center gap-2">
<h4 className="text-sm font-medium">{repo.name}</h4>
<div className="flex items-center flex-wrap gap-2">
<h4 className="text-sm font-medium break-all">{repo.name}</h4>
{repo.isPrivate && (
<span className="rounded-full bg-muted px-2 py-0.5 text-xs">
Private
@@ -99,13 +99,13 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 sm:ml-auto">
<div
className={`h-2 w-2 rounded-full ${getStatusColor(
repo.status
)}`}
/>
<span className="text-xs capitalize w-[3rem]">
<span className="text-xs capitalize w-[3rem] sm:w-auto">
{/* setting the minimum width to 3rem corresponding to the largest status (mirrored) so that all are left alligned */}
{repo.status}
</span>