Draw a tile on the editor's mockup the way the screen does: the CYD shows the whole tile again (0.2.76)

Both boards draw a normal tile with the icon on the left and the name and value beside it;
the Vue editor stacked icon, name and value in one column. On a CYD mockup a tile is 47 px
high and that stack needed 58 px (63 for a watch card), so the value line was cut in half and
a big value hid the name. A single tile is now a row (.head: icon + .tx), a watch card puts
the name row on top and the number under it, and the small slider runs underneath; on a CYD
a tile with a slider uses the screen's 4 px padding and 8 px slider. The Guition mockup
follows the screen the same way.

App 0.2.76, firmware stays 0.2.63. Test results in docs/TEST_RESULTS_0276.md.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/tests/components.spec.ts

@@ -65,6 +65,21 @@ describe("TileCard", () => {
     expect(gone.find(".st").text()).toBe("Unavailable");
     expect(gone.find(".st").classes()).toContain("off");
   });
+  it("draws a single tile as the screen does: the icon left, the name and value beside it", () => {
+    state.liveStates["sensor.t"] = { state: "1249", word: null, a: { unit_of_measurement: "W" } };
+    const plain = placed({ entity: "sensor.t", name: "Power", slot: 0 });
+    expect(plain.find(".head > .ic").exists()).toBe(true);
+    expect(plain.find(".head > .tx > .nm").text()).toBe("Power");
+    expect(plain.find(".head > .tx > .st").text()).toBe("1249 W");
+    // A watch card keeps the name next to the icon and puts the big value underneath.
+    const watch = placed({ entity: "sensor.t", name: "Power", slot: 1, options: { display: "watch" } });
+    expect(watch.find(".head").classes()).toContain("top");
+    expect(watch.find(".head .big").exists()).toBe(false);
+    expect(watch.find(".head + .big").text()).toBe("1249W");
+    state.liveStates["light.a"] = { state: "on", word: "On", a: { brightness: 255 } };
+    const lamp = placed({ entity: "light.a", name: "", slot: 2, options: { inline: "slider" } });
+    expect(lamp.find(".head + .mini-slider").exists()).toBe(true);
+  });
   it("shows the display name when Home Assistant has no value, and nothing for a scene", () => {
     const graph = placed({ entity: "sensor.x", name: "Unknown sensor", slot: 0, options: { display: "graph" } });
     expect(graph.find(".st").text()).toBe("graph");