🚧 WIP

src/wago_sim/webui/static/style.css

@@ -91,6 +91,7 @@ h2 { margin: 4px 0 14px; }
   /* label stacks (LED + code, or code + lim LEDs + bar + num) are
      taller than the bare indicators; keep the rail visually even */
   min-height: 124px;
+  flex-shrink: 0;   /* keep the computed width — do not squeeze rows */
 }
 .mod-head {
   position: absolute; top: 2px; left: 5px;
@@ -98,11 +99,11 @@ h2 { margin: 4px 0 14px; }
   letter-spacing: 0.02em; white-space: nowrap;
 }
 .mod-designation {
-  /* kind+slot designation (DI0, DO2, AI4) — upper right corner,
-     same size and vertical alignment as the article number */
-  position: absolute; top: 2px; right: 5px;
+  /* kind+slot designation (DI0, DO2, AI4) — module's lower left
+     corner, below the channel indicators (FR-10.2.2) */
+  position: absolute; bottom: 3px; left: 5px;
   font-size: 0.62rem; color: #33414f; font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.02em; line-height: 1;
 }
 .coupler { min-width: 96px; background: linear-gradient(#0d5db4, #003a7a); }
 .coupler .mod-head { color: #fff; font-size: 0.75rem; }
@@ -118,7 +119,12 @@ h2 { margin: 4px 0 14px; }
 .module { display: flex; flex-direction: column; justify-content: flex-end; }
 .mod-channels {
   display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-end;
-  padding: 8px 6px 8px;
+  padding: 8px 6px 16px;   /* bottom room for the designation label */
+}
+.row-break {
+  /* two-deck layout: force channels 8-15 onto a second row */
+  flex-basis: 100%;
+  height: 0;
 }
 
 /* DI/DO LED cells with channel-number labels (FR-10.2.2) */