cange location layout for history view table

src/app/ui/tracking-page/tracking-history-view.tsx

@@ -84,15 +84,23 @@ export function TrackingHistoryView() {
 		return nameWithoutExtension.substring(0, maxNameLength) + '...';
 	}
 
-	const editLocationName = (location: string | undefined | null) => {
-		if (!location) return '';
+	function EditLocationName({ location }: { location: string | undefined | null }) {
+		if (!location) return (
+			<div></div>
+		);
 
 		const [city, country] = location.split('/');
 
 		const translatedCity = city === 'unknow' ? t('not-defined-city') : city;
 		const translatedCountry = country === 'unknow' ? t('not-defined-country') : country;
 
-		return `${translatedCity}/${translatedCountry}`;
+		return (
+			<div>
+				{t('city')}: <strong>{translatedCity}</strong>
+				<br />
+				{t('country')}: <strong>{translatedCountry}</strong>
+			</div>
+		);
 	}
 
 	const columns = useMemo<ColumnDef<HistoryViewItem>[]>(
@@ -213,7 +221,7 @@ export function TrackingHistoryView() {
 			{
 				accessorKey: 'location',
 				header: ({ column }) => (
-					<div className="column">
+					<div className="column column-location">
 						<span>
 							{t('location')}
 						</span>
@@ -243,7 +251,7 @@ export function TrackingHistoryView() {
 							{row.original.country === 'unknow/unknow' ? (
 								t('not-defined')
 							) : (
-								`${editLocationName(row.original.country)}`
+								<EditLocationName location={row.original.country} />
 							)}
 						</div>
 					)
@@ -252,7 +260,7 @@ export function TrackingHistoryView() {
 		],
 		[]
 	);
-
+	/* `${editLocationName(row.original.country)}` */
 	// Создание таблицы
 	const table = useReactTable({
 		data: tableData,
@@ -287,13 +295,14 @@ export function TrackingHistoryView() {
 			className="block-wrapper"
 		>
 			<div className="tanstak-table-wrapper">
-				<h3
-					className="tanstak-table-title"
-				>
-					{t('history-of-opened')}
-				</h3>
+
 				{/* Фильтры */}
 				<div className="tanstak-table-filtres">
+					<h3
+						className="tanstak-table-title"
+					>
+						{t('history-of-opened')}
+					</h3>
 					<div className="table-filtres-wrapper text-filter-search end">
 						<div className="table-filtres-item">
 							<div className="table-filtres-label">{t('items-per-page')}:</div>