Fix input group icon sizing to match input height
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>
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user