From cc69bc53b926a576afd3bff22fe0044a76a0fc00 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Thu, 22 Jan 2026 14:50:23 +0700
Subject: [PATCH] refactor(NetworkConfigManager): update card layout for items
 display; enhance responsiveness with Bootstrap grid system

---
 frontend/src/NetworkConfigManager.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/NetworkConfigManager.jsx b/frontend/src/NetworkConfigManager.jsx
index 4d675f1..4c71983 100644
--- a/frontend/src/NetworkConfigManager.jsx
+++ b/frontend/src/NetworkConfigManager.jsx
@@ -866,9 +866,11 @@ function NetworkConfigManager() {
         </div>
         
         {/* Items */}
-        <div className="d-flex flex-column">
+        <div className="row row-cards">
           {items.map(item => (
-            type === 'gateway' ? renderGatewayCard(item) : renderInterfaceCard(item, serverId)
+            <div key={item.id} className="col-12 col-md-6 col-lg-4">
+              {type === 'gateway' ? renderGatewayCard(item) : renderInterfaceCard(item, serverId)}
+            </div>
           ))}
         </div>
       </div>
@@ -942,7 +944,7 @@ function NetworkConfigManager() {
     }
     
     return (
-      <div key={gateway.id} className="card mb-2" style={{ borderRadius: '12px', maxWidth: '100%' }}>
+      <div className="card mb-2" style={{ borderRadius: '12px', maxWidth: '100%' }}>
         <div className="card-body p-0">
           <div className="d-flex align-items-stretch">
             {/* Левая часть: тип индикатора (как в ServerCard) */}
@@ -1077,7 +1079,7 @@ function NetworkConfigManager() {
     const displayIp = displayRemoteIp !== '—' ? displayRemoteIp : displayLocalIp;
     
     return (
-      <div key={iface.id} className="card mb-2" style={{ borderRadius: '12px', maxWidth: '100%' }}>
+      <div className="card mb-2" style={{ borderRadius: '12px', maxWidth: '100%' }}>
         <div className="card-body p-0">
           <div className="d-flex align-items-stretch">
             {/* Левая часть: тип интерфейса (как в ServerCard) */}