title: Material Components input text field being cut off
body: <p>Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off<a href="https://i.stack.imgur.com/BKrUr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BKrUr.png" alt="enter image description here"></a></p>
  
  <p>index.html: </p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
     &lt;link rel="stylesheet" href="bundle.css"&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body class="mdc-typography"&gt;
      &lt;h1 class="mdc-typography--headline1"&gt;Big header&lt;/h1&gt;
      &lt;div class="mdc-text-field" data-mdc-auto-init="MDCTextField"&gt;
        &lt;input class="mdc-text-field__input" type="text" id="input"&gt;
        &lt;label for="input" class="mdc-floating-label"&gt;Input Label&lt;/label&gt;
        &lt;div class="mdc-line-ripple"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- at the bottom of the page --&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.scss:</p>
  
  <pre><code>@import "material-components-web/material-components-web";
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>import * as mdc from 'material-components-web'
  mdc.autoInit()
  </code></pre>
  
  <p>I have no other files pulling in. No other styles added. What could be happening?</p>