Reduced padding from 0.85rem to 0.5rem and adjusted line-height from 1.6 to 1.5
to prevent text from being cut off at the bottom of the dropdown selector. Also
added option styling to ensure consistent spacing throughout the dropdown.
The excessive padding was causing the text to be vertically centered in a way
that cut off descenders. The new values provide clean text rendering without cutoff.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added !important to all dropdown height/padding CSS rules to ensure
they override any conflicting Bootstrap or global styles:
- min-height: 52px !important
- line-height: 1.6 !important
- padding: 0.85rem 0.75rem !important
- vertical-align: middle !important
- box-sizing: border-box !important
This forces the styles to apply and prevent text cutoff.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased vertical spacing to ensure recipient names display fully:
- min-height: 48px → 52px
- line-height: 1.5 → 1.6
- padding: 0.75rem → 0.85rem
- Added vertical-align: middle
This provides more breathing room for text to prevent any cutoff
at the bottom of the dropdown field.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added CSS to ensure proper height and padding:
- min-height: 48px (provides enough vertical space)
- line-height: 1.5 (proper text spacing)
- padding: 0.75rem (matches Bootstrap form-control-lg)
This prevents the selected recipient name from being cut off
at the bottom of the dropdown field.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The custom JavaScript was actually interfering with normal browser
behavior. The hide().show() and attribute manipulation was causing
the dropdown to reset visually after selection.
Changes:
- Removed all custom dropdown change event handlers
- Removed all debugging console logs
- Removed excessive !important CSS rules
- Removed debug red border
- Kept only the simple focus styling
Now using native browser select behavior with Bootstrap form-control
styling, which should work correctly out of the box.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Bootstrap 5's form-select class may have rendering issues.
Switched to form-control which has simpler styling and should
display the selected text properly.
Also explicitly added ID attribute to ensure JavaScript targets
the correct element.
Added additional debugging for:
- Font family
- Transform
- Position
- Z-index
- Padding
- Inner text/HTML of selected option
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added extensive CSS properties to force text visibility:
- Explicit text-indent: 0
- Overflow: visible
- Font-size and line-height
- Proper padding
- Red border for visual debugging
Added comprehensive JavaScript logging of computed styles:
- Font size, color, background
- Text indent, overflow
- Display, visibility, opacity
- Width and height
This will help identify which CSS property is hiding the selected text.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added extensive console logging to diagnose why selected value
isn't displaying in the dropdown:
- Select element's full text content
- Selected index position
- Total options count
- Option text at selected index
- Explicitly setting 'selected' attribute on options
This will help identify whether the issue is with:
- Option selection not being applied
- Visual rendering despite correct selection
- Bootstrap form-select interference
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added enhanced CSS with !important rules and explicit appearance properties
to ensure the dropdown properly displays the selected recipient name.
Changes:
- Added explicit appearance properties for proper browser rendering
- Added !important to color and background-color rules
- Added styling for option:checked state
- Enhanced JavaScript debugging with value and color logging
- Added hide/show to force visual re-render
The console logs now show:
- Selected recipient name
- Selected value
- Current color CSS property
This should help diagnose and fix the visual display issue.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
1. Removed broken Travis CI build status badge from README header
2. Enhanced dropdown selection on messages page:
- Added explicit JavaScript change event handler
- Added CSS to ensure proper text color and background
- Added blur/focus to force visual update after selection
- Added console logging for debugging
This should resolve the issue where selected recipient names weren't
displaying properly in the dropdown after selection.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added prompt option "Select a recipient..." to the To dropdown on
the messages page. This provides a clear placeholder and makes the
selected user's name visible after selection.
Before: Dropdown showed no placeholder, making it unclear what was selected
After: Shows "Select a recipient..." by default, then displays the
selected user's name when a recipient is chosen
Fixes the issue where clicking a user in the dropdown didn't show
their name in the dropdown field.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete redesign of the messaging interface with modern layout:
Inbox improvements:
- Replace table with modern message cards
- Each message shows circular gradient avatar with person icon
- Display sender name prominently with formatted date
- Show full message text with proper line wrapping
- Add Details and Delete action buttons with icons
- Hover effect highlights each message
- Beautiful empty state with inbox icon when no messages
Send Message form:
- Relocate to right sidebar with sticky positioning
- Add green gradient header with send icon
- Style as modern card with left border accent
- Large form controls with icons for better UX
- Recipient selector with all users
- Expandable textarea for message composition
- Full-width send button in success green
- Helpful tip box below form
- Modern Bootstrap 5 alerts with icons for success/error
- Auto-reload page after successful send to show new message
Layout enhancements:
- Two-column responsive layout (8/4 split)
- Inbox on left, compose on right
- Sticky compose form stays visible while scrolling
- Mobile-friendly with stacked layout on small screens
- Replace all Bootstrap 2 classes (row-fluid, span12, widget)
- Modern Bootstrap 5 grid and components
- Turbolinks compatibility
The page now provides a clean, modern messaging experience similar
to contemporary email/messaging applications.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Ken Johnson