Skip to content

prism-anycubic: add wide/horizontal layout for wide columns - #49

Open
Itstommy10 wants to merge 2 commits into
BangerTech:mainfrom
Itstommy10:feature/prism-anycubic-wide-layout
Open

prism-anycubic: add wide/horizontal layout for wide columns#49
Itstommy10 wants to merge 2 commits into
BangerTech:mainfrom
Itstommy10:feature/prism-anycubic-wide-layout

Conversation

@Itstommy10

@Itstommy10 Itstommy10 commented Jun 22, 2026

Copy link
Copy Markdown

Summary

Adds an optional wide / horizontal layout to the prism-anycubic card so it can occupy less vertical space and spread its elements horizontally when given a wide column (e.g. 24-column / wide Sections setups).

Changes

  • New Layout option (auto / wide / vertical) in Display Options. The wide layout is a CSS grid: printer visual on the left, with header, CFS, stats, progress, job-info and controls stacked in the right column.
  • auto switches to wide at ≥720px using a JS ResizeObserver (not a CSS container query) so it also works inside the card editor preview.
  • New Expand Sections column width option (column_max_width, px). HA Sections view caps each column at 500px via --ha-view-sections-column-max-width on the ancestor hui-section; the card walks up the DOM (crossing shadow roots) and raises that cap for its column so the wide layout can actually expand. The override is restored on disconnect.
  • Default behavior is unchanged (auto, no column override) — the standard vertical card renders identically.

Notes

  • All three file copies (custom-components/, dist/, www/custom-components/) plus both prism-dashboard.js bundles are kept in sync.
  • Verified with node --check and a runtime smoke test of render().

Itstommy10 and others added 2 commits June 22, 2026 16:00
…ancements

New prism-anycubic card for Anycubic Cloud printers, plus several display/UX improvements driven by real-world use.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- New "Layout" config (auto/wide/vertical): wide uses a CSS-grid layout
  with the printer visual on the left and header, CFS, stats, progress,
  job-info and controls stacked on the right — less vertical space, more
  horizontal spread.
- "auto" switches to wide at >=720px via a JS ResizeObserver (not a CSS
  container query) so it also works inside the card editor preview.
- New "Expand Sections column width" config: HA Sections columns are
  capped at 500px by --ha-view-sections-column-max-width on the ancestor
  hui-section; the card now walks up the DOM (crossing shadow roots) and
  raises that cap so the wide layout can actually expand.
- Kept all 3 file copies + both prism-dashboard.js bundles in sync.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant