From 8f81cf96451d067152572dcffac51a6ba5a1f32b Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 22 Jan 2026 15:05:49 +0700
Subject: [PATCH] refactor(NetworkConfigManager): enhance layout and styling
 for improved responsiveness; adjust flex properties for better alignment and
 display of elements

---
 frontend/src/NetworkConfigManager.jsx | 44 +++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx
index e4f49e7..edc4cf8 100644
--- a/frontend/src/NetworkConfigManager.jsx
+++ b/frontend/src/NetworkConfigManager.jsx
@@ -967,14 +967,14 @@ function NetworkConfigManager() {
             </div>
             
             {/* Центральная часть: информация */}
-            <div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0 }}>
+            <div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0, flex: '1 1 auto' }}>
               {/* Верхняя строка: флаг, название, провайдер */}
-              <div className="d-flex align-items-center mb-1">
-                <div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}>
+              <div className="d-flex align-items-center mb-1 flex-wrap">
+                <div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
                   {displayCountry && (
-                    <span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(displayCountry)}</span>
+                    <span className="me-2" style={{ fontSize: '1.25rem', flexShrink: 0 }}>{countryToFlag(displayCountry)}</span>
                   )}
-                  <div style={{ minWidth: 0 }}>
+                  <div style={{ whiteSpace: 'nowrap' }}>
                     <span className="fw-semibold">{gateway.description || provider || gateway.ip || '—'}</span>
                     {provider && (
                       <>
@@ -987,20 +987,20 @@ function NetworkConfigManager() {
                 
                 {/* Зеленый блок с маршрутом */}
                 {displayText && (
-                  <span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap' }}>
+                  <span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap', flexShrink: 0, fontSize: '0.875rem' }}>
                     {displayText}
                   </span>
                 )}
               </div>
               
               {/* Нижняя строка: DNS + badges */}
-              <div className="d-flex align-items-center gap-2">
+              <div className="d-flex align-items-center gap-2 flex-wrap">
                 {server && (
-                  <code className="text-muted" style={{ fontSize: '0.8rem' }}>
+                  <code className="text-muted" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
                     {server.dns || server.ip || gateway.serverId}
                   </code>
                 )}
-                <span className={`badge bg-${gatewayType.color}-lt text-${gatewayType.color}`}>
+                <span className={`badge bg-${gatewayType.color}-lt text-${gatewayType.color}`} style={{ flexShrink: 0 }}>
                   {gatewayType.label}
                 </span>
                 {gateway.ip && (
@@ -1008,7 +1008,7 @@ function NetworkConfigManager() {
                     className="btn btn-ghost-secondary btn-icon btn-sm p-1"
                     onClick={() => copyToClipboard(gateway.ip)}
                     title="Копировать IP"
-                    style={{ width: '20px', height: '20px' }}
+                    style={{ width: '20px', height: '20px', flexShrink: 0 }}
                   >
                     <IconCopy size={12} />
                   </button>
@@ -1017,7 +1017,7 @@ function NetworkConfigManager() {
             </div>
             
             {/* Правая часть: действия */}
-            <div className="d-flex align-items-center gap-2 px-3 border-start">
+            <div className="d-flex align-items-center gap-2 px-3 border-start" style={{ flexShrink: 0 }}>
               <button
                 className="btn btn-outline-secondary btn-sm"
                 onClick={() => handleEditGateway(gateway)}
@@ -1102,34 +1102,34 @@ function NetworkConfigManager() {
             </div>
             
             {/* Центральная часть: информация */}
-            <div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0 }}>
+            <div className="flex-grow-1 py-2 px-3" style={{ minWidth: 0, flex: '1 1 auto' }}>
               {/* Верхняя строка: флаг, название */}
-              <div className="d-flex align-items-center mb-1">
-                <div className="d-flex align-items-center me-3" style={{ minWidth: 0 }}>
+              <div className="d-flex align-items-center mb-1 flex-wrap">
+                <div className="d-flex align-items-center me-3" style={{ flex: '0 0 auto' }}>
                   {displayCountry && (
-                    <span className="me-2" style={{ fontSize: '1.25rem' }}>{countryToFlag(displayCountry)}</span>
+                    <span className="me-2" style={{ fontSize: '1.25rem', flexShrink: 0 }}>{countryToFlag(displayCountry)}</span>
                   )}
-                  <div style={{ minWidth: 0 }}>
+                  <div style={{ whiteSpace: 'nowrap' }}>
                     <span className="fw-semibold">{interfaceName}</span>
                   </div>
                 </div>
                 
                 {/* Зеленый блок с IP */}
                 {displayIp && displayIp !== '—' && (
-                  <span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap' }}>
+                  <span className="badge bg-success-lt text-success ms-auto" style={{ whiteSpace: 'nowrap', flexShrink: 0, fontSize: '0.875rem' }}>
                     → {displayIp}
                   </span>
                 )}
               </div>
               
               {/* Нижняя строка: DNS + badges */}
-              <div className="d-flex align-items-center gap-2">
+              <div className="d-flex align-items-center gap-2 flex-wrap">
                 {displayServerName && (
-                  <code className="text-muted" style={{ fontSize: '0.8rem' }}>
+                  <code className="text-muted" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
                     {displayServerName}
                   </code>
                 )}
-                <span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`}>
+                <span className={`badge bg-${interfaceTypeColor}-lt text-${interfaceTypeColor}`} style={{ flexShrink: 0 }}>
                   {iface.type}
                 </span>
                 {displayIp && displayIp !== '—' && (
@@ -1137,7 +1137,7 @@ function NetworkConfigManager() {
                     className="btn btn-ghost-secondary btn-icon btn-sm p-1"
                     onClick={() => copyToClipboard(displayIp)}
                     title="Копировать IP"
-                    style={{ width: '20px', height: '20px' }}
+                    style={{ width: '20px', height: '20px', flexShrink: 0 }}
                   >
                     <IconCopy size={12} />
                   </button>
@@ -1146,7 +1146,7 @@ function NetworkConfigManager() {
             </div>
             
             {/* Правая часть: действия */}
-            <div className="d-flex align-items-center gap-2 px-3 border-start">
+            <div className="d-flex align-items-center gap-2 px-3 border-start" style={{ flexShrink: 0 }}>
               <button
                 className="btn btn-outline-secondary btn-sm"
                 onClick={() => handleEditInterface(iface)}