From cf21405c5371f6e404ffb19e84483b7e634621d0 Mon Sep 17 00:00:00 2001
From: kenilkb <kenil@tech4biz.org>
Date: Thu, 16 Jul 2026 10:26:38 +0530
Subject: [PATCH] Fix: Make Docx and Spreadsheet thumbnails scale responsively
 to full bleed width

---
 .../assets/components/DocxThumbnail.tsx       | 24 ++++++++++++++---
 .../components/SpreadsheetThumbnail.tsx       | 26 +++++++++++++++----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/Channel-Frontend/src/features/assets/components/DocxThumbnail.tsx b/Channel-Frontend/src/features/assets/components/DocxThumbnail.tsx
index c68f026..3ff269c 100644
--- a/Channel-Frontend/src/features/assets/components/DocxThumbnail.tsx
+++ b/Channel-Frontend/src/features/assets/components/DocxThumbnail.tsx
@@ -8,6 +8,8 @@ interface DocxThumbnailProps {
 
 export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.2);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -43,10 +45,24 @@ export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) =
     };
   }, [url]);
 
+  useEffect(() => {
+    if (!parentRef.current) return;
+    const updateScale = () => {
+      if (parentRef.current) {
+        const width = parentRef.current.offsetWidth || 280;
+        setScale(width / 800);
+      }
+    };
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(parentRef.current);
+    return () => observer.disconnect();
+  }, []);
+
   if (error) return <>{fallback}</>;
 
   return (
-    <div className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none">
+    <div ref={parentRef} className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none">
       {loading && (
         <div className="absolute inset-0 flex items-center justify-center bg-slate-50 z-10">
           <div className="w-5 h-5 rounded-full border-2 border-indigo-600 border-t-transparent animate-spin" />
@@ -56,9 +72,9 @@ export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) =
         ref={containerRef}
         className="absolute top-0 left-0 origin-top-left"
         style={{
-          width: '760px',
-          height: '980px',
-          transform: 'scale(0.18)',
+          width: '800px',
+          height: '1000px',
+          transform: `scale(${scale})`,
           padding: '16px',
           overflow: 'hidden',
         }}
diff --git a/Channel-Frontend/src/features/assets/components/SpreadsheetThumbnail.tsx b/Channel-Frontend/src/features/assets/components/SpreadsheetThumbnail.tsx
index a675a66..9c5bba0 100644
--- a/Channel-Frontend/src/features/assets/components/SpreadsheetThumbnail.tsx
+++ b/Channel-Frontend/src/features/assets/components/SpreadsheetThumbnail.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { axiosInstance } from '../../../services/axios';
 import * as XLSX from 'xlsx';
 
@@ -8,7 +8,9 @@ interface SpreadsheetThumbnailProps {
 }
 
 export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url, fallback }) => {
+  const parentRef = useRef<HTMLDivElement>(null);
   const [html, setHtml] = useState<string>('');
+  const [scale, setScale] = useState(0.2);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -49,10 +51,24 @@ export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url,
     };
   }, [url]);
 
+  useEffect(() => {
+    if (!parentRef.current) return;
+    const updateScale = () => {
+      if (parentRef.current) {
+        const width = parentRef.current.offsetWidth || 280;
+        setScale(width / 900);
+      }
+    };
+    updateScale();
+    const observer = new ResizeObserver(updateScale);
+    observer.observe(parentRef.current);
+    return () => observer.disconnect();
+  }, []);
+
   if (error) return <>{fallback}</>;
 
   return (
-    <div className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none p-1">
+    <div ref={parentRef} className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none p-1">
       {loading && (
         <div className="absolute inset-0 flex items-center justify-center bg-slate-50 z-10">
           <div className="w-5 h-5 rounded-full border-2 border-emerald-600 border-t-transparent animate-spin" />
@@ -61,9 +77,9 @@ export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url,
       <div 
         className="excel-thumbnail-container absolute top-0 left-0 origin-top-left"
         style={{
-          width: '780px',
-          height: '500px',
-          transform: 'scale(0.22)',
+          width: '900px',
+          height: '600px',
+          transform: `scale(${scale})`,
           overflow: 'hidden',
         }}
       >