Composr v1.7.7

✨ Features:
- Multi-host Docker container management
- Real-time container monitoring and control
- Docker Compose file editor with syntax highlighting
- Environment file management
- Image management across multiple hosts
- Backup and restore functionality
- Modern web interface with dark/light themes

Author: joe

CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 All notable changes to Composr will be documented in this file.
+## [1.7.7] - 2025-07-01
+### Added
+- **🎯 Smart Health Indicators**: Intelligent container health assessment system
+  - Real-time health evaluation based on container status, uptime, and resource usage
+  - Visual health indicators with color-coded status (green=healthy, yellow=warning, red=error)
+  - Smart warning detection for recently restarted containers (< 5 minutes uptime)
+  - Health tooltips showing specific issues and recommendations
+- **📊 Persistent Operation Results**: Enhanced operation feedback system
+  - Detailed operation result modals showing actual docker-compose command output
+  - Persistent error messages that stay visible until manually dismissed
+  - Success messages with auto-close after 10 seconds
+  - Full command output display for debugging deployment failures
+  - Network error handling with detailed error information
+- **🔒 Scroll Position Preservation**: Automatic scroll position retention
+  - Container list maintains scroll position after refresh operations
+  - No more jumping back to top after container actions or page updates
+  - Improved user experience for large container lists
+
+### Changed
+- **Container Status Display**: Replaced basic status badges with health-aware color coding
+  - Container status text now changes color based on health level
+  - Removed separate health column for cleaner table layout
+  - Unified health indication across both card and table views
+- **Card Layout Redesign**: Modernized container card appearance and organization
+  - 4-row compact layout: Name → Host/Status/Uptime/More → Ports → Actions
+  - Reduced card height (240px → 120px) for better screen utilization
+  - Modern gradient backgrounds with improved hover effects
+  - Better content organization with proper spacing and alignment
+- **Table Structure Optimization**: Streamlined table columns for better usability
+  - Consolidated health and status into single color-coded status column
+  - Improved column alignment and responsive design
+  - Fixed group header colspan to match new column structure
+
+### Fixed
+- **Operation Feedback**: Replaced generic "success/failed" messages with actual command output
+  - Users now see real docker-compose errors instead of "operation failed"
+  - Full deployment logs visible for troubleshooting
+  - Network errors properly captured and displayed
+- **Card View Consistency**: Fixed container card sizing and layout inconsistencies
+  - All cards now maintain uniform height regardless of content
+  - Proper content overflow handling for long port lists
+  - Consistent button placement and spacing
+- **Health Indicator Integration**: Seamless health status across all views
+  - Card view health dots properly positioned in top-right corner
+  - Table view health coloring applied consistently
+  - Health assessment working for both grouped and ungrouped views
+- **Page Navigation**: Fixed scroll position jumping to top after container operations
+  - Maintains user's current scroll position during refresh operations
+  - Better UX for managing large numbers of containers
+
+### Technical
+- **Health Assessment Engine**: Comprehensive container health evaluation system
+- **Operation Result Modal**: New modal system for displaying command outputs
+- **Scroll Management**: Intelligent scroll position preservation system
+- **CSS Optimization**: Streamlined styling with improved responsiveness
+- **Error Handling**: Enhanced error capture and display throughout the application
+
+This release significantly improves user experience by providing clear visual feedback about container health, detailed information when operations fail, and seamless navigation that maintains user context during operations.
 ## [1.7.6] - 2025-06-20
 - **Fixed critical bug where container labels were lost during backup/restore**
 - **All original container labels (watchtower, traefik, custom, etc.) are now 

VERSION

@@ -1 +1 @@
-1.7.6
+1.7.7

app.py

@@ -27,7 +27,7 @@
 from remote_hosts import host_manager
 
 # Add after imports
-__version__ = "1.7.6"
+__version__ = "1.7.7"
 
 # Initialize Flask app
 app = Flask(__name__)

static/css/styles.css

@@ -304,14 +304,30 @@ header {
 }
 
 .container-card {
-    min-height: 140px !important;
-    display: flex !important;
-    flex-direction: column !important;
+    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    padding: 1rem;
+    min-height: 100px; /* Much shorter */
+    max-height: 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
 }
 
+.container-body {
+    flex: 1 !important;
+    justify-content: space-between !important;
+    overflow: hidden !important;  /* ADD THIS to prevent content overflow */
+}
+
+
+
 .container-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     border-color: var(--accent-primary);
 }
 
@@ -322,46 +338,61 @@ header {
 }
 
 .container-header {
-    align-items: flex-start !important;
-    min-height: 2.5rem !important;
+    display: flex;
+    align-items: center;
+    min-height: auto;
 }
 
+.container-name {
+    font-weight: 600;
+    font-size: 1rem;
+    flex: 1;
+}
+
+/* Row 2: Host, Status, Uptime, More button */
+.container-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
 .container-header-right {
     max-width: 60% !important;
     justify-content: flex-end !important;
     flex-shrink: 0 !important;
 }
 
-.container-name {
-    flex: 1 !important;
-    min-width: 0 !important;
-    line-height: 1.2 !important;
-}
 
-.container-body {
-    flex: 1 !important;
-    justify-content: space-between !important;
-}
+
 
 .container-name:hover {
     color: var(--accent-secondary);
     text-decoration: none;
 }
 
 
+.container-status-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
 
-/* === Container Ports === */
+/* Row 3: Ports (single line) */
 .container-ports {
     font-size: 0.8rem;
     color: var(--text-secondary);
     background: var(--bg-tertiary);
-    padding: 0.2rem 0.5rem;
-    border-radius: 0.25rem;
-    margin: 0.3rem 0;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
     font-family: monospace;
-    border: 1px solid var(--border-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
 }
 
+
 .container-ports:empty::before {
     content: "No ports";
     font-style: italic;
@@ -452,9 +483,16 @@ header {
 }
 
 /* === Actions === */
+/* Row 4: Actions */
 .actions {
-    margin-top: auto !important;
-    padding-top: 0.5rem !important;
+    display: flex;
+    gap: 0.5rem;
+    margin-top: auto;
+}
+
+.actions .btn {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8rem;
 }
 
 /* === Buttons === */
@@ -2459,4 +2497,18 @@ select {
     gap: 0.5rem;
     margin-bottom: 0;
     white-space: nowrap;
-}
+}
+.container-card {
+    position: relative;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+}
+
+.container-actions {
+    margin-top: auto;
+}
+
+.health-healthy { color: #22c55e; }
+.health-warning { color: #f59e0b; }
+.health-error { color: #ef4444; }