beautified the widget

the widgets now don't shrink past the size of the header. The canvas in the widget is scrollable and the scroller is pretty. The resizing arrow button at the bottom of the widget stays at the bottom (this is because only the canvas can scroll now).

client/src/theme.js

@@ -53,22 +53,30 @@ const widgetRecipe = defineSlotRecipe({
   slots: ["root", "header", "canvas"],
   base: {
     root: {
+      flexDirection: "column",
+      gap: "1",
+      position: "relative",
       bg: "base100",
       borderRadius: "md",
       p: "1",
+      paddingBottom: "2",
       border: "1px solid",
       borderColor: "{base300}",
       textAlign: "center",
-      overflow: "auto"
+      height: "100%"
     },
     header: {
-      bg: "base100",
+      bg: "base200",
       cursor: "move",
-      borderRadius: "md"
+      borderRadius: "sm",
+      whiteSpace: "nowrap"
     },
     canvas: {
+      flex: "1 1 auto",
       bg: "base100",
-      cursor: "default"
+      cursor: "default",
+      borderRadius: "md",
+      overflow: "auto",
     }
   }
 });
@@ -99,8 +107,6 @@ const config = defineConfig({
       },
     },
     recipes: {
-      // sidebar: sidebarRecipe,
-      // sidebarBTN: sidebarBtnRecipe,
       header: headerRecipe,
       canvas: canvasRecipe,
     },