mirror of
https://github.com/bitwarden/browser
synced 2026-02-20 19:34:03 +00:00
03340aee71
* stabilize table column widths with fixed layout (PM-31163)
Add layout="fixed" and explicit width classes to report tables to prevent
column widths from shifting during virtual scroll.
Files changed:
- weak-passwords-report.component.html
- reused-passwords-report.component.html
- exposed-passwords-report.component.html
- inactive-two-factor-report.component.html
- unsecured-websites-report.component.html
* use auto width for name column to fix width calculation (PM-31163)
Remove tw-w-1/2 from name column headers. With layout="fixed", the
explicit percentages didn't sum to 100%, causing inconsistent column widths.
Before: | 48px | 50% | 25% | 25% | = 48px + 100% (overflow)
After: | 48px | auto | 25% | 25% | = columns sum correctly
Name column now uses auto to fill remaining space.
* render headers in Admin Console to fix column widths (PM-31163)
Admin Console reports had a very wide icon column because no headers were
rendered. Without headers, table-layout: fixed uses data row content to
determine column widths, causing inconsistent sizing.
Root cause:
Three reports had their entire <ng-container header> block inside
@if (!isAdminConsoleActive), so when isAdminConsoleActive=true (Admin
Console), no headers were rendered at all.
Before (broken):
@if (!isAdminConsoleActive) {
<ng-container header> <!-- Entire header skipped in Admin Console -->
<th>Icon</th>
<th>Name</th>
<th>Owner</th>
</ng-container>
}
After (fixed):
<ng-container header> <!-- Always render headers -->
<th>Icon</th>
<th>Name</th>
@if (!isAdminConsoleActive) {
<th>Owner</th> <!-- Only Owner is conditional -->
}
</ng-container>
This matches the pattern already used by weak-passwords-report and
exposed-passwords-report, which were working correctly.
Files changed:
- unsecured-websites-report.component.html
- reused-passwords-report.component.html
- inactive-two-factor-report.component.html
Result:
- Admin Console now renders headers with correct column widths
- Icon column is 48px (tw-w-12) as expected
- Owner column properly hidden in Admin Console view
* truncate long item names to prevent column overflow
- you can hover cursor for tooltip to see full name
Bitwarden Web App
The Bitwarden web project is an Angular application that powers the web vault (https://vault.bitwarden.com/).
Documentation
Please refer to the Web vault section of the Contributing Documentation for build instructions, recommended tooling, code style tips, and lots of other great information to get you started.