all: migrate checkbox to mdc spec (connects #9166) #9549
+21
−58
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
Author
|
Noticed a bigger left-gap with checkboxes in tables 
|
There was a problem hiding this comment.
Pull request overview
This PR migrates checkbox components from Angular Material's legacy checkbox module to the MDC (Material Design Components) specification. The migration makes checkboxes larger with better padding and more responsive behavior, allowing removal of custom styling workarounds.
Changes:
- Updated Material module imports to use MDC checkbox instead of legacy checkbox
- Consolidated checkbox column width styling into global styles
- Restructured checkbox label markup to place text inside checkbox tags
- Removed redundant custom checkbox styling made unnecessary by MDC improvements
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/shared/material.module.ts | Switched from legacy checkbox import to MDC checkbox module |
| src/styles.scss | Added global styling for checkbox table columns (padding and width constraints) |
| src/app/users/users-table.scss | Removed local checkbox column width styling (moved to global) |
| src/app/surveys/surveys.component.scss | Removed local checkbox column width styling (moved to global) |
| src/app/resources/resources.scss | Removed local checkbox column width styling (moved to global) |
| src/app/courses/courses.scss | Removed local checkbox column width styling (moved to global) |
| src/app/tasks/tasks.scss | Updated CSS selector to target MDC checkbox class |
| src/app/users/users-archive/users-archive.component.html | Restructured checkbox with label text inside and improved button layout |
| src/app/users/users-achievements/users-achievements-update.component.html | Added specific class to checkbox for custom styling |
| src/app/users/users-achievements/users-achievements-update.scss | Renamed class selector and removed display property |
| src/app/shared/dialogs/dialogs-chat-share.component.html | Moved label text inside checkbox tag |
| src/app/chat/chat-sidebar/chat-sidebar.component.html | Moved label text inside checkbox tag |
| src/app/chat/chat-sidebar/chat-sidebar.scss | Removed redundant checkbox margin styling and empty lines |
| src/app/health/health-update.scss | Removed custom checkbox group styling made redundant by MDC |
| src/app/exams/exams-question.scss | Removed custom checkbox margin styling |
| src/app/exams/exams-add.component.html | Removed margin from checkbox label span |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Saby-Bishops
approved these changes
Jan 30, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Connects #9166
Migrate the checkbox component to mdc spec.
Initial observations: checkboxes are larger, better-padded and respond better to responsive screens more naturally. This makes some of our customizations redundant.
Places to test:
full conversation search.& sharing chat to community with noteallow team view