Erroneous space character is present solely between each icon of "Quick copy actions".
- 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
> 
### 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
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