fix(tables): wrap in table-container-inner

[caugner]

Summary

Fixes #9962.

Problem

Tables in blog articles were overflowing on sm/md/lg screens, because they were only wrapped in figure.table-container, but not in figure.table-container-inner (like the BCD table).

Solution

Wrap tables in figure.table-container > figure.table-container.inner.

---

Screenshots

Before	After

---

How did you test this change?

Ran yarn && yarn dev and opened http://localhost:3000/en-US/blog/vs-code-tips-tricks/#shortcuts_for_navigation locally (requires mdn/mdn-studio).

[caugner]

Unfortunately, the current approach would cause a regression for large tables:

Before

After

[caugner]

I think the solution might actually be to add a CSS class for these tables that DON'T have the nested table-container-inner:

Suggested change

	const figure = $(
	'<figure class="table-container"><figure class="table-container-inner"></figure>'
	);
	const figure = $(
	'<figure class="table-container"><figure class="table-container-inner"></figure>'
	);

Suggested change

	const figure = $(
	'<figure class="table-container"><figure class="table-container-inner"></figure>'
	);
	const figure = $('<figure class="table-container standalone"></figure>');

[ShubhamOulkar]

almost ready

👍 BCD table got its own scroll, all tables OK.

tested page :- http://localhost:3000/en-US/docs/Web/HTML/Element/input

[ShubhamOulkar]

Suggested change

	width: 100vw !important;
	width: 100% !important;

before	after

[ShubhamOulkar]

My personal opinion, don't need to overwrite width because .table-container width is 100% applying to all tables. And we don't need view port width. Remove it.

[ShubhamOulkar]

Mobile view needs following changes

Suggested change

	.bc-table-outer {
	.table-container{
	overflow-x: auto;
	}

mobile_issue.mp4

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.