fix(App): Fix share screen selection styles

Author: adlk

src/features/desktopCapturer/Component.js

@@ -46,10 +46,12 @@ const styles = theme => ({
     flexWrap: 'wrap',
     marginTop: 20,
     overflow: 'scroll',
+    gap: '5%',
   },
   cta: {
     width: '100%',
     marginTop: 40,
+    whiteSpace: 'nowrap',
   },
   cancelCta: {
     marginTop: 15,

src/features/desktopCapturer/sourceItem.js

@@ -1,28 +1,25 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
 import injectSheet from 'react-jss';
 
 const styles = theme => ({
-  modal: {
-    width: '80%',
-    maxWidth: 600,
-    textAlign: 'center',
-  },
-  sourcesContainer: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
   source: {
-    width: '33%',
+    width: '30%',
+    flexDirection: 'column',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     color: theme.colorText,
     marginBottom: 40,
 
     '& $thumb': {
       border: [3, 'solid', 'transparent'],
       borderRadius: theme.borderRadius,
       transition: 'border 250ms',
+      boxShadow: [0, 0, 5, 'rgba(0, 0, 0, 0.1)'],
+      width: '100%',
     },
 
     '&:hover, &$active': {
@@ -50,6 +47,13 @@ const styles = theme => ({
     width: 30,
     height: 30,
   },
+  windowName: {
+    width: '100%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: 10,
+  },
 });
 
 export default @injectSheet(styles) @observer class SourceItem extends Component {
@@ -86,7 +90,7 @@ export default @injectSheet(styles) @observer class SourceItem extends Component
           <img src={thumbnail} alt="" className={classes.thumb} />
           {appIcon && <img src={appIcon} alt="" className={classes.appIcon} />}
         </div>
-        <p>
+        <p className={classes.windowName}>
           {name}
         </p>
       </button>