refactor(ServerCard): improve layout and styling; adjust spacing and font sizes for better readability

frontend/src/components/server/ServerCard.jsx

@@ -88,50 +88,41 @@ export default function ServerCard({
           </div>
 
           {/* Центральная часть: информация о сервере */}
-          <div className="flex-grow-1 py-3 px-3" style={{ cursor: 'pointer' }} onClick={() => setExpanded(!expanded)}>
-            <div className="d-flex align-items-center flex-wrap gap-3">
+          <div className="flex-grow-1 py-2 px-3" style={{ cursor: 'pointer' }} onClick={() => setExpanded(!expanded)}>
+            {/* Верхняя строка: название, провайдер, DNS */}
+            <div className="d-flex align-items-center mb-1">
               {/* Флаг + Название */}
-              <div className="d-flex align-items-center" style={{ minWidth: '150px' }}>
-                <span className="me-2" style={{ fontSize: '1.5rem' }}>{countryToFlag(server.country)}</span>
+              <div className="d-flex align-items-center me-3">
+                <span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(server.country)}</span>
                 <div>
-                  <div className="fw-semibold" style={{ fontSize: '1rem', lineHeight: 1.2 }}>{serverName}</div>
-                  <div className="text-muted" style={{ fontSize: '0.75rem' }}>{server.provider}</div>
+                  <span className="fw-semibold">{serverName}</span>
+                  <span className="text-muted mx-2">•</span>
+                  <span className="text-muted">{server.provider}</span>
                 </div>
               </div>
-
-              {/* DNS */}
-              <div className="flex-grow-1" style={{ minWidth: '200px' }}>
-                <div style={{ 
-                  fontSize: '0.85rem', 
-                  fontFamily: 'ui-monospace, SFMono-Regular, monospace', 
-                  color: '#666',
-                  overflow: 'hidden', 
-                  textOverflow: 'ellipsis', 
-                  whiteSpace: 'nowrap' 
-                }}>
-                  {server.dns || server.ip}
-                </div>
-              </div>
-
-              {/* Badges: туннель + кол-во шлюзов */}
-              <div className="d-flex align-items-center gap-2">
-                <span className="badge bg-secondary-lt text-secondary" style={{ fontSize: '0.75rem', padding: '0.35em 0.65em' }}>
-                  <IconNetwork size={13} className="me-1" style={{ marginTop: '-1px' }} />
-                  {server.tunnel}
-                </span>
-                {connectionsCount > 0 && (
-                  <span className="badge bg-green-lt text-green" style={{ fontSize: '0.75rem', padding: '0.35em 0.65em' }}>
-                    <IconCloud size={13} className="me-1" style={{ marginTop: '-1px' }} />
-                    {connectionsCount} {connectionsCount === 1 ? 'шлюз' : 'шлюзов'}
-                  </span>
-                )}
-              </div>
-
-              {/* Primary Gateway */}
+              
+              {/* Primary Gateway (если есть) */}
               {primaryGateway && (
-                <div className="text-success fw-medium" style={{ fontSize: '0.85rem' }}>
+                <span className="badge bg-success-lt text-success ms-auto">
                   → {primaryGateway}
-                </div>
+                </span>
+              )}
+            </div>
+            
+            {/* Нижняя строка: DNS + badges */}
+            <div className="d-flex align-items-center gap-2">
+              <code className="text-muted" style={{ fontSize: '0.8rem' }}>
+                {server.dns || server.ip}
+              </code>
+              <span className="badge bg-secondary-lt text-secondary">
+                <IconNetwork size={12} className="me-1" />
+                {server.tunnel}
+              </span>
+              {connectionsCount > 0 && (
+                <span className="badge bg-green-lt text-green">
+                  <IconCloud size={12} className="me-1" />
+                  {connectionsCount}
+                </span>
               )}
             </div>
           </div>
@@ -139,22 +130,23 @@ export default function ServerCard({
           {/* Правая часть: действия */}
           <div className="d-flex align-items-center gap-2 px-3 border-start">
             <button 
-              className="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1" 
+              className="btn btn-outline-secondary" 
               title="Редактировать" 
               onClick={(e) => { e.stopPropagation(); onEdit?.(server); }}
             >
-              <IconEdit size={15} />
-              <span className="d-none d-md-inline">Изменить</span>
+              <IconEdit size={16} className="me-1" />
+              Изменить
             </button>
             <button 
-              className="btn btn-outline-danger btn-sm d-flex align-items-center gap-1" 
+              className="btn btn-outline-danger" 
               title="Удалить" 
               onClick={(e) => { e.stopPropagation(); onDelete?.(server); }}
             >
-              <IconTrash size={15} />
+              <IconTrash size={16} className="me-1" />
+              Удалить
             </button>
             <button 
-              className="btn btn-ghost-secondary btn-icon btn-sm ms-1" 
+              className="btn btn-ghost-secondary btn-icon ms-1" 
               onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }} 
               title={expanded ? 'Свернуть' : 'Подробнее'}
             >