Make the "Fill" button bigger / larger / wider

Avi2023 · November 15, 2024, 4:15pm

Please enlarge the fill button in the Chrome extension

grb · November 15, 2024, 6:38pm

What version of the browser extension are you referring to? Is this the beta version with the redesigned UI (2024.11.999)?

Agus_Widi · December 19, 2024, 12:26pm

Can you make Fill button wider or larger. Too small for me.

Nail1684 · December 21, 2024, 11:27pm

@Agus_Widi Hi!

I guess, they are working on it.

Here you can see it will get a bit larger:

github.com/bitwarden/clients

[PM-16102] Add min width on interactive badges

main ← ds/pm-16102/badge-width

opened 07:26PM - 20 Dec 24 UTC

vleague2

+1 -1

## 🎟️ Tracking [PM-16102](https://bitwarden.atlassian.net/browse/PM-16102) … ## 📔 Objective This PR adds a min-width of 2.5rem to interactive badges -- `button` and `a` elements. This will make it easier to click a button that would otherwise have a smaller click box. ## 📸 Screenshots | Before | After | |--------|--------| | ![Screenshot 2024-12-20 at 2 23 00 PM](https://github.com/user-attachments/assets/8b830561-70d7-4b12-ac2d-d7f09ff8ce7c) | ![Screenshot 2024-12-20 at 2 25 45 PM](https://github.com/user-attachments/assets/388d26e3-1ec4-49a4-b396-119f011566e3) | ## ⏰ Reminders before review - Contributor guidelines followed - All formatters and local linters executed and passed - Written new unit and / or integration tests where applicable - Protected functional changes with optionality (feature flags) - Used internationalization (i18n) for all UI strings - CI builds passed - Communicated to DevOps any deployment requirements - Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team ## 🦮 Reviewer guidelines - 👍 (`:+1:`) or similar for great changes - 📝 (`:memo:`) or ℹ️ (`:information_source:`) for notes or general info - ❓ (`:question:`) for questions - 🤔 (`:thinking:`) or 💭 (`:thought_balloon:`) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion - 🎨 (`:art:`) for suggestions / improvements - ❌ (`:x:`) or ⚠️ (`:warning:`) for more significant problems or concerns needing attention - 🌱 (`:seedling:`) or ♻️ (`:recycle:`) for future improvements or indications of technical debt - ⛏ (`:pick:`) for minor or nitpick changes [PM-16102]: https://bitwarden.atlassian.net/browse/PM-16102?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

And here you can see the clickable area around it will get larger also:

github.com/bitwarden/clients

[PM-16102] Increase clickable area for bit-item actions

main ← ds/pm-16102/item-action-click-space

opened 08:48PM - 17 Dec 24 UTC

vleague2

+43 -25

## 🎟️ Tracking [PM-16102](https://bitwarden.atlassian.net/browse/PM-16102) … ## 📔 Objective This PR increases the clickable area for each trailing `bit-item` action button so that the buttons are more accessible. To do so, we had to make a modification to the `bit-badge` (`:before` does not work when you have `overflow:hidden`, so we needed to move that property to an interior layer of badge), which necessitated changing it from a directive to a component. This should not affect any usages of the badge. ## 📸 Screenshots Before: https://github.com/user-attachments/assets/a59e5f00-e3cf-46d2-97f7-5d896de51eb0 After: https://github.com/user-attachments/assets/91f0868d-32c6-48a6-a261-8e39278c5ad5 ## ⏰ Reminders before review - Contributor guidelines followed - All formatters and local linters executed and passed - Written new unit and / or integration tests where applicable - Protected functional changes with optionality (feature flags) - Used internationalization (i18n) for all UI strings - CI builds passed - Communicated to DevOps any deployment requirements - Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team ## 🦮 Reviewer guidelines - 👍 (`:+1:`) or similar for great changes - 📝 (`:memo:`) or ℹ️ (`:information_source:`) for notes or general info - ❓ (`:question:`) for questions - 🤔 (`:thinking:`) or 💭 (`:thought_balloon:`) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion - 🎨 (`:art:`) for suggestions / improvements - ❌ (`:x:`) or ⚠️ (`:warning:`) for more significant problems or concerns needing attention - 🌱 (`:seedling:`) or ♻️ (`:recycle:`) for future improvements or indications of technical debt - ⛏ (`:pick:`) for minor or nitpick changes [PM-16102]: https://bitwarden.atlassian.net/browse/PM-16102?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Besides that, here is an idea how the auto-fill button could be changed again: Usability issues (UX) in redesigned UI (2024.12.0) - #346 by Nail1684

PS: I guess, with the current “fill button”, mainly the (translated) language decides, how wide the fill button is. → Example: English → Fill / German → “Ausfüllen”. The German fill button is wider than the English fill button. (and I’m not sure, that is an ideal solution…)

Avi2023 · January 9, 2025, 10:33am

Yes,

I would suggest changing the small Fill button to “Edit”, and enabling clicking on all the login areas to fill, instead of poping-out the edit mode.

[Screenshot redacted by mod.]

grb · January 9, 2025, 5:05pm

You never answered what version of the browser extension you have installed. If you have an up-to-date installation (version 2024.12.4), then just go to Settings > Autofill and enable the fifth option (“Click items to autofill on Vault view”):

Nail1684 · May 5, 2025, 11:09am

@Avi2023 @grb I moved your posts into this Feature Request to the same topic.

Also, I changed the title slightly.
(before, it was “Please make “Fill” button bigger or wider.”)