Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Truncate truncated descriptions even more #2404

Merged
merged 1 commit into from
Sep 11, 2024
Merged

Conversation

david-crespo
Copy link
Collaborator

@david-crespo david-crespo commented Aug 30, 2024

In the draft v10 release notes, description was cut off in my routes screenshot, but I was pretending I didn't notice. @benjaminleonard, however, could not so pretend. He said it was "bad." Touché.

rel-9-vpc-routes

So I thought, let's try using CSS's built in truncation on top of ours. The only reason we do that to begin with is so we can detect when we're truncating and add a tooltip on hover showing the full text. But combining the two works shockingly well. The reason it's a draft is I want to go and look at all the places we call Truncate and make sure they look good.

2024-08-30-truncate-works-what-the-f.mp4

Copy link

vercel bot commented Aug 30, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
console ✅ Ready (Inspect) Visit Preview Sep 11, 2024 9:24pm

@@ -48,7 +48,7 @@ export const vpcs: Json<Vpc[]> = [vpc, vpc2]
export const defaultRouter: Json<VpcRouter> = {
id: 'fc59fb4d-baad-44a8-b152-9a3c27ae8aa1',
name: 'mock-system-router',
description: 'a fake router',
description: 'Routes are automatically added to this router as VPC subnets are created',
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Match the real default description given to system routers

@david-crespo
Copy link
Collaborator Author

I went through all the usages cases and couldn't find any issues. One potential weirdness I found was if we're using the middle truncate position (which we only use in the file input), if something squishes the container, it will have two ellipses (the middle one and the CSS one on the end). But in a side modal form that can't happen because the width is fixed.

image

@david-crespo david-crespo merged commit 353b98d into main Sep 11, 2024
8 checks passed
@david-crespo david-crespo deleted the descriptional-ellipsis branch September 11, 2024 21:34
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Sep 16, 2024
oxidecomputer/console@7712765...ce242e7

* [ce242e77](oxidecomputer/console@ce242e77) bump API to latest, only doc comment changes
* [3fda42e3](oxidecomputer/console@3fda42e3) oxidecomputer/console#2446
* [a5c23616](oxidecomputer/console@a5c23616) oxidecomputer/console#2436
* [ca272336](oxidecomputer/console@ca272336) oxidecomputer/console#2445
* [22582e3c](oxidecomputer/console@22582e3c) oxidecomputer/console#2444
* [f9f0d157](oxidecomputer/console@f9f0d157) oxidecomputer/console#2443
* [be84c196](oxidecomputer/console@be84c196) oxidecomputer/console#2441
* [53e1da78](oxidecomputer/console@53e1da78) chore: just skip the flaky test in safari
* [3a66ca77](oxidecomputer/console@3a66ca77) bump a couple of dev deps I missed
* [ac67a4cf](oxidecomputer/console@ac67a4cf) bump omicron version to latest
* [63c604b4](oxidecomputer/console@63c604b4) oxidecomputer/console#2440
* [b4e2626b](oxidecomputer/console@b4e2626b) oxidecomputer/console#2439
* [cdecf4e6](oxidecomputer/console@cdecf4e6) oxidecomputer/console#2435
* [01d71c07](oxidecomputer/console@01d71c07) oxidecomputer/console#2432
* [353b98d6](oxidecomputer/console@353b98d6) oxidecomputer/console#2404
* [49d6d7d8](oxidecomputer/console@49d6d7d8) oxidecomputer/console#2433
* [9c532ce9](oxidecomputer/console@9c532ce9) chore: fix react duplicate key warning  on vpcs page
* [1892fc14](oxidecomputer/console@1892fc14) npm audit fix, bump msw
* [efc43be0](oxidecomputer/console@efc43be0) oxidecomputer/console#2422
* [f2cc79ee](oxidecomputer/console@f2cc79ee) oxidecomputer/console#2418
* [a0c29a53](oxidecomputer/console@a0c29a53) oxidecomputer/console#2427
* [a8fcdab9](oxidecomputer/console@a8fcdab9) oxidecomputer/console#2426
* [8ecb36ad](oxidecomputer/console@8ecb36ad) oxidecomputer/console#2425
* [93bcef9d](oxidecomputer/console@93bcef9d) oxidecomputer/console#2296
* [af42e704](oxidecomputer/console@af42e704) oxidecomputer/console#2421
* [4126f000](oxidecomputer/console@4126f000) oxidecomputer/console#2420
* [880cb8c4](oxidecomputer/console@880cb8c4) oxidecomputer/console#2415
* [c2909e7a](oxidecomputer/console@c2909e7a) oxidecomputer/console#2414
* [12fc862b](oxidecomputer/console@12fc862b) oxidecomputer/console#2412
* [169edeed](oxidecomputer/console@169edeed) remove unreachable sign in button in user dropdown
* [f042ad4b](oxidecomputer/console@f042ad4b) oxidecomputer/console#2409
* [c648c44c](oxidecomputer/console@c648c44c) oxidecomputer/console#2408
* [e8175d30](oxidecomputer/console@e8175d30) oxidecomputer/console#2405
* [bdb55b86](oxidecomputer/console@bdb55b86) chore: bump ts client generator version in api-diff
* [681355cd](oxidecomputer/console@681355cd) oxidecomputer/console#2396
* [286b8d28](oxidecomputer/console@286b8d28) oxidecomputer/console#2401
* [b2373359](oxidecomputer/console@b2373359) oxidecomputer/console#2400
* [267b9359](oxidecomputer/console@267b9359) oxidecomputer/console#2399
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Sep 16, 2024
oxidecomputer/console@7712765...ce242e7

* [ce242e77](oxidecomputer/console@ce242e77)
bump API to latest, only doc comment changes
* [3fda42e3](oxidecomputer/console@3fda42e3)
oxidecomputer/console#2446
* [a5c23616](oxidecomputer/console@a5c23616)
oxidecomputer/console#2436
* [ca272336](oxidecomputer/console@ca272336)
oxidecomputer/console#2445
* [22582e3c](oxidecomputer/console@22582e3c)
oxidecomputer/console#2444
* [f9f0d157](oxidecomputer/console@f9f0d157)
oxidecomputer/console#2443
* [be84c196](oxidecomputer/console@be84c196)
oxidecomputer/console#2441
* [53e1da78](oxidecomputer/console@53e1da78)
chore: just skip the flaky test in safari
* [3a66ca77](oxidecomputer/console@3a66ca77)
bump a couple of dev deps I missed
* [ac67a4cf](oxidecomputer/console@ac67a4cf)
bump omicron version to latest
* [63c604b4](oxidecomputer/console@63c604b4)
oxidecomputer/console#2440
* [b4e2626b](oxidecomputer/console@b4e2626b)
oxidecomputer/console#2439
* [cdecf4e6](oxidecomputer/console@cdecf4e6)
oxidecomputer/console#2435
* [01d71c07](oxidecomputer/console@01d71c07)
oxidecomputer/console#2432
* [353b98d6](oxidecomputer/console@353b98d6)
oxidecomputer/console#2404
* [49d6d7d8](oxidecomputer/console@49d6d7d8)
oxidecomputer/console#2433
* [9c532ce9](oxidecomputer/console@9c532ce9)
chore: fix react duplicate key warning on vpcs page
* [1892fc14](oxidecomputer/console@1892fc14)
npm audit fix, bump msw
* [efc43be0](oxidecomputer/console@efc43be0)
oxidecomputer/console#2422
* [f2cc79ee](oxidecomputer/console@f2cc79ee)
oxidecomputer/console#2418
* [a0c29a53](oxidecomputer/console@a0c29a53)
oxidecomputer/console#2427
* [a8fcdab9](oxidecomputer/console@a8fcdab9)
oxidecomputer/console#2426
* [8ecb36ad](oxidecomputer/console@8ecb36ad)
oxidecomputer/console#2425
* [93bcef9d](oxidecomputer/console@93bcef9d)
oxidecomputer/console#2296
* [af42e704](oxidecomputer/console@af42e704)
oxidecomputer/console#2421
* [4126f000](oxidecomputer/console@4126f000)
oxidecomputer/console#2420
* [880cb8c4](oxidecomputer/console@880cb8c4)
oxidecomputer/console#2415
* [c2909e7a](oxidecomputer/console@c2909e7a)
oxidecomputer/console#2414
* [12fc862b](oxidecomputer/console@12fc862b)
oxidecomputer/console#2412
* [169edeed](oxidecomputer/console@169edeed)
remove unreachable sign in button in user dropdown
* [f042ad4b](oxidecomputer/console@f042ad4b)
oxidecomputer/console#2409
* [c648c44c](oxidecomputer/console@c648c44c)
oxidecomputer/console#2408
* [e8175d30](oxidecomputer/console@e8175d30)
oxidecomputer/console#2405
* [bdb55b86](oxidecomputer/console@bdb55b86)
chore: bump ts client generator version in api-diff
* [681355cd](oxidecomputer/console@681355cd)
oxidecomputer/console#2396
* [286b8d28](oxidecomputer/console@286b8d28)
oxidecomputer/console#2401
* [b2373359](oxidecomputer/console@b2373359)
oxidecomputer/console#2400
* [267b9359](oxidecomputer/console@267b9359)
oxidecomputer/console#2399
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant