Skip to content

[PM-41829] Login Buttons Overlap Owner and Name Elements When Resizing Browser - #22418

Merged
jengstrom-bw merged 3 commits into
mainfrom
vault/pm-40548/login-buttons-overlap-owner-and-name-elements
Aug 17, 2026
Merged

[PM-41829] Login Buttons Overlap Owner and Name Elements When Resizing Browser#22418
jengstrom-bw merged 3 commits into
mainfrom
vault/pm-40548/login-buttons-overlap-owner-and-name-elements

Conversation

@jengstrom-bw

@jengstrom-bw jengstrom-bw commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-41829

📔 Objective

When shrinking the browser window, the login button elements overlap the Name and Owner elements. This PR fixes the column width when the quick copy actions are enabled.

📸 Screenshots

Screen.Recording.2026-08-13.at.2.06.14.PM.mov

@jengstrom-bw jengstrom-bw added ai-review-vnext Request a Claude code review using the vNext workflow t:bugfix Change Type - Bugfix labels Aug 13, 2026
@github-actions

github-actions Bot commented Aug 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

This bugfix replaces the inline ngClass width expression on the vault items options column header with an optionsColumnWidthClass() helper, widening the column to tw-w-48 when the per-field quick copy icons are shown and tw-w-32 for the combined copy menu, while preserving the existing tw-w-24 / tw-w-12 behavior when copy and launch actions are disabled. VaultCopyButtonsService is injected via inject() and combined with the PM40435_QuickCopyIconSetting flag, mirroring the pattern already established in vault-cipher-row.component.ts. Test providers were added to both specs that instantiate the component, and unit tests cover three of the four width branches. No security, correctness, or breaking-change concerns were identified.

Code Review Details

No findings met the confidence threshold for posting.

Notes considered and dropped as non-issues:

  • tw-w-48 (192px) accommodates the widest quick copy layout. item-copy-actions.component.html renders at most three icons in quick mode (login: username, password, TOTP); combined with the launch button, tw-gap-2 spacing, tw-pr-2, and the options menu button this lands exactly at 192px. Card is the only other type with quick icons and renders two.
  • The widened column also applies when the batch bar is enabled (tw-w-28 → tw-w-32/tw-w-48); this matches the prior precedence where the copy/launch branch won over the batch bar branch. The header cell hides its options button in batch bar mode, so the width only needs to fit the rows.
  • VaultCopyButtonsService is providedIn: "root" and injects GlobalStateProvider. Only two specs instantiate VaultItemsComponent (vault-items.component.spec.ts and individual-vault/vault.component.spec.ts) and both were given a mock provider.
  • Tailwind's web config scans ./src/**/*.{html,ts,mdx}, so the class literals returned from the helper are not purged.
  • optionsColumnWidthClass reads batchBarService?.enabled() internally rather than as a parameter. Signal reads inside a method invoked from the template remain tracked, matching the prior inline expression's behavior. The uncovered partials flagged by Codecov are the batchBarService branch of that fallback — low value to test.

@codecov

codecov Bot commented Aug 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 66.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 54.06%. Comparing base (11162eb) to head (6f46e9f).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...lt/components/vault-items/vault-items.component.ts 66.66% 0 Missing and 2 partials ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22418      +/-   ##
==========================================
- Coverage   54.07%   54.06%   -0.01%     
==========================================
  Files        4310     4310              
  Lines      136980   136986       +6     
  Branches    21636    21639       +3     
==========================================
  Hits        74067    74067              
- Misses      57518    57522       +4     
- Partials     5395     5397       +2

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jengstrom-bw
jengstrom-bw marked this pull request as ready for review August 14, 2026 15:20
@jengstrom-bw
jengstrom-bw requested a review from a team as a code owner August 14, 2026 15:20
@jengstrom-bw
jengstrom-bw requested a review from nikwithak August 14, 2026 15:20
@jengstrom-bw
jengstrom-bw merged commit 12c6e21 into main Aug 17, 2026
78 checks passed
@jengstrom-bw
jengstrom-bw deleted the vault/pm-40548/login-buttons-overlap-owner-and-name-elements branch August 17, 2026 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nick-livefront nick-livefront nick-livefront approved these changes
@nikwithak nikwithak Awaiting requested review from nikwithak nikwithak is a code owner automatically assigned from bitwarden/team-vault-dev

Assignees

No one assigned

Labels

ai-review-vnext Request a Claude code review using the vNext workflow t:bugfix Change Type - Bugfix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jengstrom-bw @nick-livefront