diff --git a/jam-ui/src/components/page/JKNewMusicSession.js b/jam-ui/src/components/page/JKNewMusicSession.js
index 870ddfd54..a20d97545 100644
--- a/jam-ui/src/components/page/JKNewMusicSession.js
+++ b/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 = () => {
-
+ { greaterThan.sm && (
+
+ )}
+
diff --git a/jam-ui/src/components/people/JKFriendsAutoComplete.js b/jam-ui/src/components/people/JKFriendsAutoComplete.js
index 32976d470..a40131d82 100644
--- a/jam-ui/src/components/people/JKFriendsAutoComplete.js
+++ b/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 (
-
+
@@ -89,7 +93,7 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
/>
-
+