Upload folder using huggingface_hub

client/src/components/Refinity.tsx

@@ -367,7 +367,7 @@ const Refinity: React.FC = () => {
               </button>
             </div>
           </div>
-          <div className="relative min-h-0" style={{ maxHeight: 'calc(100vh - 280px)' }}>
+          <div className="relative min-h-0" style={{ maxHeight: 'calc(100vh - 300px)' }}>
             <SwiperRoot
               modules={[EffectCoverflow, Navigation, Pagination, A11y]}
               effect="coverflow"
@@ -388,20 +388,20 @@ const Refinity: React.FC = () => {
               observeParents
               grabCursor
               coverflowEffect={{ rotate: 0, stretch: 0, depth: 80, modifier: 1, slideShadows: false }}
-              className="!px-4 overflow-visible pb-2"
-              style={{ height: 'min(64vh, calc(100vh - 320px))', minHeight: '360px' }}
+              className="mySwiper !px-4 overflow-visible pb-2"
+              style={{ height: 'min(58vh, calc(100vh - 360px))', minHeight: '320px' }}
             >
               {taskVersions.map((v, idx) => {
                 const snippet = (v.content || '').slice(0, 220) + ((v.content || '').length > 220 ? '…' : '');
                 const isCenter = idx === flowIndex;
                 return (
                   <SwiperSlide key={v.id} style={{ width: 'min(92vw, 720px)', height: '100%' }}>
-                    <div className="relative h-full rounded-2xl p-6 bg-white ring-1 ring-gray-200 shadow-xl text-base overflow-hidden flex flex-col">
+                    <div className={`relative h-full rounded-2xl p-6 bg-white ring-1 ring-gray-200 shadow-xl text-base overflow-hidden flex flex-col ${isCenter ? '' : 'opacity-95'}`}>
                       <div className="pointer-events-none absolute inset-0 rounded-2xl opacity-40 [background:linear-gradient(to_bottom,rgba(255,255,255,0.45),rgba(255,255,255,0)_28%),linear-gradient(to_right,rgba(255,255,255,0.35),rgba(255,255,255,0)_28%)]" />
                       <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-tr from-white/30 via-white/10 to-transparent opacity-30" />
                       <div className="text-gray-800 text-sm mb-2">Original: {v.originalAuthor}</div>
                       <div className="text-gray-600 text-xs mb-3">Revised by: {v.revisedBy ? `${v.revisedBy} (v${v.versionNumber})` : `— (v${v.versionNumber})`}</div>
-                      <div className="text-gray-900 whitespace-pre-wrap break-words leading-relaxed flex-1 overflow-auto pr-1">{snippet}</div>
+                      <div className={`text-gray-900 whitespace-pre-wrap break-words leading-relaxed flex-1 ${isCenter ? 'overflow-auto' : 'overflow-hidden'} pr-1`}>{snippet}</div>
                       {isCenter && (
                         <div className="mt-4 flex gap-3">
                           <button onClick={()=>{ setPreviewVersionId(v.id); setStage('preview'); }} className="relative overflow-hidden inline-flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-2xl text-black ring-1 ring-inset ring-white/50 backdrop-blur-md bg-white/30 active:translate-y-0.5 transition-all duration-200">Full Text</button>
@@ -414,6 +414,10 @@ const Refinity: React.FC = () => {
                 );
               })}
             </SwiperRoot>
+            <style dangerouslySetInnerHTML={{ __html: `
+              .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next { top: 50% !important; transform: translateY(-50%); }
+              .mySwiper .swiper-button-prev:after, .mySwiper .swiper-button-next:after { font-size: 18px; color: #94a3b8; }
+            ` }} />
           </div>
         </div>
       )}