From 632f8ca08e190b756c44a7f3ed9952176d050f58 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Tue, 9 Dec 2025 15:30:39 +0000
Subject: [PATCH] Add comprehensive CSS debugging and forced visibility
 properties
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/views/messages/index.html.erb | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb
index 96de30f..a287fc6 100644
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
@@ -164,16 +164,26 @@ $('#message_receiver_id').on('change', function() {
   var selectedText = $select.find('option:selected').text();
   var selectedValue = $select.val();
 
+  console.log('=== DROPDOWN DEBUG ===');
   console.log('Selected recipient:', selectedText);
   console.log('Selected value:', selectedValue);
-  console.log('Current display:', $select.css('color'));
-  console.log('Select element text:', $select.text());
   console.log('Selected index:', this.selectedIndex);
   console.log('Options count:', $select.find('option').length);
-
-  // Log the actual option that should be selected
   console.log('Option at selectedIndex:', $select.find('option')[this.selectedIndex].text);
 
+  // Check computed styles that might hide text
+  var computedStyle = window.getComputedStyle(this);
+  console.log('Font size:', computedStyle.fontSize);
+  console.log('Color:', computedStyle.color);
+  console.log('Background:', computedStyle.backgroundColor);
+  console.log('Text indent:', computedStyle.textIndent);
+  console.log('Overflow:', computedStyle.overflow);
+  console.log('Display:', computedStyle.display);
+  console.log('Visibility:', computedStyle.visibility);
+  console.log('Opacity:', computedStyle.opacity);
+  console.log('Width:', computedStyle.width);
+  console.log('Height:', computedStyle.height);
+
   // Try forcing the selected attribute
   $select.find('option').removeAttr('selected');
   $select.find('option:selected').attr('selected', 'selected');
@@ -331,13 +341,19 @@ $("#submit_button").click(function(event) {
     }
   }
 
-  /* Ensure dropdown displays selected value properly */
+  /* Force dropdown to display selected value */
   #message_receiver_id {
     color: #212529 !important;
     background-color: #fff !important;
     -webkit-appearance: menulist !important;
     -moz-appearance: menulist !important;
     appearance: menulist !important;
+    text-indent: 0 !important;
+    text-overflow: clip !important;
+    overflow: visible !important;
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem !important;
   }
 
   #message_receiver_id option {
@@ -354,4 +370,9 @@ $("#submit_button").click(function(event) {
     border-color: var(--rg-success);
     box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1);
   }
+
+  /* Debug: Add a colored border to see the element boundaries */
+  #message_receiver_id {
+    border: 2px solid red !important;
+  }
 </style>