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