The new layout is ok. We can work on the content

src/components/workflows/assets/Workflows.css

@@ -47,6 +47,62 @@
 
 .wkf-properties {
   box-sizing: border-box;
+  position: relative;
+  font-family: Arial, sans-serif;
+  background-color: var(--color-base-100);  /* bg-base-100 */
+}
+
+.wkf-properties-input,  .wkf-properties-output {
+  display: inline-block;
+  vertical-align: top;
+  padding: 10px;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  background-color: var(--color-base-100);  /* bg-base-100 */
+
+}
+
+.wkf-properties-input {
+  border-width: 1px;
+  border-top-left-radius: 0.5rem;    /* rounded on left side */
+  border-bottom-left-radius: 0.5rem;
+  border-top-right-radius: 0;        /* not rounded on right side */
+  border-bottom-right-radius: 0;
+}
+
+.wkf-properties-output {
+  border-width: 1px;
+  border-top-right-radius: 0.5rem;   /* rounded on right side */
+  border-bottom-right-radius: 0.5rem;
+  border-top-left-radius: 0;         /* not rounded on left side */
+  border-bottom-left-radius: 0;
+}
+
+.wkf-properties-properties {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.wkf-properties-handle-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 5px;
+    height: 100%;
+    cursor: ew-resize;
+    background-color: transparent;
+}
+
+.wkf-properties-handle-right {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 5px;
+    height: 100%;
+    cursor: ew-resize;
+    background-color: transparent;
 }
 
 .wkf-canvas {

src/components/workflows/commands.py

@@ -34,6 +34,12 @@ class WorkflowDesignerCommandManager(BaseCommandManager):
   def __init__(self, owner):
     super().__init__(owner)
   
+  def on_save(self):
+    return {}
+  
+  def on_cancel(self):
+    return {}
+  
   def select_processor(self, component_id: str):
     return {
         "hx_post": f"{ROUTE_ROOT}{Routes.SelectProcessor}",

src/components/workflows/components/WorkflowDesignerProperties.py

@@ -26,7 +26,7 @@ class WorkflowDesignerProperties(BaseComponent):
     if self._owner.get_state().properties_input_width is None:
       input_width = self._boundaries["width"] // 3
       properties_width = self._boundaries["width"] // 3
-      output_width = self._boundaries["width"] - input_width - properties_width - 10
+      output_width = self._boundaries["width"] - input_width - properties_width
     else:
       input_width = self._owner.get_state().properties_input_width
       properties_width = self._owner.get_state().properties_properties_width
@@ -45,14 +45,16 @@ class WorkflowDesignerProperties(BaseComponent):
     return Div(
       "Input",
       id=f"pi_{self._id}",
-      style=f"width: {self.layout.input_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;"
+      style=f"width: {self.layout.input_width}px;",
+      cls="wkf-properties-input"
     )
   
   def _mk_output(self):
     return Div(
       "Output",
       id=f"po_{self._id}",
-      style=f"width: {self.layout.output_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;"
+      style=f"width: {self.layout.output_width}px;",
+      cls="wkf-properties-output"
     )
   
   def _mk_properties(self):
@@ -77,23 +79,25 @@ class WorkflowDesignerProperties(BaseComponent):
           Button("Cancel", **self._commands.on_cancel(), style="padding: 5px 10px;"),
           style="text-align: center;"
         ),
-        style=f"padding: 10px; height: {self._boundaries['height'] - 20}px; box-sizing: border-box;"
+        style=f"padding: 10px; box-sizing: border-box;"
       ),
       
       # Left resize handle
       Div(
         id=f"ppl_{self._id}",
-        style="position: absolute; left: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;"
+        cls="wkf-properties-handle-left"
       ),
       
       # Right resize handle
       Div(
         id=f"ppr_{self._id}",
-        style="position: absolute; right: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;"
+        cls="wkf-properties-handle-right"
       ),
       
       id=f"pp_{self._id}",
-      style=f"width: {self.layout.properties_width}px; height: {self._boundaries['height']}px; background-color: #f8f8f8; border: 1px solid #ccc; display: inline-block; vertical-align: top; position: relative; box-sizing: border-box;"
+      style=f"width: {self.layout.properties_width}px;",
+      cls="wkf-properties-properties"
+      
     )
   
   def _mk_layout(self):
@@ -101,13 +105,19 @@ class WorkflowDesignerProperties(BaseComponent):
       self._mk_input(),
       self._mk_properties(),
       self._mk_output(),
+      cls="flex",
+      style="height: 100%; width: 100%; flex: 1;"
     )
   
   def __ft__(self, oob=False):
     # return self.render()
     return Div(
       self._mk_layout(),
-      style=f"height: {self._boundaries['height']}px; border: 2px solid #333; position: relative; font-family: Arial, sans-serif;",
+      style=f"height: {self._get_height()}px;",
       id=f"p_{self._id}",
       hx_swap_oob='true' if oob else None,
+      cls="wkf-properties"
     )
+  
+  def _get_height(self):
+    return self._boundaries["height"] - self._owner.get_state().designer_height - 86