search

fleetdm / fleet

Open-source platform for IT, security, and infrastructure teams. (Linux, macOS, Chrome, Windows, cloud, data center)
https://fleetdm.com
Other
3.03k stars 419 forks source link

URL displayed in BYOD screen spills over on "Copy to Clipboard" icon #22485

Open harrisonravazzolo opened 2 weeks ago

harrisonravazzolo commented 2 weeks ago

Fleet version: 4.57

Web browser and operating system: MacOS, Chrome latest

💥  Actual behavior

~Looks like the padding just needs to be adjusted slightly.~

Screenshot 2024-09-27 at 2 06 21 PM

🧑‍💻  Steps to reproduce

Go to BYOD enroll a hosts

RachelElysia commented 1 week ago

Nice catch! @harrisonravazzolo - common practice we add the following tags for bugs like this ~frontend, #g-endpoint-ops, :release, and then ~released bug or ~unreleased bug. If you're unsure if its FE/BE or released/unreleased, feel free to leave the tags off and write a note in the description <3

RachelElysia commented 1 week ago

Please add your planning poker estimate with Zenhub @jacobshandling

jacobshandling commented 1 week ago

@RachelElysia I say 2 here because the positioning of those buttons is absolute, and the elements are overlapping, so not a simple padding adjustment. Another bug like this also had a lot of opportunity for cleanup and was more effort than estimated

RachelElysia commented 1 week ago

@RachelElysia / the design team

This highlights another design bug that we don't have a good way to indicate overflowed text in input fields. When testing the solution, I realized the text was perfectly cut off before the last character but no indication that the text continued.

Some AI suggestions:

To indicate scrollable text to the right in an input field, apps typically use a few key visual cues: Horizontal scroll bar: A thin horizontal scroll bar may appear at the bottom of the input field when the text extends beyond the visible area2. Text truncation: The visible text may be cut off on the right side, implying there's more content horizontally2. Fade effect: A subtle fade or gradient effect can be applied to the right edge of the visible text area, suggesting continuation. Ellipsis: An ellipsis (...) may be added at the end of the visible text to indicate more content. Right-aligned text: Setting the text alignment to right (RTL - right-to-left) can make the end of long text visible initially2. Auto-scrolling: As the user types and reaches the right edge, the text may automatically scroll left to make room for new content. Touch gestures: On mobile devices, apps may allow users to swipe horizontally within the text area to scroll.

<3 looking forward to prioritizing improvements from our design system

Jacob's input on this:

I chose to do it this way because it's how we do it for all the other URLs in sibling tabs of that modal, as well as enroll secrets and the API token field (though that one has larger padding, we might consider bringing into alignment with the others).

Any updates (ellipses, perhaps?) we would want to apply in at least all of these places.