From 16a42ba330befc8de2a2471562e3eed75e16ee6a Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Sat, 1 Mar 2025 13:46:18 +0100
Subject: [PATCH] Fix signature component with styling and update canvas
 dimensions

---
 core/scss/_core.scss                      |  1 +
 core/scss/ui/_signature.scss              | 13 +++++++++++++
 preview/pages/_includes/ui/signature.html |  4 ++--
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 core/scss/ui/_signature.scss

diff --git a/core/scss/_core.scss b/core/scss/_core.scss
index fc4686086..3e3db378e 100644
--- a/core/scss/_core.scss
+++ b/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";
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
new file mode 100644
index 000000000..092f09ab4
--- /dev/null
+++ b/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%;
+}
\ No newline at end of file
diff --git a/preview/pages/_includes/ui/signature.html b/preview/pages/_includes/ui/signature.html
index 3f1929646..57cb25be5 100644
--- a/preview/pages/_includes/ui/signature.html
+++ b/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 %}