add fileNameCut

src/app/components/tanstakTable.tsx

@@ -82,6 +82,30 @@ const formatDateTime = (timestamp: number) => {
 	return `${hours}:${minutes}`;
 };
 
+const cutFileName = (fileName: string) => {
+	const MAX_FILE_NAME_LENGHT= 26;
+	const lastDotIndex = fileName.lastIndexOf('.');
+
+	if (lastDotIndex <= 0) {
+		return fileName.length > MAX_FILE_NAME_LENGHT ? fileName.substring(0, MAX_FILE_NAME_LENGHT - 3) + '...' : fileName;
+	}
+
+	const nameWithoutExtension = fileName.substring(0, lastDotIndex);
+	const extension = fileName.substring(lastDotIndex);
+
+	if (fileName.length <= MAX_FILE_NAME_LENGHT) {
+		return fileName;
+	}
+
+	const maxNameLength = MAX_FILE_NAME_LENGHT - extension.length - 3;
+
+	if (maxNameLength <= 0) {
+		return '...' + extension;
+	}
+
+	return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
+}
+
 export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 	const {
 		data: tableData,
@@ -163,10 +187,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="flex items-center space-x-2 w-[250px]">
+					<div className="flex items-center space-x-2">
 						<FileTypeIcon type={row.original.fileType} />
 						<div>
-							<div className="font-medium w-full max-w-[250px] truncate" title={row.original.fileName}>{row.original.fileName}</div>
+							<div className="font-medium w-full truncate" title={row.original.fileName}>
+								{/* {row.original.fileName} */}
+								{cutFileName(row.original.fileName)}
+							</div>
 						</div>
 					</div>
 				),

src/app/styles/pages-styles.scss

@@ -546,7 +546,7 @@
 	.tanstak-table {
 		width: 100%;
 		table-layout: fixed;
-
+		/* table-layout: auto; */
 
 		@media (max-width: 1200px) {
 			width: 1200px;
@@ -565,8 +565,8 @@
 			background-color: v.$b-color-1;
 
 			th {
-				padding-left: 1.5rem;
-				padding-right: 1.5rem;
+				padding-left: 1rem;
+				padding-right: 1rem;
 				padding-top: 0.75rem;
 				padding-bottom: 0.75rem;
 				text-align: left;
@@ -615,8 +615,8 @@
 			}
 
 			td {
-				padding-left: 1.5rem;
-				padding-right: 1.5rem;
+				padding-left: 1rem;
+				padding-right: 1rem;
 				padding-top: 1rem;
 				padding-bottom: 1rem;
 				white-space: nowrap;