extend select menu outside of panel, allow top placement

src/editor/components/components/AddGeneratorComponent.js

@@ -116,6 +116,9 @@ export default class AddGeneratorComponent extends React.Component {
           noOptionsMessage={() => 'No components found'}
           onChange={this.addComponent}
           value={this.state.value}
+          menuPosition="fixed"
+          menuPlacement="auto"
+          minMenuHeight={300}
         />
       </div>
     );

src/editor/components/components/StreetSegmentSidebar.js

@@ -3,6 +3,12 @@ import PropTypes from 'prop-types';
 import Component from './StreetSegmentComponent';
 import PropertyRow from './PropertyRow';
 import { StreetSurfaceIcon } from '../../icons';
+import {
+  cloneEntity,
+  removeSelectedEntity,
+  renameEntity
+} from '../../lib/entity';
+import { Button } from '../components';
 
 // Define featured component prefixes that should be shown in their own section
 const FEATURED_COMPONENT_PREFIXES = ['street-generated-'];
@@ -55,6 +61,28 @@ const StreetSegmentSidebar = ({ entity }) => {
                 isSingle={false}
                 entity={entity}
               />
+              <div className="sidepanelContent">
+                <div id="sidebar-buttons" className="pb-2">
+                  <Button
+                    variant={'toolbtn'}
+                    onClick={() => renameEntity(entity)}
+                  >
+                    Rename
+                  </Button>
+                  <Button
+                    variant={'toolbtn'}
+                    onClick={() => cloneEntity(entity)}
+                  >
+                    Duplicate
+                  </Button>
+                  <Button
+                    variant={'toolbtn'}
+                    onClick={() => removeSelectedEntity()}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
               {/* props for street-segment but formatted as a fake 'surface' component */}
               <div className="collapsible component">
                 <div className="static">

src/editor/components/widgets/Mixins.js

@@ -150,6 +150,9 @@ export default class Mixin extends React.Component {
                 noOptionsMessage={() => 'No mixins found'}
                 onChange={this.updateMixins.bind(this)}
                 value={this.state.mixins}
+                menuPosition="fixed"
+                menuPlacement="auto"
+                minMenuHeight={300}
               />
             ) : (
               <Select
@@ -169,6 +172,9 @@ export default class Mixin extends React.Component {
                 noOptionsMessage={() => 'No models found'}
                 onChange={this.updateMixinSingle.bind(this)}
                 value={this.state.mixins}
+                menuPosition="fixed"
+                menuPlacement="auto"
+                minMenuHeight={300}
               />
             )}
           </span>

src/editor/components/widgets/ModelsArrayWidget.js

@@ -147,6 +147,9 @@ export default class ModelsArrayWidget extends React.Component {
               onChange={this.updateModels.bind(this)}
               simpleValue
               value={this.state.modelsArrayWidget}
+              menuPosition="fixed"
+              menuPlacement="auto"
+              minMenuHeight={300}
             />
           </span>
         </div>

src/editor/components/widgets/SelectWidget.js

@@ -71,6 +71,9 @@ export default class SelectWidget extends React.Component {
         value={this.state.value}
         noOptionsMessage={() => 'No value found'}
         onChange={this.onChange}
+        menuPosition="fixed"
+        menuPlacement="auto"
+        minMenuHeight={300}
       />
     );
   }