From e8873f61a55e6f65165b451e8de7db2b81c41f30 Mon Sep 17 00:00:00 2001
From: AB <ab@hexor.cy>
Date: Mon, 6 Jul 2026 16:57:26 +0300
Subject: [PATCH] Fixed mobile UI

---
 Cargo.lock             |  2 +-
 Cargo.toml             |  2 +-
 templates/configs.html | 37 ++++++++++++++++++++++++++-----------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index befe873..815ad96 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -61,7 +61,7 @@ checksum = "683d7910e743518b0e34f1186f92494becacb047c7b6bf616c96772180fef923"
 
 [[package]]
 name = "amnezia-fellow"
-version = "0.1.7"
+version = "0.1.8"
 dependencies = [
  "async-trait",
  "base64 0.22.1",
diff --git a/Cargo.toml b/Cargo.toml
index f2f011a..68889f8 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "amnezia-fellow"
-version = "0.1.8"
+version = "1.0.0"
 edition = "2024"
 description = "Amnezia VPN client manager with SSO, SQLite/PostgreSQL, and Kubernetes Secret sync"
 
diff --git a/templates/configs.html b/templates/configs.html
index e29edc8..b9f2213 100644
--- a/templates/configs.html
+++ b/templates/configs.html
@@ -41,7 +41,7 @@
     button.secondary { background: #fff; color: #17202a; border-color: #cbd3db; }
     button.danger { background: #9d2323; border-color: #9d2323; }
     button:disabled { opacity: .55; cursor: default; }
-    table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dde2e6; border-radius: 6px; overflow: hidden; }
+    .config-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dde2e6; border-radius: 6px; overflow: hidden; }
     th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid #edf0f2; font-size: .92rem; vertical-align: middle; }
     th { background: #eef1f4; font-weight: 650; color: #34414f; }
     tr:last-child td { border-bottom: 0; }
@@ -122,15 +122,30 @@
     .secret-box code { display: block; padding: .55rem .65rem; font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
     @media (max-width: 760px) {
         .shell { grid-template-columns: 1fr; }
-        .sidebar { display: flex; align-items: center; gap: .75rem; overflow-x: auto; }
+        .sidebar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; overflow-x: visible; }
         .sidebar h1 { margin: 0; white-space: nowrap; }
         .sidebar a { margin: 0; white-space: nowrap; }
         .toolbar { align-items: stretch; flex-direction: column; }
         .actions { align-items: stretch; }
         .actions input, .actions button { width: 100%; }
         .main { padding: 1rem; }
-        table { display: block; overflow-x: auto; }
-        .row-actions { align-items: stretch; }
+        .config-table { display: block; border: 0; border-radius: 0; background: transparent; overflow: visible; }
+        .config-table thead { display: none; }
+        .config-table tbody { display: grid; gap: .65rem; margin-bottom: .75rem; }
+        .config-table tr { display: grid; min-width: 0; border: 1px solid #dde2e6; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(23, 32, 42, .05); }
+        .config-table tr.owner-row { border: 0; border-radius: 0; background: transparent; box-shadow: none; margin: .2rem 0 -.2rem; }
+        .config-table tr.owner-row td { display: flex; align-items: center; gap: .25rem; border: 0; padding: .15rem .1rem; background: transparent; color: #34414f; }
+        .config-table tr.owner-row td::before { display: none; }
+        .config-table td { display: grid; grid-template-columns: minmax(84px, .4fr) minmax(0, 1fr); gap: .55rem; align-items: center; min-width: 0; padding: .55rem .65rem; }
+        .config-table td::before { content: attr(data-label); min-width: 0; color: #53606d; font-size: .78rem; font-weight: 750; }
+        .config-table td:last-child { border-bottom: 0; }
+        .config-table code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
+        .client-name-cell { display: block !important; padding: .7rem .65rem .55rem !important; color: #1d252d; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
+        .client-name-cell::before, .client-actions-cell::before { display: none; }
+        .client-actions-cell { display: block !important; padding: .65rem !important; }
+        .row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; width: 100%; }
+        .row-actions button { width: 100%; min-width: 0; white-space: normal; }
+        .row-actions button:first-child { grid-column: 1 / -1; }
         .servers-modal { width: 100%; max-height: calc(100vh - 2rem); }
         .server-card-actions { grid-template-columns: 1fr; }
         .server-card-actions button { flex: 1 1 100%; }
@@ -232,7 +247,7 @@
             </template>
 
             <template x-if="clients.length > 0">
-                <table>
+                <table class="config-table">
                     <thead>
                         <tr>
                             <th>{{ t.configs_name }}</th>
@@ -257,14 +272,14 @@
                             {% endif %}
                             <template x-for="client in group.clients" :key="client.id">
                                 <tr>
-                                    <td x-text="client.name"></td>
+                                    <td class="client-name-cell" data-label="{{ t.configs_name }}" x-text="client.name"></td>
                                     {% if is_admin %}
-                                    <td x-text="ownerLabel(client)"></td>
+                                    <td data-label="{{ t.configs_owner }}" x-text="ownerLabel(client)"></td>
                                     {% endif %}
-                                    <td><code x-text="client.address + '/32'"></code></td>
-                                    <td><code x-text="shortKey(client.public_key)"></code></td>
-                                    <td x-text="client.enabled ? '{{ t.configs_yes }}' : '{{ t.configs_no }}'"></td>
-                                    <td>
+                                    <td data-label="{{ t.configs_address }}"><code x-text="client.address + '/32'"></code></td>
+                                    <td data-label="{{ t.configs_public_key }}"><code x-text="shortKey(client.public_key)"></code></td>
+                                    <td data-label="{{ t.configs_enabled }}" x-text="client.enabled ? '{{ t.configs_yes }}' : '{{ t.configs_no }}'"></td>
+                                    <td class="client-actions-cell" data-label="{{ t.users_actions }}">
                                         <div class="row-actions">
                                             <button class="secondary" @click="openServers(client)" :disabled="busy">{{ t.configs_servers }}</button>
                                             <button class="secondary" @click="setEnabled(client, !client.enabled)" :disabled="busy" x-text="client.enabled ? '{{ t.configs_disable }}' : '{{ t.configs_enable }}'"></button>