From f78ecab2eda63635d734291fc15c0e4c5bee7a63 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 20 Oct 2025 10:17:42 -0300
Subject: [PATCH] fix: update mobile responsive layout - buttons overflowing
 viewport (#283)

---
 .gitignore                                                | 3 ++-
 .../reverse-shares/components/reverse-shares-search.tsx   | 8 ++++----
 .../app/(shares)/s/[alias]/components/share-details.tsx   | 4 ++--
 .../src/app/(shares)/shares/components/shares-search.tsx  | 4 ++--
 apps/web/src/app/dashboard/components/recent-files.tsx    | 4 ++--
 apps/web/src/app/dashboard/components/recent-shares.tsx   | 4 ++--
 apps/web/src/app/files/components/header.tsx              | 8 ++++----
 7 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index cc6d117..6aa622d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,5 @@ apps/server/dist/*
 .steering
 data/
 
-node_modules/
\ No newline at end of file
+node_modules/
+screenshots/
\ No newline at end of file
diff --git a/apps/web/src/app/(shares)/reverse-shares/components/reverse-shares-search.tsx b/apps/web/src/app/(shares)/reverse-shares/components/reverse-shares-search.tsx
index 9ee588b..69ce666 100644
--- a/apps/web/src/app/(shares)/reverse-shares/components/reverse-shares-search.tsx
+++ b/apps/web/src/app/(shares)/reverse-shares/components/reverse-shares-search.tsx
@@ -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>
diff --git a/apps/web/src/app/(shares)/s/[alias]/components/share-details.tsx b/apps/web/src/app/(shares)/s/[alias]/components/share-details.tsx
index ebfe23f..943a29d 100644
--- a/apps/web/src/app/(shares)/s/[alias]/components/share-details.tsx
+++ b/apps/web/src/app/(shares)/s/[alias]/components/share-details.tsx
@@ -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>
diff --git a/apps/web/src/app/(shares)/shares/components/shares-search.tsx b/apps/web/src/app/(shares)/shares/components/shares-search.tsx
index 8845c68..69fcf0d 100644
--- a/apps/web/src/app/(shares)/shares/components/shares-search.tsx
+++ b/apps/web/src/app/(shares)/shares/components/shares-search.tsx
@@ -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>
diff --git a/apps/web/src/app/dashboard/components/recent-files.tsx b/apps/web/src/app/dashboard/components/recent-files.tsx
index d0aed36..1f58209 100644
--- a/apps/web/src/app/dashboard/components/recent-files.tsx
+++ b/apps/web/src/app/dashboard/components/recent-files.tsx
@@ -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"
diff --git a/apps/web/src/app/dashboard/components/recent-shares.tsx b/apps/web/src/app/dashboard/components/recent-shares.tsx
index 299be9a..f8e2b4c 100644
--- a/apps/web/src/app/dashboard/components/recent-shares.tsx
+++ b/apps/web/src/app/dashboard/components/recent-shares.tsx
@@ -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"
diff --git a/apps/web/src/app/files/components/header.tsx b/apps/web/src/app/files/components/header.tsx
index 0f9af01..0da864f 100644
--- a/apps/web/src/app/files/components/header.tsx
+++ b/apps/web/src/app/files/components/header.tsx
@@ -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>