Update app.py

app.py

@@ -1244,22 +1244,57 @@ def show_main_app():
     .stSelectbox>div>div>div {
         border-radius: 10px;
         border: 1px solid #ced4da;
-        padding: 12px 15px; /* More padding */
+        padding: 0px 15px; /* Adjust padding significantly to let content control height */
         font-size: 1.05em;
-        color: #343a40;
         background-color: #fcfcfc;
         box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
+        overflow: hidden; /* Prevent text from escaping if it gets too big */
+        display: flex; /* Use flexbox for vertical alignment */
+        align-items: center; /* Vertically center content */
+        min-height: 48px; /* Ensure a minimum height for the selectbox */
     }
     .stSelectbox>label {
         font-weight: 600;
         color: #495057;
         margin-bottom: 0.6rem;
     }
-    /* FIX: Selectbox selected value text color */
+    /* FIX: Selectbox selected value text color and ensure it fits properly */
     .stSelectbox>div>div>div>input[type="text"] {
-        color: black !important;
+        color: black !important; /* Ensure the text is black */
+        flex-grow: 1; /* Allow the input to take available space */
+        min-height: 1.2em; /* Ensure text line has proper height */
+        line-height: 1.2em; /* Match line height to font size */
+        padding: 12px 0px; /* Add vertical padding directly to the input */
+        vertical-align: middle; /* Helps align text vertically */
+        background-color: transparent; /* Ensure input background is transparent */
+        border: none; /* Remove default input border */
+        outline: none; /* Remove outline on focus */
+    }
+
+    /* FIX: Dropdown arrow color and visibility */
+    /* Target the button containing the SVG icon for the dropdown */
+    [data-testid="stSelectbox"] button {
+        background-color: transparent !important; /* Ensure button background is transparent */
+        color: black !important; /* Fallback for any text in button */
+        border: none !important; /* Remove button border */
+        padding: 0 5px; /* Adjust padding around the arrow */
+        margin-left: auto; /* Push the arrow to the right */
+        display: flex; /* Use flex for centering if icon is inside */
+        align-items: center; /* Vertically center the icon */
+        cursor: pointer;
+    }
+    /* Target the SVG icon itself */
+    [data-testid="stSelectbox"] svg {
+        fill: black !important; /* Force the SVG icon to be black */
+        color: black !important; /* Fallback for some SVG types */
+        font-size: 1.2em; /* Adjust size if needed */
+    }
+    /* Specific path inside SVG might also need fill */
+    [data-testid="stSelectbox"] svg path {
+        fill: black !important;
     }
 
+
     /* File Uploader */
     [data-testid="stFileUploaderDropzone"] {
         border-radius: 12px; /* More rounded */
@@ -1268,23 +1303,37 @@ def show_main_app():
         padding: 25px; /* More padding */
         transition: border-color 0.3s ease, background-color 0.3s ease;
         margin-bottom: 1.5rem;
+        display: flex; /* Use flexbox to better control content layout */
+        flex-direction: column; /* Stack children vertically */
+        justify-content: center; /* Center content vertically */
+        align-items: center; /* Center content horizontally */
+        text-align: center; /* Ensure text alignment */
+        min-height: 120px; /* Ensure enough height for the dropzone */
     }
     [data-testid="stFileUploaderDropzone"]:hover {
         border-color: #5d6dbe; /* Highlight on hover */
         background-color: #f7f9fb;
     }
-    /* FIX: "Drag and drop file here" text color */
-    [data-testid="stFileUploaderDropzone"] span { /* Targeting span within dropzone */
-        color: black !important;
+    /* FIX: "Drag and drop file here" text color and visibility */
+    /* Target all common text elements within the dropzone and force black color */
+    [data-testid="stFileUploaderDropzone"] p,
+    [data-testid="stFileUploaderDropzone"] span,
+    [data-testid="stFileUploaderDropzone"] div { /* Target all divs too, more aggressive */
+        color: black !important; /* Force text to be black */
+        white-space: normal; /* Allow text to wrap if it's long */
+        word-break: break-word; /* Break long words to prevent horizontal overflow */
     }
 
-    /* Hide the redundant 'Drag and drop file here' text (your existing rule) */
-    /* This rule often hides the entire paragraph, so if you want to show
-       "Drag and drop file here" in black, you might need to remove this rule */
+    /* IMPORTANT: This rule hides the default "Drag and drop file here" text.
+       If you want that text to be visible (and black), you MUST REMOVE or COMMENT OUT this entire block.
+       Based on your previous request "when i highlight it it's visible otherwise not",
+       you want it visible, so I'm commenting it out.
+    */
     /* [data-testid="stFileUploaderDropzone"] p:first-child {
         display: none;
     } */
 
+
     [data-testid="stFileUploaderFileName"] {
         font-size: 0.95em;
         color: #495057;