Fix UI readability and clipping issues

Add page/sidebar background contrast, wrap action button rows,
ensure dark text in inputs, and improve timeline card highlight colors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

main.py

@@ -17,6 +17,16 @@ from tab_comfy_ng import render_comfy_monitor
 
 @ui.page('/')
 def index():
+    # -- Global styling for readability --
+    ui.query('body').classes('bg-grey-2')
+    ui.add_css('''
+        .q-expansion-item__content { padding: 4px 0; }
+        .action-row { flex-wrap: wrap !important; gap: 4px !important; }
+        .q-tab-panels { background: transparent !important; }
+        .q-textarea .q-field__native { color: #1a1a1a !important; }
+        .q-input .q-field__native { color: #1a1a1a !important; }
+    ''')
+
     config = load_config()
     state = AppState(
         config=config,
@@ -35,6 +45,7 @@ def index():
                 'text-subtitle1 q-pa-lg')
             return
 
+        with ui.card().classes('w-full q-pa-md'):
             ui.label(f'Editing: {state.file_path.name}').classes('text-h5 q-mb-md')
 
             with ui.tabs().classes('w-full') as tabs:
@@ -51,7 +62,7 @@ def index():
                     render_raw_editor(state)
 
         if state.show_comfy_monitor:
-            ui.separator()
+            with ui.card().classes('w-full q-pa-md q-mt-md'):
                 with ui.expansion('ComfyUI Monitor', icon='dns').classes('w-full'):
                     render_comfy_monitor(state)
 
@@ -77,7 +88,7 @@ def index():
     # ------------------------------------------------------------------
     # Sidebar (rendered AFTER helpers are attached)
     # ------------------------------------------------------------------
-    with ui.left_drawer().classes('q-pa-md').style('width: 350px'):
+    with ui.left_drawer().classes('q-pa-md bg-grey-1').style('width: 350px'):
         render_sidebar(state)
 
     # ------------------------------------------------------------------

tab_batch_ng.py

@@ -284,9 +284,10 @@ def _render_sequence_card(i, seq, batch_list, data, file_path, state,
     else:
         label = f'Sequence #{seq_num}'
 
-    with ui.expansion(label, icon='movie').classes('w-full'):
+    with ui.card().classes('w-full q-mb-sm'), \
+         ui.expansion(label, icon='movie').classes('w-full'):
         # --- Action row ---
-        with ui.row().classes('w-full q-gutter-sm'):
+        with ui.row().classes('w-full q-gutter-sm action-row'):
             # Copy from source
             def copy_source(idx=i, sn=seq_num):
                 item = DEFAULTS.copy()

tab_timeline_ng.py

@@ -92,8 +92,8 @@ def render_timeline_tab(state: AppState):
 
                 with ui.card().classes(
                     'w-full q-mb-sm' +
-                    (' bg-yellow-1' if is_head else '') +
-                    (' bg-red-1' if is_selected else '')
+                    (' bg-amber-2' if is_head else '') +
+                    (' bg-red-2' if is_selected else '')
                 ):
                     with ui.row().classes('w-full items-center'):
                         if selection_mode.value: