Fix signature component with styling and update canvas dimensions

core/scss/_core.scss

@@ -63,6 +63,7 @@
 @import "ui/charts";
 @import "ui/offcanvas";
 @import "ui/chat";
+@import "ui/signature";
 
 @import "utils/background";
 @import "utils/colors";

core/scss/ui/_signature.scss

@@ -0,0 +1,13 @@
+.signature {
+  border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+  padding: var(--#{$prefix}spacer-1);
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+.signature-canvas {
+  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
+  border-radius: var(--#{$prefix}border-radius-sm);
+  display: block;
+  cursor: crosshair;
+  width: 100%;
+}

preview/pages/_includes/ui/signature.html

@@ -1,6 +1,6 @@
 {% assign id = include.id | default: 'default' %}
 
-<div class="form-control p-0 position-relative{% if include.class %} {{ include.class }}{% endif %}">
+<div class="signature position-relative{% if include.class %} {{ include.class }}{% endif %}">
 	{% if include.clear %}
 	<div class="position-absolute top-0 end-0 p-2">
 		<div class="btn btn-icon" id="signature-{{ id }}-clear" title="Clear signature" data-bs-toggle="tooltip">
@@ -8,7 +8,7 @@
 		</div>
 	</div>
 	{% endif %}
-  <canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 200 }}" class="rounded d-block w-100 cursor-crosshair"></canvas>
+  <canvas id="signature-{{ id }}" width="{{ include.width | default: 400 }}" height="{{ include.height | default: 400 }}" class="signature-canvas"></canvas>
 </div>
 
 {% capture_script %}