fix: update mobile responsive layout - buttons overflowing viewport (#283)

This commit is contained in:
Copilot
2025-10-20 10:17:42 -03:00
committed by GitHub
parent fcc877738f
commit f78ecab2ed
7 changed files with 18 additions and 17 deletions

3
.gitignore vendored
View File

@@ -33,4 +33,5 @@ apps/server/dist/*
.steering
data/
node_modules/
node_modules/
screenshots/

View File

@@ -27,13 +27,13 @@ export function ReverseSharesSearch({
return (
<div className="flex flex-col gap-6">
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<h2 className="text-xl font-semibold">{t("reverseShares.search.title")}</h2>
<div className="flex items-center gap-2">
<Button variant="outline" size="icon" onClick={onRefresh} disabled={isRefreshing}>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Button variant="outline" size="icon" onClick={onRefresh} disabled={isRefreshing} className="sm:w-auto">
<IconRefresh className={`h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
</Button>
<Button onClick={onCreateReverseShare}>
<Button onClick={onCreateReverseShare} className="w-full sm:w-auto">
<IconPlus className="h-4 w-4" />
{t("reverseShares.search.createButton")}
</Button>

View File

@@ -91,13 +91,13 @@ export function ShareDetails({
<CardContent>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-2">
<IconShare className="w-6 h-6 text-muted-foreground" />
<h1 className="text-2xl font-semibold">{share.name || t("share.details.untitled")}</h1>
</div>
{shareHasItems && hasMultipleFiles && (
<Button onClick={onBulkDownload} className="flex items-center gap-2">
<Button onClick={onBulkDownload} className="flex items-center gap-2 w-full sm:w-auto">
<IconDownload className="w-4 h-4" />
{t("share.downloadAll")}
</Button>

View File

@@ -16,9 +16,9 @@ export function SharesSearch({
return (
<div className="flex flex-col gap-6">
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<h2 className="text-xl font-semibold">{t("shares.search.title")}</h2>
<Button onClick={onCreateShare}>
<Button onClick={onCreateShare} className="w-full sm:w-auto">
<IconPlus className="h-4 w-4" />
{t("shares.search.createButton")}
</Button>

View File

@@ -15,13 +15,13 @@ export function RecentFiles({ files, fileManager, onOpenUploadModal }: RecentFil
return (
<Card>
<CardHeader>
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<CardTitle className="text-xl font-semibold flex items-center gap-2">
<IconCloudUpload className="text-xl text-gray-500" />
{t("recentFiles.title")}
</CardTitle>
<div className="flex items-center gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Button
className="font-semibold text-sm cursor-pointer"
variant="outline"

View File

@@ -16,13 +16,13 @@ export function RecentShares({ shares, shareManager, onOpenCreateModal, onCopyLi
<Card>
<CardContent>
<div className="flex flex-col gap-6">
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<h2 className="text-xl font-semibold flex items-center gap-2">
<IconShare className="text-xl text-gray-500" />
{t("recentShares.title")}
</h2>
<div className="flex items-center gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Button
className="font-semibold text-sm cursor-pointer"
variant="outline"

View File

@@ -8,16 +8,16 @@ export function Header({ onUpload, onCreateFolder }: HeaderProps) {
const t = useTranslations();
return (
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
<h2 className="text-xl font-semibold">{t("files.title")}</h2>
<div className="flex items-center gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
{onCreateFolder && (
<Button variant="outline" onClick={onCreateFolder}>
<Button variant="outline" onClick={onCreateFolder} className="w-full sm:w-auto">
<IconFolderPlus className="h-4 w-4" />
{t("folderActions.createFolder")}
</Button>
)}
<Button variant="default" onClick={onUpload}>
<Button variant="default" onClick={onUpload} className="w-full sm:w-auto">
<IconCloudUpload className="h-4 w-4" />
{t("files.uploadFile")}
</Button>