Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -48,6 +48,8 @@ const Refinity: React.FC = () => {
   const [compareDiffHtml, setCompareDiffHtml] = React.useState<string>('');
   const [compareLoading, setCompareLoading] = React.useState<boolean>(false);
   const [compareDownloadOpen, setCompareDownloadOpen] = React.useState<boolean>(false);
+  const [compareMenuPos, setCompareMenuPos] = React.useState<{ left: number; top: number } | null>(null);
+  const compareBtnRef = React.useRef<HTMLButtonElement | null>(null);
   const [revDownloadOpen, setRevDownloadOpen] = React.useState<boolean>(false);
   const [username] = React.useState<string>(() => {
     try {
@@ -604,9 +606,9 @@ const Refinity: React.FC = () => {
                       finally { setCompareLoading(false); }
                     }} disabled={!compareA || !compareB || compareA===compareB || compareLoading} className="px-3 py-2 text-sm rounded-md border border-gray-300 bg-white disabled:opacity-50">{compareLoading ? 'Computing…' : 'Show Diff'}</button>
                     <div className="relative">
-                      <button onClick={()=>setCompareDownloadOpen(v=>!v)} disabled={!compareA || !compareB || compareA===compareB} className="px-3 py-2 text-sm rounded-md border border-gray-300 bg-white">Download ▾</button>
-                      {compareDownloadOpen && (
-                        <div className="absolute right-0 mt-1 min-w-36 max-w-40 rounded-md border border-gray-200 bg-white shadow-lg z-20 text-right">
+                      <button ref={compareBtnRef} onClick={(e)=>{ e.preventDefault(); const r=(e.currentTarget as HTMLElement).getBoundingClientRect(); setCompareMenuPos({ left: r.left, top: r.bottom + 8 }); setCompareDownloadOpen(v=>!v); }} disabled={!compareA || !compareB || compareA===compareB} className="px-3 py-2 text-sm rounded-md border border-gray-300 bg-white">Download ▾</button>
+                      {compareDownloadOpen && compareMenuPos && createPortal(
+                        <div style={{ position: 'fixed', left: compareMenuPos.left, top: compareMenuPos.top, zIndex: 10000 }} className="w-44 rounded-md border border-gray-200 bg-white shadow-lg text-left">
                           <button onClick={async()=>{
                             setCompareDownloadOpen(false);
                             const a = taskVersions.find(v=>v.id===compareA);
@@ -624,7 +626,7 @@ const Refinity: React.FC = () => {
                               const link = document.createElement('a');
                               link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                             } catch {}
-                          }} className="block w-full text-right px-2.5 py-2 text-sm hover:bg-gray-50">Inline Changes</button>
+                          }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Inline Changes</button>
                           <button onClick={async()=>{
                             setCompareDownloadOpen(false);
                             const a = taskVersions.find(v=>v.id===compareA);
@@ -642,8 +644,8 @@ const Refinity: React.FC = () => {
                               const link = document.createElement('a');
                               link.href = url; link.download = filename; document.body.appendChild(link); link.click(); link.remove(); window.URL.revokeObjectURL(url);
                             } catch {}
-                          }} className="block w-full text-right px-2.5 py-2 text-sm hover:bg-gray-50">Side Comments</button>
-                        </div>
+                          }} className="block w-full text-left px-3 py-2 text-sm hover:bg-gray-50">Side Comments</button>
+                        </div>, document.body
                       )}
                     </div>
                     <button onClick={()=>{ setCompareUIOpen(false); setCompareA(''); setCompareB(''); }} className="px-3 py-2 text-sm rounded-md border border-gray-300 bg-white">Close</button>