add cutFileName for match table, fix some styles

src/app/[locale]/pages/violations/page.tsx

@@ -18,11 +18,12 @@ export default function Page() {
 			<ViolationsCheckAllSection />
 			<ViolationsTable />
 			<ViolationsMyComplaint />
+			<ViolationsMyClaims />
 			<div className="analytics-grid">
 				<AnalyticsCardDistribution />
 				<AnalyticsCardGeography />
 			</div>
-			<ViolationsMyClaims />
+			
 		</>
 	)
 }

src/app/hooks/react-query/useFileViolations.ts

@@ -10,16 +10,18 @@ export interface ViolationFileDetail {
 	status: string;
 	created_date: string;
 	file_id: string;
+	country: string;
+	country_code: string;
 }
 
 interface ViolationFile {
-	violations: ViolationFileDetail[],
-	total_elements: number,
-	total_pages: number,
-	current_page: number,
-	page_size: number,
-	has_next: boolean,
-	has_previous: boolean
+	violations: ViolationFileDetail[];
+	total_elements: number;
+	total_pages: number;
+	current_page: number;
+	page_size: number;
+	has_next: boolean;
+	has_previous: boolean;
 }
 
 export const useFileViolations = (id: string, page: number, status?: string) => {

src/app/styles/violation-details.scss

@@ -500,7 +500,7 @@
 		&-right-side {
 			display: flex;
 			flex-direction: column;
-			justify-content: space-between;
+			justify-content: start;
 			overflow: hidden;
 		}
 
@@ -864,7 +864,7 @@
 
 	.note-form-flex {
 		display: flex;
-		gap: 10px;
+		gap: var(--violation-info-indents);
 		width: 100%;
 		/* justify-content: space-between; */
 	}
@@ -922,7 +922,7 @@
 		box-sizing: border-box;
 		padding: 0px;
 		border-radius: 8px;
-		margin-bottom: 10px;
+		margin-bottom: var(--violation-info-indents);
 		overflow: hidden;
 		width: 100%;
 

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"
 							>

src/app/ui/violations/violations-my-claims.tsx

@@ -106,13 +106,13 @@ export default function ViolationsMyClaims() {
 											</span>
 										</div>
 
-										<div className="case-card-content">
+{/* 										<div className="case-card-content">
 											{t('text-of-the-case')}:
 											<br />
 											<span>
 												{item.description}
 											</span>
-										</div>
+										</div> */}
 
 										<div className="case-card-meta">
 											<div><strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)} ${formatDateTime(item.createdAt)}` : '---'}</div>

src/app/ui/violations/violations-my-complaint.tsx

@@ -102,13 +102,13 @@ export default function ViolationsMyComplaint() {
 											</span>
 										</div>
 
-										<div className="case-card-content">
+{/* 										<div className="case-card-content">
 											{t('text-of-the-complaint')}:
 											<br />
 											<span>
 												{item.complaint_text}
 											</span>
-										</div>
+										</div> */}
 
 										<div className="case-card-meta">
 											<div>