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

.gitignore

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

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">
+        <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-          <Button variant="outline" size="icon" onClick={onRefresh} disabled={isRefreshing}>
+          <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>

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>

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>

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"

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"

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>