Prevent webhook action buttons from shifting

[justusbunsi]

Before:
(Really) Long webhook URLs forced the corresponding action buttons to be relocated so that they are below the URL text. This breaks the UI.

Now:
The URL text will be truncated (https://my-really-long-...) if it would overflow the reserved space on the site. For accessibility the full URL is available for screen readers as title attribute and will be visible when hovering over the truncated text.

Screenshots in the comments below.

---

Fixes: #15443
Signed-off-by: Steven Kriegler 61625851+justusbunsi@users.noreply.github.com

[codecov-commenter]

Codecov Report

Merging #16087 (ba28840) into main (0393a57) will increase coverage by 1.25%.
The diff coverage is 49.02%.

@@            Coverage Diff             @@
##             main   #16087      +/-   ##
==========================================
+ Coverage   44.24%   45.49%   +1.25%     
==========================================
  Files         695      705      +10     
  Lines       82341    83167     +826     
==========================================
+ Hits        36429    37840    +1411     
+ Misses      40014    39262     -752     
- Partials     5898     6065     +167     

Impacted Files	Coverage Δ
cmd/generate.go	0.00% <0.00%> (ø)
cmd/hook.go	0.00% <0.00%> (ø)
models/action.go	47.12% <ø> (ø)
models/oauth2.go	28.00% <0.00%> (-1.17%)	⬇️
models/repo_archiver.go	0.00% <0.00%> (ø)
models/user.go	52.32% <ø> (-1.07%)	⬇️
modules/context/repo.go	52.99% <0.00%> (-0.30%)	⬇️
modules/generate/generate.go	0.00% <0.00%> (-16.00%)	⬇️
modules/git/error.go	50.00% <0.00%> (-4.24%)	⬇️
modules/git/last_commit_cache_nogogit.go	35.84% <0.00%> (+0.66%)	⬆️
... and 191 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 837e8b3...ba28840. Read the comment docs.

[techknowlogick]

Thanks for PR :) Could you add somescreenshots to show the differences?

[justusbunsi]

@techknowlogick Sure.

Before:

Now:

I tested different widths and think 90% fits most. 92% was too close to the action icons.

[justusbunsi]

Just realized that it's is not fully fixed. If you reduce the browser window size, the buttons will be relocated. I think, @media based widths should do the trick, right?
Should I convert this PR to draft until it's fixed?

[techknowlogick]

I've just set the WIP label so people will be sure not to merge or review.

[justusbunsi]

@techknowlogick Now the webhook url is properly truncated for all the supported @media sizes. I've noticed that it's duplicated style definition. Should I reduce these duplicated style definitions (I made) with a placeholder or something else?

[justusbunsi]

If this duplication is OK, you can remove the wip label.

[techknowlogick]

Awesome. I've removed the WIP label.

[silverwind]

I think this can probably be solved much more elegantly using CSS truncation via text-overflow: ellipsis and no media query fiddling like that. Can you try it?

[justusbunsi]

@silverwind I am using text-overflow: ellipsis. It's declared inside the css class truncate. As per MDN text-overflow: ellipsis only affects block elements or elements with specified width or max-width at itself or some parent element. Since the anchor element is no block element (and in this context not even via css) and no parent element has a width or max-width, I had to define a width for the anchor element. With that width it was not responsive without different values for different browser sizes.

Maybe I am overcomplicating this, but after testing this with a smaller browser size I was not happy with just one fixed width since it behave the same as mentioned in the issue.

[silverwind]

You can usually force block-level via display: inline-block or similar but sometimes the changes necessary can be a bit more far-reaching depending on the surrounding structure/CSS. I think such a solution is certainly preferrable instead of introducing a dependency on the site's media query breakpoints.

[justusbunsi]

Will try you suggestion.

[silverwind]

Here's some sample CSS that should get you somewhere:

.selector {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

May also require max-width: 100%. Also see https://stackoverflow.com/questions/17779293.

[justusbunsi]

@silverwind Now i got it. Without the media queries. 😃 Your hint with the parent element structure was gold. I solved it by adding truncated-item-container to the .item div parent element which makes it display: flex. Combining it with the .truncate (that includes your ellipsis snippet) at the anchor element and a small inline css to align the buttons horizontally instead of underneath each others, the end result looks like that:

which is pretty much the same as the media query approach. Except that text and buttons are a bit closer to each others.

[justusbunsi]

@silverwind This is ready for your feedback when you have time for it. 😉