browser

mirror of https://github.com/bitwarden/browser synced 2026-02-20 19:34:03 +00:00

Files

Alex 03340aee71 [PM-31163] stabilize table column widths with fixed layout (#18708 )

* 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

2026-02-17 20:31:08 -08:00