Polymer 1.0: How to stop <paper-menu-item>s from wrapping their text?

Code sample

http://jsbin.com/vudulonaka/1/edit?html,output

Click the menu button on this JSBin. Notice how the text wraps. I want to:

eliminate the text wrapping and
make the menu items expand their widths to match the width of the text inside.
This might necessitate forcing the menu to expand from right to left since the button is right justified in the toolbar.

How would I do that? Please provide working JSBin code example.

Code

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz">
  <link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
  <template>
    <style>
    </style>
        <paper-header-panel class="flex">
            <paper-toolbar>
                <span class="flex"></span>
                <paper-menu-button>
                    <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu class="dropdown-content">
                        <paper-item>This is a long label for the paper menu and button to show</paper-item>
                        <paper-item>This is another long label for the paper menu and button</paper-item>
                        <paper-item>This is still yet another long label for the paper menu</paper-item>
                    </paper-menu>
                </paper-menu-button>
            </paper-toolbar>
            <div class="fit">Content goes here...</div>
        </paper-header-panel>       
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Solution

This isn't exactly perfect but it should give you an idea of the kind of css properties you should change and how to do it: http://jsbin.com/xaladokimu/1/edit?html,output

What changed is the style:

<style>
  paper-menu-button{
    --paper-menu-button-dropdown:{
      max-width: 100%;
      right:70vw;
    };
  }
  paper-item{
    --paper-item:{
      white-space: nowrap;
      width: 100%;
    };
  }
</style>

Basically, you have to add the white-space: nowrap to the items so that their text is displayed in a single line and then play around with the items' width and the dropdown menu's horizontal position and width (trying to change the dropdown's position to fixed or something else could help too)

Then again, you should set this css properties outside of the element in some custom style (unless you want your element to only work on a set position)