Fix table overflow issue on Chromium browsers

[Yashasewi]

Description

This PR fixes an issue where the table on the "Maintaining the Website Guide" page overflows due to the YouTube URL not wrapping on Chromium-based browsers. The issue was mentioned in this comment.

Steps to Reproduce

1. Open the "Maintaining the Website Guide" page on a Chromium-based browser (e.g., Google Chrome, DuckDuckGo, Brave) using a desktop or mobile device. here
2. Scroll down to the table section.

Expected Behavior

The table should display correctly, with the YouTube URLs wrapping to the next line if they exceed the table cell width.

Actual Behavior

On Chromium-based browsers, the YouTube URLs do not wrap, causing the table to overflow horizontally.

Screenshots

Before	After

Testing

• Tested on Google Chrome (Android)
• Tested on DuckDuckGo (Android)
• Tested on Brave (Android)
• Tested on Mozilla Firefox (Android) (has no effect)
• Tested on Safari (iOS) [If you have access to an iPhone, please confirm and check this box]

[netlify]

✅ Deploy Preview for codingtrain ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8c154fc
🔍 Latest deploy log	https://app.netlify.com/sites/codingtrain/deploys/664ce5a140cb8c00080ea353
😎 Deploy Preview	https://deploy-preview-1607--codingtrain.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dipamsen]

Are the before after images swapped? 😄

[Yashasewi]

Are the before after images swapped? 😄

Now it's looking good … 😂

[fturmel]

This is not working properly for all screen sizes:

Also table-layout:fixed makes all columns equal width, and that's not the optimal use of horizontal space with the type of content that ends up in these tables.

I would propose keeping the table auto layout and applying word breaks in td elements that are not the first column, since those tend to be single words. I think this is all we would need:

.td:not(:first-child) {
  word-break: break-word;
}

[Yashasewi]

@fturmel Thank you for the proposed solution. I agree that using table-layout:fixed is not the best approach here . Updated with new solution .

[fturmel]

Looks good to me, thanks!

[shiffman]

Amazing, thank you!!