fix styles in mobile view of create new session screen

jam-ui/src/components/page/JKNewMusicSession.js

@@ -12,6 +12,7 @@ import jkCustomUrlScheme from '../../helpers/jkCustomUrlScheme';
 import JKModalDialog from '../common/JKModalDialog';
 import useNativeAppCheck from '../../hooks/useNativeAppCheck';
 import { useNativeApp } from '../../context/NativeAppContext';
+import { useResponsive } from '@farfetch/react-context-responsive';
 
 const privacyMap = {
   public: 1,
@@ -33,6 +34,7 @@ const JKNewMusicSession = () => {
   const formRef = useRef();
   const isNativeAppAvailable = useNativeAppCheck();
   const { nativeAppUnavailable, setNativeAppUnavailable } = useNativeApp();
+  const { greaterThan } = useResponsive();
 
   useEffect(() => {
     fetchFriends();
@@ -193,7 +195,10 @@ const JKNewMusicSession = () => {
                 </FormGroup>
               </Form>
             </Col>
-            <Col />
+            { greaterThan.sm && (
+               <Col />
+            )}
+           
           </Row>
         </CardBody>
       </Card>

jam-ui/src/components/people/JKFriendsAutoComplete.js

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PropTypes } from 'prop-types';
 import Avatar from '../common/Avatar';
+import { useResponsive } from '@farfetch/react-context-responsive';
 
 function JKFriendsAutoComplete({ friends, onSelect }) {
   const [filteredFriends, setFilteredFriends] = useState([]);
@@ -14,6 +15,7 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
   const inputRef = useRef(null);
   const { t } = useTranslation();
   const MIN_FILTER_SIZE = 3;
+  const { greaterThan } = useResponsive();
 
   const handleInputChange = e => {
     const val = e.target.value;
@@ -70,10 +72,12 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
     setShowModal(isVisible);
   };
 
+  const chooseFriendsWrapperClass = greaterThan.sm ? 'text-right' : 'text-left mt-2';
+
   return (
     <div>
       <Row className="mb-2">
-        <Col md={9}>
+        <Col md={8}>
           <InputGroup>
             <InputGroupText>
               <FontAwesomeIcon icon="search" transform="shrink-4 down-1" />
@@ -89,7 +93,7 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
             />
           </InputGroup>
         </Col>
-        <Col md={3}>
+        <Col md={4} className={chooseFriendsWrapperClass}>
           <Button
             variant="outline-info"
             outline
@@ -105,7 +109,7 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
         {filteredFriends.map(f => (
           <ListGroupItem key={f.id} onMouseOver={highlight} onMouseOut={unhighlight} onClick={() => handleOnClick(f)}>
             <Avatar src={f.photo_url} size="m" />
-            <span className="ml-1">
+            <span className="ml-1" style={{ cursor: 'pointer' }}>
               {f.first_name} {f.last_name}
             </span>
           </ListGroupItem>

jam-ui/src/i18n/locales/en/sessions.json

@@ -7,7 +7,7 @@
     "privacy_opt_private_invite": "Private – only invited musicians can join",
     "privacy_opt_private_approve": "Private – anyone can request to join, but requires approval",
     "invitations": "Session Invitations",
-    "invitations_help": "If you invite other users to join your session, this will generate an in-app notification and in some cases also an email invitation to invitees. Invited users will also see your session in the “For Me” section of the Browse Sessions feature. Invited users can join your session without further permission or action on your part, regardless of whether your session is public or private.",
+    "invitations_help": "If you invite other users to join your session, this will generate an in-app notification and in some cases also an email invitation to invitees. Invited users can join your session without further permission or action on your part, regardless of whether your session is public or private.",
     "invitations_filter_placeholder": "Enter friend name",
     "choose_friends": "Choose Friends",
     "add_friends": "Add Friends",