Final fixes to PR

* Avoid page width-related complexity by moving the edit button and
  promo card inside a relatively-positioned wrapper div.

* Get rid of the highlight style, which breaks the star icon overlaid on
  the edit button.

* Show the star over the edit button if the promo card is visible.

server/src/pages/shot/view.js

@@ -9,7 +9,6 @@ const { PromoDialog } = require("./promo-dialog");
 const { DeleteShotButton } = require("../../delete-shot-button");
 const { TimeDiff } = require("./time-diff");
 const reactruntime = require("../../reactruntime");
-const classnames = require("classnames");
 const { Editor } = require("./editor");
 const { isValidClipImageUrl } = require("../../../shared/shot");
 
@@ -183,7 +182,7 @@ class Body extends React.Component {
   }
 
   componentDidMount() {
-    this.setState({highlightEditButton: this.props.highlightEditButton});
+    this.setState({highlightEditButton: this.props.highlightEditButton || this.props.promoDialog});
     this.setState({promoDialog: this.props.promoDialog});
   }
 
@@ -362,10 +361,12 @@ class Body extends React.Component {
         confirmDeleteHandler={ this.confirmDeleteHandler.bind(this) }
         cancelDeleteHandler={ this.cancelDeleteHandler.bind(this) } />;
 
-      const highlightEdit = this.state.promoDialog;
-      editButton = <Localized id="shotPageEditButton">
-        <button className={classnames("button", "transparent", "edit", {"highlight": highlightEdit})} title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit; }}></button>
-      </Localized>;
+      editButton = <div className="edit-shot-button">
+        <Localized id="shotPageEditButton">
+          <button className="button transparent edit" title="Edit this image" onClick={ this.onClickEdit.bind(this) } ref={(edit) => { this.editButton = edit; }}></button>
+        </Localized>
+        <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
+        </div>;
     } else {
       trashOrFlagButton = <Localized id="shotPageAbuseButton">
         <button className="button transparent flag" title="Report this shot for abuse, spam, or other problems" onClick={ this.onClickFlag.bind(this) }></button>
@@ -436,7 +437,6 @@ class Body extends React.Component {
             { this.props.enableAnnotations ? editButton : null }
             { highlight }
             <ShareButton abTests={this.props.abTests} clipUrl={clipUrl} shot={shot} isOwner={this.props.isOwner} staticLink={this.props.staticLink} renderExtensionNotification={renderExtensionNotification} isExtInstalled={this.props.isExtInstalled} />
-            <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
             <Localized id="shotPageDownloadShot">
               <a className="button primary" href={ this.props.downloadUrl } onClick={ this.onClickDownload.bind(this) }
                 title="Download the shot image">

static/css/frame.scss

@@ -48,20 +48,11 @@
 }
 
 .promo-panel {
-  @include respond-to("small") {
-    right: 10px;
-    top: 65px;
-  }
-
-  @include respond-to("medium") {
-    right: 80px;
-    top: 75px;
-  }
-  right: 80px;
-  top: 75px;
+  position: absolute;
+  top: 45px;
+  right: -45px;
   border-radius: 3px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
-  position: absolute;
   width: 150px;
   z-index: 999;
   padding: 5px;
@@ -82,11 +73,6 @@
     margin: 0 2px;
   }
 
-  .link {
-    cursor: pointer;
-    color: #009ec0;
-  }
-
   a.box-close {
     position: absolute;
     top: 2px;
@@ -112,6 +98,10 @@
     margin-right: 4px;
   }
 
+  .edit-shot-button {
+    position: relative;
+  }
+
   @include respond-to("small") {
     padding-right: $grid-unit * 0.5;
 
@@ -354,10 +344,6 @@
   transition: background-image 150ms $bezier;
 }
 
-.button.edit.highlight {
-  background-color: $light-hover;
-}
-
 .edit-highlight {
   background-image: url("../img/edit-highlight.svg");
   height: 17px;