From 9d83a74769c0671168b75031c5f25270f4f33bd3 Mon Sep 17 00:00:00 2001
From: fabritsky <fabritsky@gmail.com>
Date: Tue, 26 May 2026 09:19:36 +0700
Subject: [PATCH] fix: improve contact column layout and admin email icon

---
 frontend/src/components/AdminPanel.jsx | 25 ++++++++++++++++++++-----
 frontend/src/index.css                 |  1 +
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index 813cebf..2d4c99a 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { PlusIcon, EditIcon, DeleteIcon, CloseIcon } from '../utils/svgs';
+import { PlusIcon, EditIcon, DeleteIcon, CloseIcon, PhoneIcon, EmailIcon } from '../utils/svgs';
 import ImportExport from './ImportExport';
 
 const AdminPanel = ({ token, employees, departments, companies, onRefreshData }) => {
@@ -414,10 +414,25 @@ const AdminPanel = ({ token, employees, departments, companies, onRefreshData })
                         </div>
                       </td>
                       <td>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.15rem', fontSize: '0.8rem' }}>
-                          {emp.phone && <div>📞 {emp.phone}</div>}
-                          {emp.internal_phone && <div>📞 Вн.: {emp.internal_phone}</div>}
-                          {emp.email && <div>✉️ {emp.email}</div>}
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+                          {emp.phone && (
+                            <a href={`tel:${emp.phone}`} className="table-contact-link">
+                              <PhoneIcon style={{ width: '0.85rem', height: '0.85rem' }} />
+                              <span>{emp.phone}</span>
+                            </a>
+                          )}
+                          {emp.internal_phone && (
+                            <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                              <PhoneIcon style={{ width: '0.85rem', height: '0.85rem' }} />
+                              <span>Вн.: {emp.internal_phone}</span>
+                            </div>
+                          )}
+                          {emp.email && (
+                            <a href={`mailto:${emp.email}`} className="table-contact-link">
+                              <EmailIcon style={{ width: '0.85rem', height: '0.85rem' }} />
+                              <span>{emp.email}</span>
+                            </a>
+                          )}
                         </div>
                       </td>
                       <td style={{ textAlign: 'right' }}>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 8c7091a..c723594 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -437,6 +437,7 @@ button, input, select, textarea {
   gap: 0.25rem;
   color: var(--text-main);
   font-size: 0.8rem;
+  white-space: nowrap;
 }
 
 .table-contact-link:hover {