bitwarden / bitwarden/clients

Erroneous space character is present solely between each icon of "Quick copy actions".

Open
#12,985 2 comments 1 reaction 0 assignees View on GitHub
browser bug
Dominant language
TypeScript
Stars
13.8k
Forks
2k
Avg merge
3d 9h
Merged PRs (30d)
397

Description

### Steps To Reproduce

1. Installed [`Fedora-KDE-Live-x86_64-41-1.4.iso`](https://download.fedoraproject.org/pub/fedora/linux/releases/41/Spins/x86_64/iso/Fedora-KDE-Live-x86_64-41-1.4.iso).

1. Installed [`google-noto-sans-mono-fonts-20240701-2.fc41.noarch.rpm`](https://fedora.pkgs.org/41/fedora-x86_64/google-noto-sans-mono-fonts-20240701-2.fc41.noarch.rpm.html#:~:text=Package%20filename-,google%2Dnoto%2Dsans%2Dmono%2Dfonts%2D20240701%2D2.fc41.noarch.rpm,-Package%20name%20%09google%2Dnoto%2Dsans%2Dmono%2Dfonts):

1. ~~~sh
#!/usr/bin/env sh
dnf info google-noto-sans-mono-fonts
~~~

1.

~~~YAML
Updating and loading repositories:
Repositories loaded.
Installed packages
Name : google-noto-sans-mono-fonts
Epoch : 0
Version : 20240701
Release : 2.fc41
Architecture : noarch
Installed size : 20.5 MiB
Source : google-noto-fonts-20240701-2.fc41.src.rpm
From repository : anaconda
Vendor : Fedora Project
~~~

1. Installed [`firefox-134.0.1-1.fc41.x86_64.rpm`](https://fedora.pkgs.org/41/fedora-updates-x86_64/firefox-134.0.1-1.fc41.x86_64.rpm.html#:~:text=Package%20filename-,firefox%2D134.0.1%2D1.fc41.x86_64.rpm,-Package%20name%20%09firefox).

1. Set the undermentioned preferences (in [`firefox 'about:config'`](about:config)), which *I* did via *[`about:preferences#general:~:text=Fonts`](about:preferences#general:~:text=Fonts)*, so this *is* officially supported by Mozilla:

- 1. ~~~sh
#!/usr/bin/env sh
firefox 'about:config#:~:text=browser.display.use_document_fonts'
~~~

1.

~~~JSONC
"browser.display.use_document_fonts": 0
~~~

- 1. ~~~sh
#!/usr/bin/env sh
firefox 'about:config#:~:text=font.name.monospace.x%2Dwestern'
~~~

1.

~~~JSONC
"font.name.monospace.x-western": "monospace"
~~~

Note that `fc-match monospace` returns `NotoSansMono-Regular.ttf: "Noto Sans Mono" "Regular"`, per the undermentioned (hence the aforementioned installation of `google-noto-sans-mono-fonts-20240701-2.fc41.noarch`):

1. ~~~sh
#!/usr/bin/env sh
fc-match monospace
~~~

1.

~~~YAML
NotoSansMono-Regular.ttf: "Noto Sans Mono" "Regular"
~~~

1. Installed [`bitwarden_password_manager-2024.12.4.xpi`](https://addons.mozilla.org/firefox/downloads/file/4410896/bitwarden_password_manager-2024.12.4.xpi).
1. Visited [`/popup/index.html#/appearance:~:text=Show%20quick%20copy%20actions%20on%20vault`](moz-extension://22a4d581-42b6-476f-b6de-3c7ca73c148d/popup/index.html#/appearance:~:text=Show%20quick%20copy%20actions%20on%20vault).
1. Enabled "Quick copy actions".

### Expected Result

There shouldn't be a space character between the icons. The icons that don't have one remain adequately padded regardless.

### Actual Result

As aforestated at [`community.bitwarden.com/t/76836/532#p-166311-button-spacing-is-inconsistent-1`](https://community.bitwarden.com/t/usability-issues-ux-in-redesigned-ui-2024-12-0/76836/532#p-166311-button-spacing-is-inconsistent-1:~:text=rather%20objectively%20nonsensical:-,Button%20spacing%20is%20inconsistent:,the%20affected%20buttons%E2%80%99%20invocation%20targets.,-Additionally%2C%20whilst%20%E2%80%9CFill):

> There’s a single Unicode space between the username, password, and TOTP generation clipboard duplication buttons, which aren’t present between the TOTP generation clipboard duplication and overflow buttons.
>
> This inconsistency reduces space available whilst providing no increase to the affected buttons’ invocation targets.

### Screenshots or Videos

> ![Image](https://github.com/user-attachments/assets/324a915a-5be1-41af-961b-617999ae3195)

### Additional Context

I presume that the reason that this was missed was that it's solely noticeable when utilizing a monospace font. However, because monospace fonts are more readable for those with dyslexia, [^1] this can't be remediated by advising users to merely not utilize monospace typefaces.

[^1]: Revision (no date) User Experience Stack Exchange. Available at: [`ux.stackexchange.com/revisions/48777/5`](https://ux.stackexchange.com/revisions/48777/5#:~:text=It%20has%20to%20be%20said%20that%20latter%20research%20has%20shown%20more%20marginal%20differences%2C%20and%20that%20in%20some%20cases%20(dyslexia%20or%20programming%20code%2C%20for%20example)%20monospaced%20typefaces%20increase%20readability.) (Accessed: 20 January 2025).

### Operating System

Linux

### Operating System Version

[`Fedora-KDE-Live-x86_64-41-1.4.iso`](https://download.fedoraproject.org/pub/fedora/linux/releases/41/Spins/x86_64/iso/Fedora-KDE-Live-x86_64-41-1.4.iso):

1. ~~~sh
#!/usr/bin/env sh
kinfo
~~~

1.

~~~YAML
Operating System: Fedora Linux 41
KDE Plasma Version: 6.2.5
KDE Frameworks Version: 6.10.0
Qt Version: 6.8.1
Kernel Version: 6.12.9-200.fc41.x86_64 (64-bit)
Graphics Platform: Wayland
~~~

### Web Browser

Firefox

### Browser Version

[`firefox-134.0.1-1.fc41.x86_64.rpm`](https://fedora.pkgs.org/41/fedora-updates-x86_64/firefox-134.0.1-1.fc41.x86_64.rpm.html#:~:text=Package%20filename-,firefox%2D134.0.1%2D1.fc41.x86_64.rpm,-Package%20name%20%09firefox):

1. ~~~sh
#!/usr/bin/env sh
dnf info firefox
~~~

1.

~~~YAML
Updating and loading repositories:
Repositories loaded.
Installed packages
Name : firefox
Epoch : 0
Version : 134.0.1
Release : 1.fc41
Architecture : x86_64
Installed size : 224.2 MiB
Source : firefox-134.0.1-1.fc41.src.rpm
From repository : @stored_transaction
Vendor : Fedora Project
~~~

### Build Version

> [`bitwarden_password_manager-2024.12.4.xpi`](https://addons.mozilla.org/firefox/downloads/file/4410896/bitwarden_password_manager-2024.12.4.xpi)

### Issue Tracking Info

- [x] I understand that work is tracked outside of Github. A PR will be linked to this issue should one be opened to address it, but Bitwarden doesn't use fields like "assigned", "milestone", or "project" to track progress.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in the browser extension popup at popup/index.html with Quick copy actions enabled, using a monospace font as described. Inspect the rendered action buttons and the related community discussion; done means the icons have consistent spacing without an extra character between the affected actions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.