<p dir="auto">Basically most times I want to make a dialog that instead of having a defined size takes all the available size (up to maxSize=xs/md...) instead of adapting to the content size. To do this I had to make my own style around it:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { default as Dialog, DialogProps } from 'material-ui/Dialog';
import withStyles from 'material-ui/styles/withStyles';
import * as React from 'react';

export const FullWidthDialog = withStyles&lt;DialogProps&gt;(
  {
    paper: {
      width: '100%'
    }
  }
)(
  (props: DialogProps) =&gt; {
    const { children, ...others } = props;
    return (
      &lt;Dialog
        {...others}
      &gt;
        {children}
      &lt;/Dialog&gt;
    );
  }
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">default</span> <span class="pl-k">as</span> <span class="pl-v">Dialog</span><span class="pl-kos">,</span> <span class="pl-v">DialogProps</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/Dialog'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">withStyles</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles/withStyles'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-v">FullWidthDialog</span> <span class="pl-c1">=</span> <span class="pl-s1">withStyles</span><span class="pl-c1">&lt;</span><span class="pl-v">DialogProps</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
  <span class="pl-kos">{</span>
    <span class="pl-c1">paper</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">width</span>: <span class="pl-s">'100%'</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">)</span><span class="pl-kos">(</span>
  <span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-v">DialogProps</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children<span class="pl-kos">,</span> ...<span class="pl-s1">others</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Dialog</span>
        <span class="pl-kos">{</span>...<span class="pl-s1">others</span><span class="pl-kos">}</span>
      <span class="pl-c1">&gt;</span>
        <span class="pl-kos">{</span><span class="pl-s1">children</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Dialog</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Would it be sensible to add a "fullWidth" to the dialog property that does that for you?</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">N/A</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">N/A</p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">See the description above</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>latest beta</td>
</tr>
<tr>
<td>React</td>
<td>15</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 61</td>
</tr>
<tr>
<td>TS</td>
<td>2.5.2</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The popover should show a default animation when it pops in.</p>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The popover animation is not showing a default animation when it pops in.</p>

<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Open a popover using <code class="notranslate">open={true}</code></li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto">Just fyi, the animation appears to be working with v0.18.7</p>
    
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.19.0</td>
</tr>
<tr>
<td>React</td>
<td>15.4.2</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>