Audit log#2860
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Can't repro locally, but this happened twice in CI so it's probably not a fluke. 
|
|
Yeah I tweaked to move the selected item popover over the header row. We lose the |
|
I've also removed the auto scroll on click, it's just if you use the arrow keys or the up/down within the popover. Less jumping around for the user. |
fakemonster
left a comment
fakemonster
left a comment
There was a problem hiding this comment.
couple visual issues that don't necessarily fall on a single line:
- the non-datepicker popovers (docs info, refresh interval picker, range picker) fall behind the header because it's sticky. you can add a higher z-index to them and get away with it but it's pretty screwy. better to lower the sticky header to z-10, and then add an
isolateclass to the entire table to put it in a different stacking context (so it doesn't cover the header, which i assume is the original purpose of the z-20) - this isn't exactly using a side modal, but z-index-wise, it needs some sort of... sidemodality. right now tooltips render behind the detail view
| className={cn( | ||
| state.isOpen && 'z-10 ring-2', | ||
| 'text-sans-md border-default hover:border-raise bg-default relative flex h-11 items-center rounded-l-md rounded-r-md border focus-within:ring-2 focus:z-10', | ||
| 'text-sans-md border-default hover:border-raise bg-default relative flex h-10 items-center rounded-l-md rounded-r-md border focus-within:ring-2 focus:z-10', |
There was a problem hiding this comment.
i'm starting to suspect there's a common visual component between ListBox and these pickers that could perhaps even do something a little more graceful with rounding. will think about this for a followup
There was a problem hiding this comment.
That'd be great, we're also repeating some of this in a few places that's more brittle than a shared class or component.
| transform: `translateY(${start - scrollMargin}px)`, | ||
| }} | ||
| > | ||
| <div |
There was a problem hiding this comment.
this really should be a button. i'd expect to hit space and not have my page scroll
| <Badge color="neutral">{log.operationId.split('_').join(' ')}</Badge> | ||
| </div> | ||
| <div className={cn('text-secondary', hideActorId && 'hidden')}> | ||
| {userId ? ( |
There was a problem hiding this comment.
user and silo ids feel like kind of a dead end. is there anything i can actually do with them?
There was a problem hiding this comment.
I'm lobbying to have these resolved in the API as silo and user names. Or an object that contains both.
| > | ||
| <div className="bg-raise border-secondary flex h-10 items-center justify-between border-b px-2"> | ||
| <div className="flex items-center"> | ||
| <button |
There was a problem hiding this comment.
it's a bit of a small nicety, but i like putting an autoFocus on the close button when there is one. webaim suggests this as a requirement for a11y, though that can get a little iffy when you're somewhere between a dialog and an "expanded view". my rule of thumb has generally been "if there's an X, just focus it". would be great to do the inverse too (refocus the source row on close)
4 participants
Copied from #2849, which I accidentally merged and couldn't reopen even after I fixed
main.Still very rough, but has been a helpful exercise in working through some of the design due to the sheer amount of information and differing layout from other pages.
!https://github.com/user-attachments/assets/84cbb9f6-d22b-4e64-9b1d-e39d74d22902
Stubbing out based on oxidecomputer/omicron#7339.
Uses Tanstack Virtual. On testing with > 500 lines without virtualisation it starts to get a bit chunky especially if you're interacting with the page (e.g. opening the row).
Hoping that silo name and actor display name can be plumbed through so those are hard-coded for now.
Still needs: