text i/o: ensure consistent bg color regardless of height

google · Jan 30, 2024 · af9826a · af9826a
1 parent d12f82f
commit af9826a
Showing 1 changed file with 49 additions and 44 deletions.
diff --git a/mesop/labs/io.py b/mesop/labs/io.py
@@ -51,57 +51,62 @@ def on_click_clear(e: me.ClickEvent):
   with me.box(
     style=me.Style(
       background="#f0f4f8",
-      padding=me.Padding(top=24, left=24, right=24, bottom=24),
       height="100%",
-      display="flex",
-      flex_direction="column",
     )
   ):
-    if title:
-      me.text(title, type="headline-5")
     with me.box(
       style=me.Style(
-        margin=me.Margin(left="auto", right="auto"),
-        width="min(1024px, 100%)",
-        gap="24px",
-        flex_grow=1,
-        display="flex",
-        flex_wrap="wrap",
-      )
-    ):
-      box_style = me.Style(
-        flex_basis="max(480px, calc(50% - 48px))",
-        background="#fff",
-        border_radius=12,
-        box_shadow="0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f",
-        padding=me.Padding(top=16, left=16, right=16, bottom=16),
+        background="#f0f4f8",
+        padding=me.Padding(top=24, left=24, right=24, bottom=24),
         display="flex",
         flex_direction="column",
       )
-      with me.box(style=box_style):
-        me.text("Input", style=me.Style(font_weight=500))
-        me.box(style=me.Style(height=16))
-        me.textarea(
-          key=str(me.state(State).textarea_key),
-          on_input=on_input,
-          rows=5,
-          autosize=True,
-          max_rows=15,
-          style=me.Style(width="100%"),
+    ):
+      if title:
+        me.text(title, type="headline-5")
+      with me.box(
+        style=me.Style(
+          margin=me.Margin(left="auto", right="auto"),
+          width="min(1024px, 100%)",
+          gap="24px",
+          flex_grow=1,
+          display="flex",
+          flex_wrap="wrap",
         )
-        me.box(style=me.Style(height=12))
-        with me.box(
-          style=me.Style(display="flex", justify_content="space-between")
-        ):
-          me.button(
-            "Clear", color="primary", type="stroked", on_click=on_click_clear
-          )
-          me.button(
-            "Generate",
-            color="primary",
-            type="raised",
-            on_click=on_click_generate,
+      ):
+        box_style = me.Style(
+          flex_basis="max(480px, calc(50% - 48px))",
+          background="#fff",
+          border_radius=12,
+          box_shadow="0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f",
+          padding=me.Padding(top=16, left=16, right=16, bottom=16),
+          display="flex",
+          flex_direction="column",
+        )
+        with me.box(style=box_style):
+          me.text("Input", style=me.Style(font_weight=500))
+          me.box(style=me.Style(height=16))
+          me.textarea(
+            key=str(me.state(State).textarea_key),
+            on_input=on_input,
+            rows=5,
+            autosize=True,
+            max_rows=15,
+            style=me.Style(width="100%"),
           )
-      with me.box(style=box_style):
-        me.text("Output", style=me.Style(font_weight=500))
-        me.markdown(me.state(State).output)
+          me.box(style=me.Style(height=12))
+          with me.box(
+            style=me.Style(display="flex", justify_content="space-between")
+          ):
+            me.button(
+              "Clear", color="primary", type="stroked", on_click=on_click_clear
+            )
+            me.button(
+              "Generate",
+              color="primary",
+              type="raised",
+              on_click=on_click_generate,
+            )
+        with me.box(style=box_style):
+          me.text("Output", style=me.Style(font_weight=500))
+          me.markdown(me.state(State).output)