From 5b56203b33135db46058073e8ad20e64d52ca12d Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 03:19:20 -0500
Subject: [PATCH] Fix input group icon sizing to match input height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves icon height mismatch with form inputs.

Changes:
- Add explicit padding to input-group-text matching form-control
- Use flexbox (display: flex, align-items: center) for vertical centering
- Match padding for input-group-lg contexts (0.875rem 1.25rem)
- Set icon font-size to 1rem and line-height: 1 to prevent overflow
- Add min-width: 50px for consistent icon container size

Icons now align perfectly with input heights for a polished appearance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/pay/index.html.erb | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb
index cb05e51..08e1f29 100644
--- a/app/views/pay/index.html.erb
+++ b/app/views/pay/index.html.erb
@@ -538,6 +538,21 @@ $(document).on('turbolinks:load', function() {
     border-left: none;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     transition: all 0.2s ease;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+  }
+
+  .input-group-lg .input-group-text {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  .input-group-text i {
+    font-size: 1rem;
+    line-height: 1;
   }
 
   .input-group .form-control {