Fix styling of ColorPicker examples in RAC docs (#6287)

Author: devongovett

packages/react-aria-components/docs/ColorArea.mdx

@@ -64,6 +64,7 @@ import {ColorArea, ColorThumb} from 'react-aria-components';
   width: 192px;
   height: 192px;
   border-radius: 4px;
+  flex-shrink: 0;
 }
 
 .react-aria-ColorThumb {

packages/react-aria-components/docs/ColorPicker.mdx

@@ -67,7 +67,6 @@ import {MyColorField} from './ColorField';
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 
 ```css hidden
-@import "@react-aria/example-theme";
 @import './Button.mdx' layer(button);
 @import "./ColorArea.mdx" layer(colorarea);
 @import "./ColorSlider.mdx" layer(colorslider);
@@ -81,6 +80,8 @@ import {MyColorField} from './ColorField';
 ```
 
 ```css
+@import "@react-aria/example-theme";
+
 .color-picker {
   background: none;
   border: none;
@@ -90,6 +91,10 @@ import {MyColorField} from './ColorField';
   gap: 8px;
   outline: none;
   border-radius: 4px;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 1rem;
+  color: var(--text-color);
 
   &[data-focus-visible] {
     outline: 2px solid var(--focus-ring-color);
@@ -104,6 +109,9 @@ import {MyColorField} from './ColorField';
   flex-direction: column;
   gap: 8px;
   min-width: 192px;
+  max-height: inherit;
+  box-sizing: border-box;
+  overflow: auto;
 }
 ```
 

packages/react-aria-components/docs/Dialog.mdx

@@ -85,6 +85,9 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
 .react-aria-Dialog {
   outline: none;
   padding: 30px;
+  max-height: inherit;
+  box-sizing: border-box;
+  overflow: auto;
 
   .react-aria-Heading[slot=title] {
     line-height: 1em;

packages/react-aria-components/docs/Popover.mdx

@@ -89,7 +89,6 @@ import {DialogTrigger, Popover, Dialog, Button, OverlayArrow, Heading, Switch} f
   color: var(--text-color);
   outline: none;
   max-width: 250px;
-  box-sizing: border-box;
 
   .react-aria-OverlayArrow svg {
     display: block;