Update frames UI

Author: Matteo-it

examples/led-matrix-painter/assets/app.js

@@ -456,7 +456,7 @@ function renderFrames(){
         } else if (typeof row === 'string') {
           isOn = row[c] === '1';
         }
-        const dot = document.createElement('div'); dot.style.background = isOn ? '#0b76ff' : '#fff'; thumb.appendChild(dot);
+        const dot = document.createElement('div'); dot.style.background = isOn ? '#3CE2FF' : 'transparent'; thumb.appendChild(dot);
       }
     }
     const name = document.createElement('div'); name.className = 'frame-name'; name.textContent = f.name || ('Frame ' + f.id);
@@ -654,7 +654,7 @@ async function handleNewFrameClick() {
       headers: {'Content-Type':'application/json'},
       body: JSON.stringify({
         rows: grid,
-        name: '', // empty name = backend will assign Frame{id}
+        name: '', // empty name = backend will assign Frame {id}
         duration_ms: 1000,
         brightness_levels: BRIGHTNESS_LEVELS
       })
@@ -663,7 +663,7 @@ async function handleNewFrameClick() {
     if (data && data.ok && data.frame) {
       loadedFrame = data.frame;
       loadedFrameId = data.frame.id;
-      // Set name to the backend-assigned name (Frame{id})
+      // Set name to the backend-assigned name (Frame {id})
       if(frameTitle) frameTitle.textContent = data.frame.name || `Frame ${data.frame.id}`;
 
       // Show C vector representation

examples/led-matrix-painter/assets/style.css

@@ -480,12 +480,13 @@ input:checked + .slider:before {
 .frames {
     display: flex;
     flex-direction: row; /* Horizontal layout */
-    flex-wrap: nowrap; /* Keep in a single line */
+    flex-wrap: wrap; /* Allow frames to wrap to the next line */
     gap: 8px;
-    overflow-x: auto; /* Allow horizontal scrolling */
-    overflow-y: hidden;
-    align-items: center; /* Vertically center items */
-    height: 100%; /* Set fixed height to match buttons */
+    /* Removed overflow-x: auto as horizontal scrolling is no longer needed */
+    /* Changed height to auto to allow the container to expand vertically */
+    height: auto;
+    align-items: flex-start; /* Align items to the start of the cross axis (top) */
+    align-items: center;
 }
 .frame-item {
     display: flex;
@@ -496,14 +497,13 @@ input:checked + .slider:before {
     border: 1px solid #f0f0f0; /* Default border */
     border-radius: 8px; /* Requested border-radius */
     background: transparent; /* Remove default background */
-    max-width: 132px;
+    width: 120px;
     flex-shrink: 0; /* Prevent shrinking */
-    height: 100%; /* Make frame item fill the height of its container */
 }
 .frame-thumb {
-    width: 65px;
-    height: 40px;
-    background: #fff;
+    width: 112px;
+    height: 69px;
+    background: #374146; /* Changed to match original matrix background */
     border: 1px solid #ddd;
     display: grid;
     grid-template-columns: repeat(13, 1fr);

examples/led-matrix-painter/python/store.py

@@ -89,7 +89,7 @@ def save_frame(frame: AppFrame) -> int:
 
     # Backend responsibility: assign progressive name if empty
     if new_id and (not frame.name or frame.name.strip() == ''):
-        frame.name = f'Frame{new_id}'
+        frame.name = f'Frame {new_id}'
         frame.id = new_id
         db.update("frames", {"name": frame.name}, condition=f"id = {new_id}")