OSIT-AE-App-Svelte/conductor/launcher-ux-refinement.md

Plan: Launcher Config UX Refinement (Cohesion & Stability)

The goal of this plan is to address the visual "bouncing", layering overload, and the misplaced close button in the new Launcher configuration modal.

1. Dimensional Stability

• Problem: Switching tabs causes the modal to resize vertically and horizontally, leading to a "bouncing" feel.
• Solution:
  • Set a fixed height for the Launcher_cfg container (e.g., h-[750px]).
  • Use overflow-y-auto only for the right-hand content pane.
  • Ensure the sidebar has a stable width.

2. Visual Hierarchy & Layering

• Problem: Too many nested backgrounds (Page > Launcher > Modal > Inner Pane > Section Pane > Section Content).
• Solution:
  • Flatten the background of the main content pane.
  • Simplify Launcher_Cfg_Section.svelte:
    • Remove shadow-xl from individual sections.
    • Use subtler borders instead of strong "preset-outlined" colors.
    • Remove the secondary background (bg-white/5) from the section content area.
  • Standardize on a single, clean surface color for the right-hand pane.

3. The "Centered Close Button" Bug

• Problem: A close button is appearing in the middle of the screen.
• Investigation:
  • Check for absolute-positioned elements in Launcher_cfg.svelte or +layout.svelte.
  • Verify if Flowbite's Modal default close button is clashing with internal buttons.
• Solution:
  • Consolidate all "Close" actions.
  • Use the Modal's built-in top-right close button (if available) or a single, well-positioned button in the sidebar.

4. Implementation Steps

Step 1: Update Launcher_cfg.svelte

• Set stable dimensions: h-[750px] max-h-[90vh] w-[1000px] max-w-[95vw].
• Remove internal shadows and borders that conflict with the Modal container.
• Clean up the sidebar "Close" button.

Step 2: Update Launcher_cfg_section.svelte

• Simplify the styling to reduce visual clutter.
• Remove shadow-xl.
• Use consistent padding and margins.

Step 3: Update +layout.svelte

• Ensure the Modal is configured for a stable, large view without default padding issues.
• Verify the modal_cfg_open logic.

Step 4: Add Launcher_cfg_field.svelte (Helper)

• Implement a unified field helper to standardize Label/Description/Input layouts across all tabs.

5. Verification

• Toggle between all 7 tabs. Verify zero layout shift (height/width remains constant).
• Check appearance in Light and Dark modes.
• Verify "Technical Mode" transitions.