add cutFileName for match table, fix some styles

src/app/ui/file-page/violation-table/file-page-violation-info.tsx

@@ -16,6 +16,7 @@ import Image from 'next/image';
 import FilePageViolationInfoTabs from '@/app/ui/file-page/violation-table/file-page-violation-info-tabs';
 import { createPortal } from 'react-dom';
 import { IconContentCopy, IconFollowToLink, IconFullScreen } from '@/app/ui/icons/icons';
+import { useViewport } from '@/app/hooks/useViewport';
 
 export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
 	const t = useTranslations('Global');
@@ -26,6 +27,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [isHovered, setIsHovered] = useState(false);
 	const [copied, setCopied] = useState(false);
+	const viewport = useViewport();
 
 	const openInNewTab = () => {
 		if (selectedViolation?.url) {
@@ -125,6 +127,30 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 			.catch();
 	};
 
+	const getMaxLengthByWidth = (): number => {
+		if (viewport.device === 'MOBILE') return 22;
+		if (viewport.device === 'TABLET') return 50;
+		if (viewport.device === 'DESKTOP') return 100;
+		return 100;
+	};
+
+	const cutFileName = (fileName: string) => {
+		const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth();
+		const nameWithoutExtension = fileName.substring(0, MAX_FILE_NAME_LENGTH);
+
+		if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+			return fileName;
+		}
+
+		const maxNameLength = MAX_FILE_NAME_LENGTH;
+
+		if (maxNameLength <= 0) {
+			return '...';
+		}
+
+		return nameWithoutExtension.substring(0, maxNameLength) + '...';
+	}
+
 	return (
 		<div
 			className="violation-info"
@@ -186,42 +212,56 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 							<h3
 								className="violation-info-title"
 							>
-								{selectedViolation?.page_title}
+								{selectedViolation?.page_title ? cutFileName(selectedViolation?.page_title) : '#'}
 							</h3>
 							<div
-								className="violation-info-source"
+								className="mt-auto"
 							>
-								<span>
-									{t('full-link')}:
-								</span>
+								{selectedViolation?.country && (
+									<div
+										className="violation-info-source"
+									>
+										<span>
+											{t('country')}:
+										</span>
+										<br />
+										{selectedViolation?.country}
+									</div>
+								)}
 								<div
-									onMouseEnter={() => setIsHovered(true)}
-									onMouseLeave={() => setIsHovered(false)}
+									className="violation-info-source"
 								>
-									<span
-										className="source"
-									>
-										{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
+									<span>
+										{t('full-link')}:
 									</span>
-
-									<span
-										className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
-										onClick={handleCopyLink}
+									<div
+										onMouseEnter={() => setIsHovered(true)}
+										onMouseLeave={() => setIsHovered(false)}
 									>
-										<IconContentCopy />
-									</span>
+										<span
+											className="source"
+										>
+											{selectedViolation?.page_url ? cutFileName(cleanUrlForDisplay(selectedViolation?.page_url)) : selectedViolation?.page_url}
+										</span>
 
-									<Link
-										className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
-										href={selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : '#'}
-										target="_blank"
-										scroll={false}
-									>
-										<IconFollowToLink />
-									</Link>
+										<span
+											className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
+											onClick={handleCopyLink}
+										>
+											<IconContentCopy />
+										</span>
+
+										<Link
+											className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
+											href={selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : '#'}
+											target="_blank"
+											scroll={false}
+										>
+											<IconFollowToLink />
+										</Link>
+									</div>
 								</div>
 							</div>
-
 							<div
 								className="violation-info-status"
 							>