Skip to content

Refactor Settings layout for improved readability and responsiveness#827

Open
Sartoric wants to merge 1 commit into
jniebuhr:masterfrom
Sartoric:feature/sartoric-settings-better-readible-layout
Open

Refactor Settings layout for improved readability and responsiveness#827
Sartoric wants to merge 1 commit into
jniebuhr:masterfrom
Sartoric:feature/sartoric-settings-better-readible-layout

Conversation

@Sartoric

@Sartoric Sartoric commented Jul 17, 2026

Copy link
Copy Markdown
Contributor
  • Adjusted section wrappers to include className='h-full' for consistent height styling.
  • Updated grid layouts to support two-column designs with lg:grid and lg:grid-cols-2.
  • Modified spacing and alignment for better responsiveness across tabs.
  • Fixed toolbar alignment in SystemTab and added visually flexible elements.

Summary by CodeRabbit

  • Style
    • Improved Settings page layouts with responsive two-column grids on larger screens.
    • Standardized section heights for better alignment across General, Calibration, Machine, and System tabs.
    • Reorganized Machine Settings and Temperature Settings for clearer navigation.
    • Refined Alba controls, including tank distance settings and layout.
    • Improved Storage & Memory and Maintenance & Support card presentation.

- Adjusted section wrappers to include `className='h-full'` for consistent height styling.
- Updated grid layouts to support two-column designs with `lg:grid` and `lg:grid-cols-2`.
- Modified spacing and alignment for better responsiveness across tabs.
- Fixed toolbar alignment in SystemTab and added visually flexible elements.
@cla-bot cla-bot Bot added the cla-signed label Jul 17, 2026
@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2df15121-3fbd-4aa8-b77e-c8cec399bec4

📥 Commits

Reviewing files that changed from the base of the PR and between 8a827ad and 692ea06.

📒 Files selected for processing (5)
  • web/src/pages/Settings/index.jsx
  • web/src/pages/Settings/tabs/CalibrationTab.jsx
  • web/src/pages/Settings/tabs/GeneralTab.jsx
  • web/src/pages/Settings/tabs/MachineTab.jsx
  • web/src/pages/Settings/tabs/SystemTab.jsx

📝 Walkthrough

Walkthrough

Settings form identification and responsive layouts are updated across Calibration, General, Machine, and System tabs. Machine temperature and Alba controls are reorganized, while several sections receive full-height styling.

Changes

Settings layout updates

Layer / File(s) Summary
Form and Calibration/General layouts
web/src/pages/Settings/index.jsx, web/src/pages/Settings/tabs/CalibrationTab.jsx, web/src/pages/Settings/tabs/GeneralTab.jsx
The settings form receives an ID, and Calibration and General tabs gain responsive grids and full-height sections.
Machine settings reorganization
web/src/pages/Settings/tabs/MachineTab.jsx
Machine settings use a responsive grid; temperature settings become a separate section, and Alba tank distance fields move within the Alba section.
System settings layout
web/src/pages/Settings/tabs/SystemTab.jsx
System sections gain full-height styling, storage switches to a single-column grid, update controls expand to full width, and the RSSI indicator markup is simplified.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

Suggested reviewers: jniebuhr

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: a Settings layout refactor focused on readability and responsiveness.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant