Update connection cards and version to 0.5.1

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

deployment/scripts/docker-build-and-push.sh

@@ -7,7 +7,7 @@ set -e
 
 # Configuration
 IMAGE_NAME="danaildr/webssh"
-VERSION="0.5.0"
+VERSION="0.5.1"
 PLATFORMS="linux/amd64,linux/arm64,linux/arm/v7"
 
 # Colors

src/help.html

@@ -390,7 +390,7 @@
         <p>📖 <strong>Project page:</strong> <a href="https://danaildr.eu/projects/webssh.html" target="_blank" rel="noopener">danaildr/webssh</a></p>
         <p>🐳 <strong>Docker Hub:</strong> <a href="https://hub.docker.com/r/danaildr/webssh" target="_blank" rel="noopener">danaildr/webssh</a></p>
         <p>📧 <strong>Support:</strong> See the <a href="https://danaildr.eu/projects/webssh.html" target="_blank" rel="noopener">project documentation</a> for setup, env vars, and reverse proxy config.</p>
-        <p>🔄 <strong>Version:</strong> WebSSH Multi-Connection Terminal v0.5.0</p>
+        <p>🔄 <strong>Version:</strong> WebSSH Multi-Connection Terminal v0.5.1</p>
         <p>⚡ <strong>Technologies:</strong> Python, Paramiko, WebSockets, HTML5, CSS3, JavaScript</p>
     </div>
 </body>

src/static/webssh.css

@@ -102,23 +102,30 @@ body {
 .connection-item.disconnected { border-left: 3px solid #ef4444; }
 
 .connection-name {
+  flex: 1;
+  min-width: 0;
   font-weight: 500;
   font-size: 14px;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .connection-heading {
   display: flex;
-  flex-direction: column; /* Добавено: подрежда ги вертикално */
+  flex-direction: column;
-  align-items: flex-start; /* Променено: подравнява ги вляво */
+  align-items: flex-start;
-  gap: 2px; /* Намалено, за да са по-близо едно до друго вертикално */
+  gap: 2px;
   min-width: 0;
   margin-bottom: 4px;
 }
 
-.connection-heading .connection-name { min-width: 0; }
+.connection-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
 
 .connection-load {
   flex: 0 1 auto;
@@ -136,9 +143,11 @@ body {
 }
 
 .host-status {
-  margin-top: 4px;
+  flex: none;
   font-size: 11px;
   font-weight: 500;
+  text-align: right;
+  white-space: nowrap;
 }
 
 .host-status.up { color: #34d399; }

src/static/webssh.js

@@ -450,16 +450,18 @@ function renderConnectionList() {
     item.onclick = () => selectConnection(conn.id);
     item.innerHTML = `
       <div class="connection-heading">
+        <div class="connection-title-row">
           <div class="connection-name">${conn.name}</div>
+          <div class="host-status ${conn.hostStatus === true ? 'up' : conn.hostStatus === false ? 'down' : 'checking'}">
+            Host: ${conn.hostStatus === true ? 'Up' : conn.hostStatus === false ? 'Down' : 'Checking...'}
+          </div>
+        </div>
         <div class="connection-load" title="Remote Linux load average">Load: ${loadText}</div>
       </div>
       <div class="connection-info">
         <span class="connection-status ${conn.connected ? 'connected' : 'disconnected'}"></span>
         ${conn.username}@${conn.host}:${conn.port}
       </div>
-      <div class="host-status ${conn.hostStatus === true ? 'up' : conn.hostStatus === false ? 'down' : 'checking'}">
-        Host: ${conn.hostStatus === true ? 'Up' : conn.hostStatus === false ? 'Down' : 'Checking...'}
-      </div>
       <div class="connection-actions" onclick="event.stopPropagation()">
         ${conn.connected 
           ? `<button class="btn-small btn-disconnect" onclick="disconnectConnection('${conn.id}')">Disconnect</button>`

src/webssh_backend/__init__.py

@@ -18,7 +18,7 @@ Usage:
     from webssh_backend.main import main
     asyncio.run(main())
 """
-__version__ = "0.5.0"
+__version__ = "0.5.1"
 
 # Note: Specific imports are intentionally NOT done at package level
 # to avoid loading all dependencies when only specific modules are needed.