chat designer: outsource preview width

app/assets/javascripts/app/controllers/_channel/chat.coffee

@@ -69,7 +69,7 @@ class App.ChannelChat extends App.Controller
 
     # reset zoom
     @chat.css('transform', "")
-    @demo.css('width', "")
+    @browser.css('width', "")
     @chat.removeClass('is-fullscreen')
     @iframe.css
       transform: ""
@@ -80,7 +80,7 @@ class App.ChannelChat extends App.Controller
 
     if width < @demo.width()
       @chat.addClass('is-fullscreen')
-      @demo.css('width', "#{ width }px")
+      @browser.css('width', "#{ width }px")
     else
       percentage = @demo.width()/width
       @chat.css('transform', "scale(#{ percentage })")

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -7,17 +7,23 @@
   <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
   
   <h2><%- @T('Designer') %></h2>
+
+  <div class="form-group">
+    <label class="formGroup-label">Preview Width</label>
+    <div class="control">
+      <div class="select-tabs js-selectBrowserWidth">
+        <div class="tab" data-value="375">iPhone 6</div>
+        <div class="tab is-selected" data-value="fit">Fit Width</div>
+        <div class="tab" data-value="1280">MacBook</div>
+      </div>
+    </div>
+  </div>
   
   <div class="browser chat-demo js-browser">
     <div class="browser-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" placeholder="zammad.org">
       </form>
-      <div class="select-tabs js-selectBrowserWidth">
-        <div class="tab" data-value="375">iPhone 6</div>
-        <div class="tab is-selected" data-value="fit">Fit Width</div>
-        <div class="tab" data-value="1280">MacBook</div>
-      </div>
     </div>
     <div class="browser-body js-demo">
       <iframe class="js-iframe"></iframe>

app/assets/stylesheets/zammad.scss

@@ -7329,6 +7329,8 @@ output {
   border: 1px solid hsl(0,0%,90%);
   border-radius: 5px;
   position: relative;
+  transition: 500ms;
+  width: 100%;
 }
   
 .browser-body {
@@ -7336,8 +7338,6 @@ output {
   overflow: hidden;
   height: 450px;
   width: 100%;
-  transition: 500ms;
-  background: #eee;
   
   iframe {
     position: absolute;