chat designer: fix open/close on different widths

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

@@ -15,17 +15,19 @@ class App.ChannelChat extends App.Controller
 
   elements:
     '.js-browser': 'browser'
+    '.js-browserBody': 'browserBody'
     '.js-iframe': 'iframe'
+    '.js-screenshot': 'screenshot'
+    '.js-website': 'website'
     '.js-chat': 'chat'
+    '.js-chatHeader': 'chatHeader'
+    '.js-chat-welcome': 'chatWelcome'
     '.js-testurl-input': 'urlInput'
     '.js-backgroundColor': 'chatBackground'
     '.js-paramsBlock': 'paramsBlock'
     '.js-code': 'code'
     '.js-palette': 'palette'
     '.js-color': 'colorField'
-    '.js-screenshot': 'screenshot'
-    '.js-website': 'website'
-    '.js-chat-welcome': 'chatWelcome'
 
   apiOptions: [
     {
@@ -97,6 +99,10 @@ class App.ChannelChat extends App.Controller
     }
   ]
 
+  isOpen: true
+  browserWidth: 1280
+  chatHeight: 360
+
   constructor: ->
     super
     @load()
@@ -134,6 +140,7 @@ class App.ChannelChat extends App.Controller
     @code.each (i, block) ->
       hljs.highlightBlock block
 
+    @adjustBrowserWidth()
     @updateParams()
 
   selectBrowserWidth: (event) =>
@@ -141,31 +148,42 @@ class App.ChannelChat extends App.Controller
 
     # select tab
     tab.addClass('is-selected').siblings().removeClass('is-selected')
-    value = tab.attr('data-value')
-    width = parseInt value, 10
+    @browserWidth = tab.attr('data-value')
+    @adjustBrowserWidth()
+
+  adjustBrowserWidth: ->
+    width = parseInt @browserWidth, 10
 
     # reset zoom
     @chat
-      .css('transform', '')
       .removeClass('is-fullscreen')
+      .css 'transform', "translateY(#{ @getChatOffset() }px)"
     @browser.css('width', '')
     @website.css
       transform: ''
       width: ''
       height: ''
 
-    return if value is 'fit'
+    return if @browserWidth is 'fit'
 
     if width < @el.width()
-      @chat.addClass('is-fullscreen')
+      @chat.addClass('is-fullscreen').css 'transform', "translateY(#{ @getChatOffset(true) }px)"
       @browser.css('width', "#{ width }px")
     else
       percentage = @el.width()/width
-      @chat.css('transform', "scale(#{ percentage })")
+      @chat.css 'transform', "translateY(#{ @getChatOffset() * percentage }px) scale(#{ percentage })"
       @website.css
         transform: "scale(#{ percentage })"
         width: @el.width() / percentage
-        height: @el.height() / percentage
+        height: @browserBody.height() / percentage
+
+  getChatOffset: (fullscreen) ->
+    return 0 if @isOpen
+
+    if fullscreen
+      return @browserBody.height() - @chatHeader.outerHeight()
+    else
+      return @chatHeight - @chatHeader.outerHeight()
 
   changeDemoWebsite: (event) =>
     event.preventDefault() if event
@@ -237,6 +255,8 @@ class App.ChannelChat extends App.Controller
 
   toggleChat: =>
     @chat.toggleClass('is-open')
+    @isOpen = @chat.hasClass('is-open')
+    @adjustBrowserWidth()
 
   changeTitle: (event) ->
     @chatWelcome.html $(event.currentTarget).val()

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

@@ -52,8 +52,8 @@
     <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"><%- @T('1:1') %></div>
-        <div class="tab" data-value="1280">MacBook</div>
+        <div class="tab" data-value="fit"><%- @T('1:1') %></div>
+        <div class="tab is-selected" data-value="1280">MacBook</div>
       </div>
     </div>
   </div>
@@ -66,15 +66,15 @@
         <div class="loading icon small muted"></div>
       </form>
     </div>
-    <div class="browser-body js-demo">
+    <div class="browser-body js-browserBody">
       <div class="browser-website js-website">
         <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
         <img class="js-screenshot">
       </div>
       <style>@import "/assets/chat/chat.css";</style>
       <div class="chat-demo-animationHolder">
-        <div class="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible">
-          <div class="zammad-chat-header js-toggle-chat js-backgroundColor">
+        <div class="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible is-open">
+          <div class="zammad-chat-header js-toggle-chat js-backgroundColor js-chatHeader">
             <div class="zammad-chat-header-controls">
               <span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
               <span class="zammad-chat-header-icon">

app/assets/stylesheets/zammad.scss

@@ -7455,6 +7455,7 @@ output {
     width: 100%;
     height: 100%;
     background: white;
+    border-radius: 0 0 5px 5px;
   }
 
   img {
@@ -7508,7 +7509,8 @@ output {
     position: absolute;
     transform-origin: right bottom;
     transition: 500ms;
-    bottom: -318px;
+    user-select: none;
+    will-change: transform;
 
     .zammad-chat-welcome {
       display: block !important;
@@ -7525,8 +7527,6 @@ output {
     }
 
     &.is-open {      
-      bottom: 0;
-      
       .zammad-chat-agent {
         display: block !important;
       }