Improved behavior on small devices.

Author: longsleep

src/styles/components/_audiovideo.scss

@@ -29,16 +29,22 @@
   }
 }
 
-.withChat,
+.withChat {
+  // scss-lint:disable IdSelector
+  #audiovideo {
+    right: $chat-width;
+  }
+}
+
 .withBuddylist {
   // scss-lint:disable IdSelector
   #audiovideo {
-    right: 260px;
+    right: $buddylist-width;
   }
 }
 
 .withBuddylist.withChat #audiovideo { // scss-lint:disable IdSelector
-  right: 520px;
+  right: $chat-width + $buddylist-width;
 }
 
 #audiovideo { // scss-lint:disable IdSelector
@@ -50,7 +56,7 @@
   user-select: none;
 
   @include breakpt($breakpoint-video-small, max-width, only screen) {
-    right: 0;
+    right: 0 !important;
   }
 
   &.fullscreen {

src/styles/components/_buddylist.scss

@@ -58,6 +58,9 @@
 .withBuddylist #buddylist:before { // scss-lint:disable IdSelector
   content: '\f101';
   padding-right: 0;
+  @include breakpt($breakpoint-medium, max-width) {
+    display: block;
+  }
 }
 
 .withBuddylistAutoHide #buddylist:before { // scss-lint:disable IdSelector

src/styles/components/_chat.scss

@@ -21,20 +21,25 @@
 
 #chat { // scss-lint:disable IdSelector
   bottom: 0;
-  min-width: $chat-width;
+  width: $chat-width;
+  min-width: 200px;
   opacity: 0;
   pointer-events: none;
   position: absolute;
-  right: $chat-width;
+  right: $buddylist-width;
   top: 0;
-  width: $chat-width;
   z-index: 45;
 }
 
 .withChat {
   // scss-lint:disable IdSelector
   #chat {
     opacity: 1;
+
+    @include breakpt($chat-width + 200, max-width) {
+      left: 0;
+      width: auto;
+    }
   }
 
   &.withChatMaximized #chat {

src/styles/components/_rightslide.scss

@@ -21,15 +21,17 @@
 
 
 .withBuddylist #rightslide { // scss-lint:disable IdSelector
-  right: 0;
+  @include breakpt($breakpoint-medium, min-width) {
+    right: 0;
+  }
 }
 
 #rightslide { // scss-lint:disable IdSelector
   bottom: 0;
   left: 0;
   pointer-events: none;
   position: absolute;
-  right: -1 * $pane-width;
+  right: -1 * $buddylist-width;
   top: $minbarheight;
   transition: right 200ms ease-in-out;
   z-index: 5;

src/styles/global/_base.scss

@@ -29,9 +29,20 @@ body {
 body {
   margin: 0;
   max-height: 100%;
-  max-width: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: hidden;
   padding: 0;
+
+  @include breakpt($breakpoint-medium, max-width) {
+    overflow-x: auto;
+  }
+
+  > .ui {
+    height: 100%;
+    min-width: $buddylist-width;
+    position: absolute;
+    width: 100%;
+  }
 }
 
 a {

src/styles/global/_overlaybar.scss

@@ -95,7 +95,6 @@
     display: inline-block;
     margin-bottom: 0;
     margin-left: .5em;
-    max-width: 60%;
 
     > * {
       padding-right: .5em;

src/styles/global/_variables.scss

@@ -54,9 +54,6 @@ $action-enable: $actioncolor1 !default;
 $welcome: #aaa !default;
 $loading: #ddd !default;
 
-// panes
-$pane-width: 320px !default;
-
 // font
 $font-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 $base-font-size: 13px; // compass vertical_rhythm mixin
@@ -97,7 +94,7 @@ $video-overlayactions: rgba(0, 0, 0, .9) !default;
 $settings-background: #fff !default;
 
 // buddylist
-$buddylist-width: $pane-width !default;
+$buddylist-width: 300px !default;
 $buddylist-background: $componentbg !default;
 $buddylist-tab-color: rgba(0, 0, 0, .3) !default;
 $buddylist-tab-background: $componentbg !default;
@@ -107,7 +104,7 @@ $buddylist-buddy2: $componentfg2 !default;
 $buddylist-action-font-size: 1.6em;
 
 // chat
-$chat-width: $pane-width !default;
+$chat-width: 300px !default;
 $chat-background: $specialbg1 !default;
 $chat-header: rgba(255, 255, 255, .9) !default;
 $chat-disabled: #aaa !default;