From 6f1f8b368e542d209e7291b369ee67f7d84c9db7 Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Sat, 6 Dec 2025 22:59:43 +0700
Subject: [PATCH] refactor: Update FilterManager layout to utilize a grid
 system for server display, enhancing visual organization and responsiveness
 of server cards.

---
 frontend/src/FilterManager.jsx | 80 +++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/frontend/src/FilterManager.jsx b/frontend/src/FilterManager.jsx
index a232b2e..55fed28 100644
--- a/frontend/src/FilterManager.jsx
+++ b/frontend/src/FilterManager.jsx
@@ -985,54 +985,54 @@ function FilterManager() {
                       </div>
                     </div>
 
-                    {/* Горизонтальный список серверов */}
-                    <div className="d-flex flex-wrap gap-2 mb-2">
+                    {/* Список серверов в сетке Tabler */}
+                    <div className="row row-cards g-2 mb-2">
                       {activeServers.map(server => (
-                        <div
-                          key={server.id}
-                          className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
-                          style={{ minWidth: '220px', maxWidth: '260px' }}
-                          onClick={() => setSelectedServer(server)}
-                        >
-                          <div className="card-body d-flex align-items-start gap-2">
-                            <span className="avatar bg-primary-lt">
-                              <IconServer size={16} />
-                            </span>
-                            <div className="flex-grow-1">
-                              <div className="d-flex align-items-center gap-2">
-                                <div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
-                                <span className="badge bg-green-lt text-green">Активен</span>
-                              </div>
-                              {server.description && (
-                                <div className="text-muted small text-truncate" title={server.description}>
-                                  {server.description}
+                        <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={server.id}>
+                          <div
+                            className={`card card-sm h-100 cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
+                            onClick={() => setSelectedServer(server)}
+                          >
+                            <div className="card-body d-flex align-items-start gap-2">
+                              <span className="avatar bg-primary-lt">
+                                <IconServer size={16} />
+                              </span>
+                              <div className="flex-grow-1">
+                                <div className="d-flex align-items-center gap-2">
+                                  <div className="fw-bold text-truncate" title={server.name}>{server.name}</div>
+                                  <span className="badge bg-green-lt text-green">Активен</span>
                                 </div>
-                              )}
+                                {server.description && (
+                                  <div className="text-muted small text-truncate" title={server.description}>
+                                    {server.description}
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           </div>
                         </div>
                       ))}
                       {inactiveServers.map(server => (
-                        <div
-                          key={server.id}
-                          className={`card card-sm cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
-                          style={{ minWidth: '220px', maxWidth: '260px' }}
-                          onClick={() => setSelectedServer(server)}
-                        >
-                          <div className="card-body d-flex align-items-start gap-2">
-                            <span className="avatar bg-secondary-lt">
-                              <IconServer size={16} />
-                            </span>
-                            <div className="flex-grow-1">
-                              <div className="d-flex align-items-center gap-2">
-                                <div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>
-                                <span className="badge bg-secondary-lt text-secondary">Выкл</span>
-                              </div>
-                              {server.description && (
-                                <div className="text-muted small text-truncate" title={server.description}>
-                                  {server.description}
+                        <div className="col-12 col-sm-6 col-md-4 col-lg-3" key={server.id}>
+                          <div
+                            className={`card card-sm h-100 cursor-pointer ${selectedServer?.id === server.id ? 'border-primary' : ''}`}
+                            onClick={() => setSelectedServer(server)}
+                          >
+                            <div className="card-body d-flex align-items-start gap-2">
+                              <span className="avatar bg-secondary-lt">
+                                <IconServer size={16} />
+                              </span>
+                              <div className="flex-grow-1">
+                                <div className="d-flex align-items-center gap-2">
+                                  <div className="fw-bold text-muted text-truncate" title={server.name}>{server.name}</div>
+                                  <span className="badge bg-secondary-lt text-secondary">Выкл</span>
                                 </div>
-                              )}
+                                {server.description && (
+                                  <div className="text-muted small text-truncate" title={server.description}>
+                                    {server.description}
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           </div>
                         </div>