fix(css) fix various layout issues on small screen sizes (#9464)

css/_connection-status.scss

@@ -11,6 +11,8 @@
         line-height: 13px;
         margin: 0 auto;
         width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
     }
 
     &-header {

css/_mixins.scss

@@ -206,3 +206,13 @@
     bottom: 0;
     width: 35%;
 }
+
+/**
+ * Resizes elements width to fill the whole screen width with some margin
+ */
+@mixin adjust-for-max-width($width, $margin) {
+    @media (max-width: $width) {
+        margin: 0 $margin;
+        width: $width - 2 * $margin;
+    }
+}

css/_prejoin.scss

@@ -113,6 +113,8 @@
     &-dropdown-btns {
         width: 320px;
         padding: 8px 0;
+
+        @include adjust-for-max-width(320px, 8px);
     }
 
     &-dropdown-btn {
@@ -140,6 +142,8 @@
     }
 
     &-dropdown-container {
+        margin-top: 16px;
+
         & > div:nth-child(2) {
             background: #fff;
             padding: 0;

css/_premeeting-screens.scss

@@ -30,16 +30,18 @@
 
     .action-btn {
         border-radius: 3px;
+        box-sizing: border-box;
         color: #fff;
         cursor: pointer;
         display: inline-block;
         font-size: 15px;
         line-height: 24px;
-        margin-top: 16px;
         padding: 7px 16px;
         position: relative;
         text-align: center;
-        width: 286px;
+        width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
 
         &.primary {
             background: #0376DA;
@@ -175,6 +177,8 @@
             text-align: center;
             width: 320px;
 
+            @include adjust-for-max-width(320px, 8px);
+
             &.error {
                 box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
             }
@@ -246,6 +250,7 @@
     transition: background 0.16s ease-out;
     width: 320px;
 
+    @include adjust-for-max-width(320px, 8px);
     @include flex-centered();
 
     svg {

css/modals/virtual-background/_virtual-background.scss

@@ -87,6 +87,11 @@
         font-size: 1.5vw;
     }
     @media (max-width: 432px){
+        grid-template-columns: auto auto auto;
+        font-size: 1.5vw;
+    }
+    @media (max-width: 320px){
+        grid-template-columns: auto auto auto;
         font-size: 1.5vw;
     }
 }

react/features/base/responsive-ui/constants.js

@@ -13,3 +13,8 @@ export const ASPECT_RATIO_NARROW = Symbol('ASPECT_RATIO_NARROW');
  * @type {Symbol}
  */
 export const ASPECT_RATIO_WIDE = Symbol('ASPECT_RATIO_WIDE');
+
+/**
+ * Smallest supported mobile width.
+ */
+export const SMALL_MOBILE_WIDTH = '320';

react/features/settings/components/web/audio/AudioSettingsPopup.js

@@ -10,6 +10,7 @@ import {
     setAudioOutputDevice as setAudioOutputDeviceAction
 } from '../../../../base/devices';
 import { connect } from '../../../../base/redux';
+import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
 import {
     getCurrentMicDeviceId,
     getCurrentOutputDeviceId
@@ -36,6 +37,11 @@ type Props = AudioSettingsContentProps & {
     * Callback executed when the popup closes.
     */
     onClose: Function,
+
+    /**
+     * The popup placement enum value.
+     */
+    popupPlacement: string
 }
 
 /**
@@ -52,7 +58,8 @@ function AudioSettingsPopup({
     setAudioInputDevice,
     setAudioOutputDevice,
     onClose,
-    outputDevices
+    outputDevices,
+    popupPlacement
 }: Props) {
     return (
         <div className = 'audio-preview'>
@@ -66,7 +73,7 @@ function AudioSettingsPopup({
                     setAudioOutputDevice = { setAudioOutputDevice } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                placement = 'top-start'>
+                placement = { popupPlacement }>
                 {children}
             </InlineDialog>
         </div>
@@ -80,7 +87,10 @@ function AudioSettingsPopup({
  * @returns {Object}
  */
 function mapStateToProps(state) {
+    const { clientWidth } = state['features/base/responsive-ui'];
+
     return {
+        popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start',
         currentMicDeviceId: getCurrentMicDeviceId(state),
         currentOutputDeviceId: getCurrentOutputDeviceId(state),
         isOpen: getAudioSettingsVisibility(state),

react/features/settings/components/web/video/VideoSettingsPopup.js

@@ -8,6 +8,7 @@ import {
     setVideoInputDeviceAndUpdateSettings
 } from '../../../../base/devices';
 import { connect } from '../../../../base/redux';
+import { SMALL_MOBILE_WIDTH } from '../../../../base/responsive-ui/constants';
 import { getCurrentCameraDeviceId } from '../../../../base/settings';
 import { toggleVideoSettings } from '../../../actions';
 import { getVideoSettingsVisibility } from '../../../functions';
@@ -31,6 +32,11 @@ type Props = VideoSettingsProps & {
     * Callback executed when the popup closes.
     */
     onClose: Function,
+
+    /**
+     * The popup placement enum value.
+     */
+     popupPlacement: string
 }
 
 /**
@@ -43,6 +49,7 @@ function VideoSettingsPopup({
     children,
     isOpen,
     onClose,
+    popupPlacement,
     setVideoInputDevice,
     videoDeviceIds
 }: Props) {
@@ -56,7 +63,7 @@ function VideoSettingsPopup({
                     videoDeviceIds = { videoDeviceIds } /> }
                 isOpen = { isOpen }
                 onClose = { onClose }
-                placement = 'top-start'>
+                placement = { popupPlacement }>
                 { children }
             </InlineDialog>
         </div>
@@ -71,9 +78,12 @@ function VideoSettingsPopup({
  * @returns {Object}
  */
 function mapStateToProps(state) {
+    const { clientWidth } = state['features/base/responsive-ui'];
+
     return {
         currentCameraDeviceId: getCurrentCameraDeviceId(state),
         isOpen: getVideoSettingsVisibility(state),
+        popupPlacement: clientWidth <= SMALL_MOBILE_WIDTH ? 'auto' : 'top-start',
         videoDeviceIds: getVideoDeviceIds(state)
     };
 }