openclaw - 💡(How to fix) Fix [Feature]: ultra widescreen support [1 participants]

Summary

Adopt ultrawide-aware layouts (max content width, multi-column, or side-panel patterns) instead of stretching forms and tables to fill the full viewport.

Problem to solve

• In forms, the label/input sits on the far left while the corresponding action buttons (Save, Cancel, etc.) sit on the far right edge of the screen — there's no visual line connecting them, so users lose track of which actions apply to which section.
• In tables, rows become so wide that scanning across a single row requires significant eye movement, and column relationships break down.
• Whitespace isn't being used, it's just being created by stretching — there's no information density benefit.

A better use of the extra horizontal space would be capping primary content at a comfortable reading width and placing secondary content (filters, metadata, related panels, action sidebars) alongside it, rather than scaling every section to fill the viewport.

Proposed solution

Adopt ultrawide-aware layout patterns:

• Cap main content containers at a sensible max-width (e.g., 1280–1600px) so reading lines stay manageable.
• For forms with side actions/metadata, use a two-column layout (primary form left, secondary panel right) instead of stretching the form across the whole viewport.
• For tables, either cap width or use the freed horizontal space for inline detail panels, filter sidebars, or expanded preview columns.
• Keep field labels, inputs, and their associated action buttons within the same visual column so the relationship is obvious.

Alternatives considered

• Manually resizing the browser window: works but defeats the point of an ultrawide and adds friction every session.
• Browser zoom: scales everything including fonts, doesn't fix the underlying layout problem.
• User-side CSS overrides (e.g., Stylus): possible but fragile and not a real fix.

Impact

Affected: Users on 21:9, 32:9, and other ultrawide displays (an increasingly common developer setup) Severity: Annoying — doesn't block workflows but consistently degrades the experience Frequency: Every interaction with forms and tables, which is most of the app Consequence: Eye strain, lost field-to-action association causing misclicks, slower scanning of tabular data, and a general perception that the product wasn't designed with wider displays in mind

Evidence/examples

• Any settings or configuration form at >2560px viewport: input on the far left, Save/Cancel buttons on the far right with hundreds of pixels of empty space between them.
• Any data table view: rows stretch full-width, making it hard to follow a single row across columns.
• Comparable apps that handle this well: GitHub (capped content width), Linear (side panels), Notion (centered max-width content), Figma (panels flanking the main canvas).

Additional information

• Should be a pure CSS/layout change — no API or data model changes needed.
• Worth considering a user preference toggle ("full width" vs "comfortable width") for users who prefer the current behavior.
• Backward compatibility: layout changes only, no impact on existing config keys, URLs, or APIs.