fix: keep KEP detail card columns balanced

[TusharChauhan09]

Fixes uneven column widths in the KEP detail metadata card. Closes: #837

The KEP metadata banner uses a two-column CSS grid, but long content in the "Related Enhancements" section could influence the intrinsic size of the first column. As a result, the Implementation History column expanded while the Ownership column became noticeably narrower, making the card look unbalanced on desktop and medium-sized screens.

CSS only, scoped to .kep-page in assets/scss/_kep_page.scss. No markup or content changes.

Changes:

• Use minmax(0, 1fr) for the metadata banner grid so both columns share the available width evenly.
• Allow banner columns to shrink correctly by adding min-width: 0.
• Allow long Related Enhancement links to wrap naturally using overflow-wrap: anywhere.
• Replace the flex layout for Related Enhancement links with a block layout so wrapped links no longer affect the column width calculation.
• Keep the leading icon aligned by replacing flex-shrink with a right margin.

Verified locally with the pinned Hugo v0.144.2 (make container-server). The KEP pages build successfully and the metadata banner maintains balanced columns.

• Deploy preview :
  https://deploy-preview-838--kubernetes-contributor.netlify.app/resources/keps/6060/

Before

After

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: TusharChauhan09 / name: TusharChauhan09 (a422f0f)

[kubernetes-prow]

Welcome @TusharChauhan09!

It looks like this is your first PR to kubernetes/contributor-site 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/contributor-site has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[kubernetes-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: TusharChauhan09
Once this PR has been reviewed and has the lgtm label, please assign natalisucks for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[TineoC]

is possible to fix it keeping the flex display?

[TusharChauhan09]

Yeah, kept display: flex on the link items and fixed the alignment with some other flex properties instead. Pushed the latest commits, let me know if it looks good now

[TusharChauhan09]

found one more issue - long URLs were still overflowing with display : flex. So I kept it like you asked, just wrapped the URL text in a span so it could actually shrink and wrap

[kubernetes-prow]

PR needs rebase.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.