[blog] Prevent horizontal scroll on blog posts (#35948)

docs/pages/blog/making-customizable-components.md

@@ -46,13 +46,15 @@ you can play around with it in [CodeSandbox](https://codesandbox.io/s/fast-http-
 ```css
 /* two classes are more specific than the default single class selector */
 .uglySwitch .MuiSwitch-thumb {
-  background-color: 'green';
+  background-color: green;
 }
+
 .uglySwitch .MuiTouchRipple-root {
-  border: 'solid red 2px';
+  border: 2px solid red;
 }
+
 .uglySwitch .MuiSwitch-track {
-  background-color: 'orange';
+  background-color: orange;
   opacity: 1;
 }
 ```
@@ -257,9 +259,9 @@ By adding this prop to the default filter panel, we can derive a customized pane
 ```jsx
 import { GridFilterPanel } from '@mui/x-data-grid';
 
-const CustomFilterPanel = (props) => (
-  <GridFilterPanel {...props} columnsSort="asc" />
-);
+function CustomFilterPanel(props) {
+  return <GridFilterPanel {...props} columnsSort="asc" />;
+}
 ```
 
 But this strategy of adding props to customize components is a bit verbose.

docs/pages/blog/v6-beta-pickers.md

@@ -1,12 +1,12 @@
 ---
 title: Date and Time Pickers revamped
 description: Check out the new features coming in v6 beta.
-date: 2022-12-20T00:00:00.000Z
+date: 2023-01-22T00:00:00.000Z
 authors: ['josefreitas']
 tags: ['MUI X', 'News']
 ---
 
-There's a lot of exciting news in [MUI X v6 beta](https://github.com/mui/mui-x/releases/v6.0.0-beta.0), but there's hardly anything comparable to the revamp we're delivering for the Date and Time Pickers.
+There's a lot of exciting news in [MUI X v6.0.0-beta.0](https://github.com/mui/mui-x/releases/v6.0.0-beta.0), but there's hardly anything comparable to the revamp we're delivering for the Date and Time Pickers.
 
 This is the result of our ongoing efforts to improve the usability and customizability of these components.
 We kept the best aspects of the previous versions, and we're fleshing out the package with a [new documentation](https://next.mui.com/x/react-date-pickers/getting-started/), major new features and one fundamental change: a new input type to replace the masked text fields.
@@ -19,7 +19,7 @@ The previous generation of pickers, whose text input is based on a [mask approac
 
 For example, watch what happens when we edit the month on this masked input:
 
-<video style="max-width:608px " autoplay muted loop playsinline >
+<video style="width: 608px;" autoplay muted loop playsinline>
   <source src="/static/blog/v6-beta-pickers/masked-input-bad-ux.mp4" type="video/mp4" />
 </video>
 
@@ -28,7 +28,7 @@ As you can notice, the day and year leak to the previous sections of the date, p
 In contrast, the new fields are specialized in editing date and time values.
 They recognize the values on the input (day, month, year, etc.) and respond accordingly.
 
-<video style="max-width:608px " autoplay muted loop playsinline >
+<video style="width: 608px;" autoplay muted loop playsinline>
   <source src="/static/blog/v6-beta-pickers/basic-date-field.mp4" type="video/mp4" />
 </video>
 
@@ -51,15 +51,16 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 
 ## Enhanced keyboard usability
 
-With the new Fields, the keyboard interaction is a first-class experience. Not only can you type the date as text, but you can also use arrow keys to navigate and edit date and time values.
+With the new Fields, the keyboard interaction is a first-class experience.
+Not only can you type the date as text, but you can also use arrow keys to navigate and edit date and time values.
 
-<video style="margin-bottom:5px; max-width:608px" autoplay muted loop playsinline >
+<video style="margin-bottom: 5px; width: 608px;" autoplay muted loop playsinline >
   <source src="/static/blog/v6-beta-pickers/date-field-navigation.mp4" type="video/mp4" />
 </video>
 
 Moreover, notice in the following example that as we increase the month, the component automatically watches for valid values throughout each piece of your date input, like you're navigating in a calendar.
 
-<video style="margin-bottom:5px; max-width:608px" autoplay muted loop playsinline >
+<video style="margin-bottom: 5px; width: 608px;" autoplay muted loop playsinline >
   <source src="/static/blog/v6-beta-pickers/smart-field.mp4" type="video/mp4" />
 </video>
 
@@ -80,14 +81,12 @@ Please, try it out for yourself in the live demo below.
 
 ### Fields roadmap
 
-The Fields are still in beta, and there are many improvements on the way. The following list describes some of the most notable features planned.
-
-- **[Smart pasting](https://github.com/mui/mui-x/issues/7253)**
+The Fields are still in beta, and there are many improvements on the way.
+The following list describes some of the most notable features planned.
 
+- **[Smart pasting](https://github.com/mui/mui-x/issues/7253)** \
   Date strings pasted in Fields will be parsed and matched with the sections of the date.
-
-- **[Support days of the week](https://github.com/mui/mui-x/issues/7254)**
-
+- **[Support days of the week](https://github.com/mui/mui-x/issues/7254)** \
   Users will be able to select a day in the week just like the can select a month.
 
 We'd love to hear your [feedback](https://github.com/mui/mui-x/issues/new/choose) to help us improve these components even further.
@@ -96,32 +95,24 @@ We'd love to hear your [feedback](https://github.com/mui/mui-x/issues/new/choose
 
 Now that you've seen what's fundamentally changed with the Pickers, let's briefly review some other noteworthy improvements.
 
-- **[Customization of layout and internal components](https://next.mui.com/x/react-date-pickers/custom-layout/)**
-
+- **[Customization of layout and internal components](https://next.mui.com/x/react-date-pickers/custom-layout/)** \
   Combining the concept of slots with the grid layout, you now can rearrange, extend, and customize most of the components used internally by the Pickers' views.
-
-- **Default render input**
-
+- **Default render input**\
   You don't need to provide the usual `TextField` on `renderInput` anymore unless you need it customized.
   In which case you can do it by:
 
   1. Customizing through props via `field` and `input` slots ([codebox example](https://codesandbox.io/s/customizing-fields-with-props-o66r1c?file=/demo.tsx)).
   2. Build a new field component using the Field's headless API (documentation coming soon).
   3. Use an entirely [custom text field](https://next.mui.com/x/react-date-pickers/date-picker/#custom-input-component) to suit your use case.
 
-- **Drag to edit**
-
+- **Drag to edit**\
   Editing a date range is even easier now with the new drag-and-drop interface. Change `start` and `end` dates at will.
-
-<video style="margin-bottom: 24px;" autoplay muted loop playsinline >
-  <source src="/static/blog/v6-beta-pickers/edit-drag.mp4" type="video/mp4" />
-</video>
-
-- **Range shortcuts** (available from v6.0.0-beta.1)
-
+  <video style="margin-bottom: 24px; max-height: 398px;" autoplay muted loop playsinline >
+    <source src="/static/blog/v6-beta-pickers/edit-drag.mp4" type="video/mp4" />
+  </video>
+- **Range shortcuts** (available from v6.0.0-beta.1)\
   Add quick and customizable shortcuts for your users. Choose to display them on the left, right, bottom or top.
-
-<img src="/static/blog/v6-beta-pickers/date-range-shortcuts.png" style="width: 692px; margin-bottom: 24px;" loading="lazy" alt="Date Range shortcuts." />
+  <img src="/static/blog/v6-beta-pickers/date-range-shortcuts.png" style="width: 692px; margin-bottom: 24px;" loading="lazy" alt="Date Range shortcuts." />
 
 ## Should we retire the masked inputs?
 

docs/src/modules/components/MarkdownElement.js

@@ -324,8 +324,9 @@ const Root = styled('div')(
     '& a code': {
       color: darken(lightTheme.palette.primary.main, 0.04),
     },
-    '& img, video': {
-      maxWidth: '100%',
+    '& img, & video': {
+      // Use !important so that inline style on <img> or <video> can't win.
+      maxWidth: '100% !important',
     },
     '& img': {
       // Avoid layout jump