docs: update playground examples

Author: thedanchez

apps/playground/pages/LegendShowcase.tsx

@@ -176,11 +176,10 @@ export const LegendShowcasePage: Component = () => {
             A space-efficient legend that displays series horizontally with minimal visual
             footprint. Perfect for dashboards where space is at a premium.
           </p>
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
+          <div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
             <SolidUplot
               autoResize
               data={sampleData}
-              height={300}
               scales={{ x: { time: false } }}
               series={sampleSeries}
               plugins={[
@@ -201,11 +200,10 @@ export const LegendShowcasePage: Component = () => {
             A more spacious legend with larger indicators and clear labeling. Ideal when you have
             sufficient space and want maximum readability.
           </p>
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
+          <div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
             <SolidUplot
               autoResize
               data={sampleData}
-              height={300}
               scales={{ x: { time: false } }}
               series={sampleSeries}
               plugins={[
@@ -227,11 +225,10 @@ export const LegendShowcasePage: Component = () => {
             subtle visual feedback when tooltips are active without interfering with data
             exploration.
           </p>
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
+          <div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
             <SolidUplot
               autoResize
               data={sampleData}
-              height={300}
               scales={{ x: { time: false } }}
               series={sampleSeries}
               plugins={[

apps/playground/pages/Plugins.tsx

@@ -152,7 +152,7 @@ export const PluginsPage: Component = () => {
         chart ecosystem.
       </p>
 
-      <div class="rounded-lg border border-gray-200 bg-white p-4">
+      <div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "400px" }}>
         <SolidUplot
           autoResize
           data={[
@@ -166,7 +166,6 @@ export const PluginsPage: Component = () => {
             [3, 5, 8, 10, 12, 15, 18, 20, 25, 28], // Signups
             [7, 10, 14, 18, 16, 20, 24, 28, 32, 36], // Downloads
           ]}
-          height={400}
           scales={{
             x: {
               time: false,

apps/playground/pages/TooltipDialog.tsx

@@ -140,11 +140,10 @@ export const TooltipDialogPage: Component = () => {
             (default). The tooltip uses absolute positioning with document coordinates. Scroll the
             page and hover near edges to test overflow adjustment.
           </p>
-          <div class="rounded-lg border border-gray-200 bg-white p-4">
+          <div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "400px" }}>
             <SolidUplot
               autoResize
               data={chartData}
-              height={400}
               scales={{
                 x: {
                   time: false,
@@ -232,11 +231,13 @@ export const TooltipDialogPage: Component = () => {
                   based on viewport edges, not dialog edges.
                 </p>
                 <Show when={dialogOpen()}>
-                  <div class="rounded-lg border border-gray-200 bg-white p-4">
+                  <div
+                    class="rounded-lg border border-gray-200 bg-white p-4"
+                    style={{ height: "400px" }}
+                  >
                     <SolidUplot
                       autoResize
                       data={chartData}
-                      height={400}
                       scales={{
                         x: {
                           time: false,