Update app.py

app.py

@@ -1241,17 +1241,16 @@ def show_main_app():
     }
 
     /* Selectbox (Dropdown) */
-    .stSelectbox>div>div>div {
+    /* Target the main container for the selectbox */
+    [data-testid="stSelectbox"] > div:first-child > div:first-child {
         border-radius: 10px;
         border: 1px solid #ced4da;
-        padding: 0px 15px; /* Adjust padding significantly to let content control height */
-        font-size: 1.05em;
         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 */
+        display: flex; /* Use flexbox for alignment of input and arrow */
+        align-items: center; /* Vertically center items */
+        min-height: 48px; /* Ensure a comfortable height */
+        padding: 0 10px; /* Horizontal padding, vertical padding on input */
     }
     .stSelectbox>label {
         font-weight: 600;
@@ -1259,35 +1258,37 @@ def show_main_app():
         margin-bottom: 0.6rem;
     }
     /* FIX: Selectbox selected value text color and ensure it fits properly */
-    .stSelectbox>div>div>div>input[type="text"] {
-        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 */
+    [data-testid="stSelectbox"] input[type="text"] {
+        color: black !important; /* Force text to be black */
+        flex-grow: 1; /* Allow input to take up most space */
+        padding: 12px 5px; /* Adjust vertical padding within the input */
+        font-size: 1.05em; /* Ensure consistent font size */
+        line-height: 1.2em; /* Ensure text line height */
+        min-height: 1.2em; /* Minimum height for text content */
+        background-color: transparent !important; /* Ensure no white overlay */
+        border: none !important; /* Remove any default input borders */
+        outline: none !important; /* Remove outline on focus */
+        box-shadow: none !important; /* Remove any default input shadow */
     }
 
     /* 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 */
+        padding: 0 5px; /* Small padding for the arrow */
         cursor: pointer;
+        display: flex; /* Flexbox to center the SVG inside the button */
+        align-items: center;
+        justify-content: center;
     }
     /* 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 */
+        font-size: 1.5em !important; /* Make the arrow a bit larger */
+        width: 1em !important; /* Ensure proper width */
+        height: 1em !important; /* Ensure proper height */
     }
     /* Specific path inside SVG might also need fill */
     [data-testid="stSelectbox"] svg path {
@@ -1309,20 +1310,33 @@ def show_main_app():
         align-items: center; /* Center content horizontally */
         text-align: center; /* Ensure text alignment */
         min-height: 120px; /* Ensure enough height for the dropzone */
+        overflow: hidden; /* Ensure content is clipped if it tries to escape */
     }
     [data-testid="stFileUploaderDropzone"]:hover {
         border-color: #5d6dbe; /* Highlight on hover */
         background-color: #f7f9fb;
     }
     /* FIX: "Drag and drop file here" text color and visibility */
-    /* Target all common text elements within the dropzone and force black color */
+    /* Target *any* text within the dropzone and force black color */
+    [data-testid="stFileUploaderDropzone"] *, /* Wildcard selector for any child */
     [data-testid="stFileUploaderDropzone"] p,
     [data-testid="stFileUploaderDropzone"] span,
-    [data-testid="stFileUploaderDropzone"] div { /* Target all divs too, more aggressive */
+    [data-testid="stFileUploaderDropzone"] div { 
         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 */
+        white-space: normal !important; /* Allow text to wrap if it's long */
+        word-break: break-word !important; /* Break long words to prevent horizontal overflow */
+        font-weight: normal !important; /* Ensure normal font weight */
+        opacity: 1 !important; /* Ensure full opacity */
+    }
+    /* If there's an internal 'div' specifically containing the main text */
+    [data-testid="stFileUploaderDropzone"] > div > div > div:nth-child(2) > div:first-child {
+        color: black !important;
     }
+    /* Target specifically the text that says "Limit XMB per file" if it's a sibling of an icon */
+    [data-testid="stFileUploaderDropzone"] > div > div > div > span {
+        color: black !important;
+    }
+
 
     /* 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.
@@ -1710,6 +1724,7 @@ Respond as DilBot with warmth, empathy, and understanding. Keep it conversationa
 
     st.markdown("---")
     st.markdown("<p class='footer-caption'>Built by Members of CSG Hackathon Team | Your data is stored privately and securely</p>", unsafe_allow_html=True)
+
 # Main app logic
 def main():
     if not st.session_state.authenticated: