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 }) { /> - +