feat: fullscreen mode for all tabs + fix Dropbox/Supabase sync priority

src/components/ArticleDetails.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { ExcelRow } from '../types';
 import { useColumns } from '../contexts/ColumnsContext';
-import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X } from 'lucide-react';
+import { Search, Filter, Edit2, ChevronDown, ChevronUp, Info, Package, X, Maximize2 } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { ColumnFilterPopover } from './ColumnFilterPopover';
 
@@ -24,6 +24,7 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp
   const [page, setPage] = useState(1);
   const [columnFilters, setColumnFilters] = useState<Record<number, string[]>>({});
   const [openFilterCol, setOpenFilterCol] = useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const [columnWidths, setColumnWidths] = useState<Record<number, number>>({
     [COLUMNS.ARTICLE_NO]: 100,
     [COLUMNS.ARTICLE_NAME]: 200,
@@ -161,9 +162,19 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp
   ];
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex flex-wrap gap-2 mb-6">
-        {tabs.map(tab => (
+    <div className={isFullscreen ? "fixed inset-0 z-40 bg-[#041021] p-6 overflow-auto" : "flex flex-col h-full"}>
+      {isFullscreen && (
+        <button
+          onClick={() => setIsFullscreen(false)}
+          className="fixed top-4 right-4 z-50 w-10 h-10 flex items-center justify-center bg-slate-800/90 backdrop-blur border border-slate-600 text-white rounded hover:bg-slate-700 hover:scale-105 transition-all"
+          title="Exit fullscreen"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      )}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-wrap gap-2">
+          {tabs.map(tab => (
           <button
             key={tab.id}
             onClick={() => { setActiveTab(tab.id); setPage(1); }}
@@ -177,6 +188,14 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp
             {tab.label}
           </button>
         ))}
+        </div>
+        <button
+          onClick={() => setIsFullscreen(true)}
+          className="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
+          title="Fullscreen"
+        >
+          <Maximize2 className="w-5 h-5" />
+        </button>
       </div>
 
       <div className="flex flex-wrap gap-4 mb-6 bg-slate-800/50 p-4 rounded-xl border border-slate-700/50">