mirror of
https://github.com/kyantech/Palmr.git
synced 2025-10-22 22:02:00 +00:00
fix: update mobile responsive layout - buttons overflowing viewport (#283)
This commit is contained in:
3
.gitignore
vendored
3
.gitignore
vendored
@@ -33,4 +33,5 @@ apps/server/dist/*
|
||||
.steering
|
||||
data/
|
||||
|
||||
node_modules/
|
||||
node_modules/
|
||||
screenshots/
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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"
|
||||
|
@@ -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"
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user