Refine sidebar layout for Printer and Bed panels #1817

Closed
opened 2026-04-05 20:12:05 +02:00 by MrUnknownDE · 0 comments
Owner

Originally created by @kisslorand on 10/26/2025

Description

This PR refines the sidebar layout and visual consistency for the Printer and Bed sections, addressing misalignments, uneven spacing, and minor usability issues.
Both panels now share a dynamic, equal-width layout that scales consistently across DPI modes, improving overall visual balance, tooltip consistency, and behavioral parity between the two sections.

Changes

Printer section

  • Realigned Edit and Sync/Connection info icons for consistent horizontal and vertical placement.
  • Ensured proper centering of the printer image and combo box.
  • Normalized icon scaling and padding across DPI modes.
  • Reduced excessive empty space, increasing information density without adding clutter.
  • Improved dynamic sizing: the Printer panel now adapts to available width in the same way as the Bed panel, ensuring proportional layout balance.

Bed section

  • Reworked layout sizers to align the bed image and info (“i”) icon with the printer section.
  • Fixed horizontal offset of the plate image and ensured it remains centered.
  • Adjusted top and bottom margins for improved vertical symmetry relative to the printer panel.
  • Added tooltip for the “i” icon: Wiki: Bed types
  • Updated help link target to the OrcaSlicer wiki: https://github.com/SoftFever/OrcaSlicer/wiki/bed-types
  • Bed panel now uses the same adaptive layout behavior, distributing sidebar space evenly alongside the Printer panel.

Motivation

These refinements improve visual balance, scaling consistency, and responsiveness in the sidebar, ensuring that the Printer and Bed panels behave as a unified pair both aesthetically and structurally.
The updated layout also eliminates unnecessary whitespace in the Printer section, making better use of available space while preserving clarity and hierarchy.
The tooltip and wiki link further enhance usability and discoverability for new users.

Testing

  • Verified on Windows (125% and 150% scaling).
  • Checked alignment between printer and bed panels.
  • Confirmed tooltips and links function correctly.
  • Verified precise alignment and consistent vertical centering of the Edit and Connection icons relative to the printer image.
  • No regressions detected in filament or project panels.

UI Alignment Overview

Before

image image

https://github.com/user-attachments/assets/46d78871-f3fc-4e08-81a4-7bf9437f59ff

After

image image

https://github.com/user-attachments/assets/ca83afd6-afcc-4b93-8c1d-a247c8f65b54

*Originally created by @kisslorand on 10/26/2025* ## Description This PR refines the sidebar layout and visual consistency for the Printer and Bed sections, addressing misalignments, uneven spacing, and minor usability issues. Both panels now share a dynamic, equal-width layout that scales consistently across DPI modes, improving overall visual balance, tooltip consistency, and behavioral parity between the two sections. ## Changes ### Printer section - Realigned Edit and Sync/Connection info icons for consistent horizontal and vertical placement. - Ensured proper centering of the printer image and combo box. - Normalized icon scaling and padding across DPI modes. - Reduced excessive empty space, increasing information density without adding clutter. - Improved dynamic sizing: the Printer panel now adapts to available width in the same way as the Bed panel, ensuring proportional layout balance. ### Bed section - Reworked layout sizers to align the bed image and info (“i”) icon with the printer section. - Fixed horizontal offset of the plate image and ensured it remains centered. - Adjusted top and bottom margins for improved vertical symmetry relative to the printer panel. - Added tooltip for the “i” icon: `Wiki: Bed types` - Updated help link target to the OrcaSlicer wiki: [https://github.com/SoftFever/OrcaSlicer/wiki/bed-types](https://github.com/SoftFever/OrcaSlicer/wiki/bed-types?utm_source=chatgpt.com) - Bed panel now uses the same adaptive layout behavior, distributing sidebar space evenly alongside the Printer panel. ## Motivation These refinements improve visual balance, scaling consistency, and responsiveness in the sidebar, ensuring that the Printer and Bed panels behave as a unified pair both aesthetically and structurally. The updated layout also eliminates unnecessary whitespace in the Printer section, making better use of available space while preserving clarity and hierarchy. The tooltip and wiki link further enhance usability and discoverability for new users. ## Testing - Verified on Windows (125% and 150% scaling). - Checked alignment between printer and bed panels. - Confirmed tooltips and links function correctly. - Verified precise alignment and consistent vertical centering of the Edit and Connection icons relative to the printer image. - No regressions detected in filament or project panels. ## UI Alignment Overview ### Before <img width="398" height="196" alt="image" src="https://github.com/user-attachments/assets/2f59730c-4e6a-45be-8364-509d3a74fb9f" /> <img width="401" height="194" alt="image" src="https://github.com/user-attachments/assets/35345d1d-4f5c-4c10-a00d-6855128f5ab1" /> https://github.com/user-attachments/assets/46d78871-f3fc-4e08-81a4-7bf9437f59ff ### After <img width="401" height="200" alt="image" src="https://github.com/user-attachments/assets/474896d8-22b2-4d9b-a577-cf942c76594f" /> <img width="401" height="196" alt="image" src="https://github.com/user-attachments/assets/3a0c5dd3-2cbe-45d9-b7a8-a44660d920c2" /> https://github.com/user-attachments/assets/ca83afd6-afcc-4b93-8c1d-a247c8f65b54
Sign in to join this conversation.
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/OrcaSlicer#1817