🚧 Change LED indicator alignments

src/wago_sim/webui/static/app.js

@@ -271,9 +271,16 @@ function renderRail() {
     const el = document.createElement("div");
     el.className = "module";
     el.dataset.index = mod.index;
-    // width: 8 channels per row (two-deck layout), min 110px
-    const perRow = Math.min(mod.channels.length, 8);
-    el.style.width = `${Math.max(110, 30 * perRow)}px`;
+    const isDigital = mod.channels[0] &&
+      (mod.channels[0].kind === "di" || mod.channels[0].kind === "do");
+    // thin, tall bezels: digital modules get one 26px column per
+    // group of eight; analog modules keep their indicator-stack width
+    const digitalCount = mod.channels.filter(
+      (c) => c.kind === "di" || c.kind === "do").length;
+    const columns = Math.max(1, Math.ceil(digitalCount / 8));
+    el.style.width = isDigital
+      ? `${Math.max(46, 26 * columns)}px`
+      : `${Math.max(90, 30 * mod.channels.length)}px`;
     const kind = mod.channels[0] ? mod.channels[0].kind : "di";
     el.classList.add(`mod-${kind.startsWith("d") ? kind : "analog"}`);
 
@@ -283,14 +290,15 @@ function renderRail() {
     const designation = firstCode.slice(0, firstCode.indexOf("."));
 
     let html = `<div class="mod-head" title="${mod.description}">${mod.article}</div>`;
-    html += `<div class="mod-channels">`;
-    let chIndex = 0;   // digital channels: two rows, 0-7 then 8-15
+    html += `<div class="mod-channels ${isDigital ? "mod-channels-v" : ""}">`;
+    let chIndex = 0;
     for (const ch of mod.channels) {
       const id = `ch-${ch.kind}-${mod.index}-${channelNo(ch.address)}`;
       const chNo = String(channelNo(ch.address));   // 0-based channel only
-      if (ch.kind === "di" || ch.kind === "do") {
+      if (isDigital) {
         if (chIndex > 0 && chIndex % 8 === 0) {
-          html += `<span class="row-break"></span>`;  // start the 8-15 row
+          // new vertical column for channels 8-15
+          html += `</div><div class="mod-channels mod-channels-v col2">`;
         }
         html += `<span class="led-cell">
                    <span class="led" id="${id}" title="${ch.name} (${ch.address}, MB ${ch.modbus})"

src/wago_sim/webui/static/style.css

@@ -116,15 +116,32 @@ h2 { margin: 4px 0 14px; }
   background: #4caf50;
   box-shadow: 0 0 7px 2px rgba(76, 175, 80, 0.85);
 }
-.module { display: flex; flex-direction: column; justify-content: flex-end; }
+.module {
+  /* thin, tall bezel: the module's channel columns sit side by side */
+  flex-shrink: 0;   /* keep the computed width — do not squeeze rows */
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+/* digital modules: tall enough for 8 vertically stacked LEDs + labels */
+.module:has(.mod-channels-v) { min-height: 248px; }
+.module { min-height: 124px; }
 .mod-channels {
   display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-end;
   padding: 8px 6px 16px;   /* bottom room for the designation label */
 }
+/* vertical digital columns: LEDs stacked top-to-bottom, 8 per column */
+.mod-channels-v {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 20px 4px 16px;  /* top room for the article header */
+  gap: 4px;
+}
 .row-break {
-  /* two-deck layout: force channels 8-15 onto a second row */
-  flex-basis: 100%;
-  height: 0;
+  /* legacy two-row layout marker — vertical columns replace it */
+  display: none;
 }
 
 /* DI/DO LED cells with channel-number labels (FR-10.2.2) */