[GH-ISSUE #745] Table overlapping div container #531

New issue

Closed

opened 2026-02-25 23:42:47 +03:00 by kerem · 4 comments

kerem commented

2026-02-25 23:42:47 +03:00

Owner

Originally created by @solracsf on GitHub (Dec 3, 2022).
Original GitHub issue: https://github.com/healthchecks/healthchecks/issues/745

See screenshot. As you can observe, table is bigger than parent div, resulting in overflow-y. v2.4.1
This can be observed when switching Ping URL to Slug and having pretty big URls (but not that big...) like:

https://health.examplers.com/ping/gBnsq5Q5c-PlRRh5ucCFRQ/205464390-badd3e02-0007-4b64-bb1f

Originally created by @solracsf on GitHub (Dec 3, 2022). Original GitHub issue: https://github.com/healthchecks/healthchecks/issues/745 See screenshot. As you can observe, `table` is bigger than parent `div`, resulting in `overflow-y`. v2.4.1 This can be observed when switching **Ping URL** to **Slug** and having pretty big URls (but not that big...) like: `https://health.examplers.com/ping/gBnsq5Q5c-PlRRh5ucCFRQ/205464390-badd3e02-0007-4b64-bb1f` ![image](https://user-images.githubusercontent.com/12234510/205464390-badd3e02-0007-4b64-bb1f-cebb4439814d.png)

kerem closed this issue

2026-02-25 23:42:47 +03:00

kerem commented

2026-02-25 23:42:47 +03:00

Author

Owner

@cuu508 commented on GitHub (Dec 14, 2022):

Thanks for the report.

This is a tricky one. One potential fix I'm considering is:

switching to table-layout: fixed
assigning hardcoded, fixed widths to all columns except "Name"
using text-overflow: ellipsis on the URL column

@cuu508 commented on GitHub (Dec 14, 2022): Thanks for the report. This is a tricky one. One potential fix I'm considering is: * switching to `table-layout: fixed` * assigning hardcoded, fixed widths to all columns except "Name" * using `text-overflow: ellipsis` on the URL column ![image](https://user-images.githubusercontent.com/661859/207627042-cfe91e17-a29c-49f5-aa46-b483d8a9c81b.png)

kerem commented

2026-02-25 23:42:47 +03:00

Author

Owner

@solracsf commented on GitHub (Dec 14, 2022):

Is it necessary to display the https://health.examplers.com/ping/ part?
Displaying only the uuid or slug but keep the copy action with full URI could be an option too.

Something like @ping/gBnsq5Q5c-PlRRh5ucCFRQ/zeojfio-zkej-akzjda-zkjef-skjhfebze

EDIT: after rethinking not a good option because it always depends on the length on the slug part; should it have a lot of chars, problem will remain...

@solracsf commented on GitHub (Dec 14, 2022): Is it necessary to display the `https://health.examplers.com/ping/` part? Displaying only the `uuid` or `slug` but keep the copy action with full URI could be an option too. Something like `@ping/gBnsq5Q5c-PlRRh5ucCFRQ/zeojfio-zkej-akzjda-zkjef-skjhfebze` _**EDIT**: after rethinking not a good option because it always depends on the length on the slug part; should it have a lot of chars, problem will remain..._

kerem commented

2026-02-25 23:42:47 +03:00

Author

Owner

@cuu508 commented on GitHub (Dec 14, 2022):

It's nice to show the full URL, if space allows:

the user can easily recognize it as an URL
the user can manually select and copy a full, functioning URL (or just a fragment, as is needed)

The difficulty is that slugs can be up to 100 characters long. And the https://health.examplers... part can be arbitrarily long. And there are different screen sizes and zoom levels. It's hard to know in advance what will fit and what will not.

I guess one way out is to allow the URL to wrap. It starts to look cluttered, but at least it's functional, the full URL is there:

@cuu508 commented on GitHub (Dec 14, 2022): It's nice to show the full URL, if space allows: * the user can easily recognize it as an URL * the user can manually select and copy a full, functioning URL (or just a fragment, as is needed) The difficulty is that slugs can be up to 100 characters long. And the `https://health.examplers...` part can be arbitrarily long. And there are different screen sizes and zoom levels. It's hard to know in advance what will fit and what will not. I guess one way out is to allow the URL to wrap. It starts to look cluttered, but at least it's functional, the full URL is there: ![image](https://user-images.githubusercontent.com/661859/207661194-2a44eaea-57e5-4325-a7e5-8f9e87dc01b9.png)

kerem commented

2026-02-25 23:42:47 +03:00

Author

Owner

@solracsf commented on GitHub (Dec 14, 2022):

Well, the URL is already wrapping on the details page so not a deal breaker IMO. 👍

@solracsf commented on GitHub (Dec 14, 2022): Well, the URL is already wrapping on the details page so not a deal breaker IMO. 👍 ![image](https://user-images.githubusercontent.com/12234510/207662568-6105d3ed-7081-4f68-ac01-4523dc8309c5.png)