[Layout][M] Refactor layout for grid-based components and better aesthetic

[amrutha97]

Preswald UI improvement ideas

The current layout in Preswald is functional but lacks usability and aesthetics. Components like Plotly charts and sliders behave awkwardly, leading to a subpar UX. The absence of a grid-based layout exacerbates the issue, making the UI feel cluttered and inconsistent. The goal is to create a UI that feels intentional, cohesive, and easy to navigate.

Quick Audit Focus

Identify low-effort, high-impact changes such as:

• Standardizing font weights, colors, and spacing.
• Improving component behavior and alignment.

---

Desired State

1. Structured Grid Layout

• Alignment & Spacing: Components can be optionally placed within a grid-based layout.
• Responsiveness: Grid system supports responsive resizing and maintains a clean, polished look.

2. Improved Plotly Interaction

• Smooth Behavior: Plotly charts should allow smooth zoom and pan behavior that aligns with user expectations.
• Predictable Interactions: Avoid disruptive scaling during viewport resizing or user interactions.

3. Better Component Sizing

• Adaptive Components: Sliders and other components should adapt to container sizes, avoiding unnecessary full-width spans.
• Visual Harmony: Consistent margins, paddings, and spacing create a unified UI.

---

Suggestions for Approach

1. Adopt a Grid System

• Libraries to Explore:
  • CSS Grid
  • Flexbox
  • React Grid Layout
• Implementation Goals:
  • Define breakpoints for responsiveness across devices.
  • Abstract grid logic into reusable layout utilities or components.

2. Fine-Tune Plotly Settings

• Configuration Options:
  • Optimize scrollZoom, displayModeBar, and dragMode for smoother interactions.
  • Set default axis ranges or disable autoscale for predictable behavior.
• Test Edge Cases:
  • Browser window resizing.
  • Smaller container embedding.

3. Refactor Component Sizing

• Dynamic Sizing:
  • Use container-based width calculations (e.g., percentage or max-width).
• Consistent Design System:
  • Standardize margins, paddings, and font sizes for a unified aesthetic.