format BinaryWithGroups and ASCII

frontend/src/platform/browser.rs

@@ -102,7 +102,8 @@ fn signal_to_timeline(
     block_height: u32,
 ) -> shared::Timeline {
     const MIN_BLOCK_WIDTH: u32 = 3;
-    const LETTER_WIDTH: u32 = 15;
+    // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs`
+    const LETTER_WIDTH: f64 = 9.61;
     const LETTER_HEIGHT: u32 = 21;
     const LABEL_X_PADDING: u32 = 10;
 
@@ -137,9 +138,11 @@ fn signal_to_timeline(
             continue;
         }
 
+        // @TODO cache?
         let value = shared::VarFormat::default().format(value);
 
-        let value_width = value.chars().count() as u32 * LETTER_WIDTH;
+        let value_width = (value.chars().count() as f64 * LETTER_WIDTH) as u32;
+        // @TODO Ellipsis instead of hiding?
         let label = if (value_width + (2 * LABEL_X_PADDING)) <= block_width {
             Some(shared::TimeLineBlockLabel {
                 text: value,

frontend/src/waveform_panel.rs

@@ -155,13 +155,14 @@ impl WaveformPanel {
         let (hovered, hovered_signal) = Mutable::new_and_signal(false);
         Button::new()
             .s(Height::exact(ROW_HEIGHT))
+            .s(Width::growable())
             .s(Background::new().color_signal(
                 hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
             ))
             .s(RoundedCorners::new().left(15).right(5))
             .label(
                 El::new()
-                    .s(Align::center())
+                    .s(Align::new().left())
                     .s(Padding::new().left(20).right(17).y(10))
                     .child(name),
             )

frontend/typescript/bundles/pixi_canvas.js

@@ -35221,7 +35221,7 @@ var VarSignalRow = class {
     align: "center",
     fill: "White",
     fontSize: 16,
-    fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
+    fontFamily: '"Courier New", monospace'
   });
   constructor(signal_ref_index, timeline, app, owner, rows_container, row_height, row_gap) {
     this.signal_ref_index = signal_ref_index;

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -125,7 +125,7 @@ class VarSignalRow {
         align: "center",
         fill: "White",
         fontSize: 16,
-        fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+        fontFamily: '"Courier New", monospace',
     });    
 
     constructor(