From dbe391dc2324eb6987f0db9a7f05c91a0c0f2674 Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Wed, 5 Aug 2026 00:39:44 +0200
Subject: [PATCH] Fix signature pad clear button accessibility and canvas
 height drift (#2789)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 core/scss/ui/_signature.scss | 5 +++++
 shared/ui/Signature.astro    | 6 ++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index 56a0755d5..f62226f7c 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -3,6 +3,7 @@
 .signature {
   --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
   --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}signature-canvas-height: 12.5rem;
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   padding: var(--#{$prefix}signature-padding);
   @include border-radius(var(--#{$prefix}border-radius));
@@ -14,4 +15,8 @@
   display: block;
   cursor: crosshair;
   width: 100%;
+  // A fixed height is required: without it the canvas height comes from its own
+  // width/height attributes, which `resizeCanvas()` rewrites on every resize —
+  // each run then measures a different `offsetHeight` and the pad drifts.
+  height: var(--#{$prefix}signature-canvas-height);
 }
diff --git a/shared/ui/Signature.astro b/shared/ui/Signature.astro
index e9878f215..2b4801978 100644
--- a/shared/ui/Signature.astro
+++ b/shared/ui/Signature.astro
@@ -50,8 +50,6 @@ ${clearSnippet}
 		function resizeCanvas() {
         const ratio = Math.max(window.devicePixelRatio || 1, 1);
 
-		  console.log(canvas.offsetWidth, canvas.offsetHeight);
-
         canvas.width = canvas.offsetWidth * ratio;
         canvas.height = canvas.offsetHeight * ratio;
         canvas.getContext("2d").scale(ratio, ratio);
@@ -72,9 +70,9 @@ ${extraSnippet}
   {
     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">
+        <button type="button" class="btn btn-icon" id={`signature-${id}-clear`} title="Clear signature" data-bs-toggle="tooltip">
           <Icon name="trash" />{' '}
-        </div>
+        </button>
       </div>
     )
   }