[docs] Fix TOC-related styles not being applied when disableAd=true

[cherniavskii]

• I have followed (at least) the PR section of the contributing guide.

In MUI X I've noticed that some pages have horizontal scroll on smaller screens, for example:
https://mui.com/x/react-data-grid/state/

Screen.Recording.2022-05-11.at.11.43.40.mov

I've tracked this down to this:

material-ui/docs/src/modules/components/AppLayoutDocs.js

Lines 39 to 57 in 7028a34

	...(!disableAd && {
	'&& .description': {
	marginBottom: 198,
	},
	'&& .description.ad': {
	marginBottom: 40,
	},
	...(!disableToc && {
	[theme.breakpoints.up('sm')]: {
	width: `calc(100% - var(--MuiDocs-toc-width))`,
	},
	}),
	...(!disableToc && {
	[theme.breakpoints.up('lg')]: {
	paddingLeft: '60px',
	paddingRight: '60px',
	},
	}),
	}),

Here you can see that !disableToc styles are nested inside !disableAd styles, so they are not applied unless disableAd=false. The page in MUI X I've linked above has disableAd=true, and missing TOC-related style cause horizontal scroll.
This seems to be a regression from bf225c3 (#27150)

TOC-related styles should be applied regardless disableAd prop, so I've moved them one level up.

In core repo I've found only one page affected by this issue - https://mui.com/material-ui/discover-more/backers/.

Same page with the fix: https://deploy-preview-32733--material-ui.netlify.app/material-ui/discover-more/backers/.

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 269d82b

[cherniavskii]

Side note: It's still an open question if disableAd should be used on those pages in MUI X, but the root cause should be fixed anyway

UPDATE: we disable ads on all pages with paid features (Pro and Premium plans)

[oliviertassinari]

Great, I had this one on my to-do list of small wins with high ROI. I noticed the problem with this page: https://mui.com/x/react-data-grid/state/.

[siriwatknp]

👍