add viewport calculate for fileName cut

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.51.0",
+	"version": "0.52.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/components/tanstak-table/TanstakTable.tsx

@@ -26,6 +26,7 @@ import { FileTypeIcon } from '@/app/components/FileTypeIcon';
 import { fetchReferralUserStats } from '@/app/actions/referralsActions';
 import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown';
 import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import { useViewport } from '@/app/hooks/useViewport';
 
 type FileType = 'image' | 'video' | 'audio';
 
@@ -59,30 +60,6 @@ type ApiResponse = {
 	files?: ApiFile[];
 };
 
-const cutFileName = (fileName: string) => {
-	const MAX_FILE_NAME_LENGTH = 26;
-	const lastDotIndex = fileName.lastIndexOf('.');
-
-	if (lastDotIndex <= 0) {
-		return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
-	}
-
-	const nameWithoutExtension = fileName.substring(0, lastDotIndex);
-	const extension = fileName.substring(lastDotIndex);
-
-	if (fileName.length <= MAX_FILE_NAME_LENGTH) {
-		return fileName;
-	}
-
-	const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
-
-	if (maxNameLength <= 0) {
-		return '...' /* + extension */;
-	}
-
-	return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
-}
-
 const cutFileExtension = (fileName: string) => {
 	const lastDotIndex = fileName.lastIndexOf('.');
 	const extension = fileName.substring(lastDotIndex + 1);
@@ -156,6 +133,38 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 
 	const t = useTranslations("Global");
 	const locale = useLocale();
+	const viewport = useViewport();
+
+	const getMaxLengthByWidth = (): number => {
+		if (viewport.device === 'MOBILE') return 26;
+		if (viewport.device === 'TABLET') return 32;
+		if (viewport.device === 'DESKTOP') return 64;
+		return 100;
+	};
+
+	const cutFileName = (fileName: string) => {
+		const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth();
+		const lastDotIndex = fileName.lastIndexOf('.');
+
+		if (lastDotIndex <= 0) {
+			return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
+		}
+
+		const nameWithoutExtension = fileName.substring(0, lastDotIndex);
+		const extension = fileName.substring(lastDotIndex);
+
+		if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+			return fileName;
+		}
+
+		const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
+
+		if (maxNameLength <= 0) {
+			return '...' /* + extension */;
+		}
+
+		return nameWithoutExtension.substring(0, maxNameLength) + '...' /* + extension */;
+	}
 
 	// Определение колонок
 	const columns = useMemo<ColumnDef<FileItem>[]>(
@@ -223,7 +232,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="flex items-center space-x-2 table-item">
+					<div className="flex items-center space-x-2 table-item table-item-file-name">
 						<FileTypeIcon type={row.original.fileType} />
 						<div>
 							<div className="font-medium w-full truncate" title={row.original.fileName}>
@@ -452,7 +461,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				enableColumnFilter: false,
 			},
 		],
-		[]
+		[viewport.device]
 	);
 
 	const handleView = async (file: FileItem) => {

src/app/hooks/useViewport.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export const MOBILE = 'MOBILE'
+export const TABLET = 'TABLET'
+export const DESKTOP = 'DESKTOP'
+
+const getDevice = (width: number) => {
+	if (width < 768) return MOBILE
+	else if (width < 992) return TABLET
+	else return DESKTOP
+}
+
+export function useViewport() {
+	const [viewport, setViewport] = useState({
+		width: 0,
+		device: 'DESKTOP'
+	});
+
+	useEffect(() => {
+		const handleResize = () => {
+			setViewport({
+				width: window.innerWidth,
+				device: getDevice(window.innerWidth)
+			});
+		};
+
+		handleResize();
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return viewport;
+}

src/app/styles/pages-styles.scss

@@ -803,6 +803,11 @@
 				&:has(.table-item-id) {
 					width: 20px;
 				}
+
+				&:has(.table-item-file-name) {
+					max-width: 300px;
+					overflow: hidden;
+				}
 			}
 
 			.table-item {
@@ -3570,6 +3575,7 @@
 			padding: 0;
 			overflow: hidden;
 			min-width: 400px;
+			width: 100%;
 
 			@media (max-width: 470px) {
 				min-width: auto;