[FIX] Action sheet cutting emojis on the header (#2263)

* [FIX] Action sheet cutting emojis on the header

* fix tablet case

Co-authored-by: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>

app/containers/ActionSheet/styles.js

@@ -29,7 +29,8 @@ export default StyleSheet.create({
 	},
 	handle: {
 		justifyContent: 'center',
-		alignItems: 'center'
+		alignItems: 'center',
+		paddingBottom: 8
 	},
 	handleIndicator: {
 		width: 40,

app/containers/MessageActions/Header.js

@@ -14,17 +14,20 @@ import { Button } from '../ActionSheet';
 import { useDimensions } from '../../dimensions';
 
 export const HEADER_HEIGHT = 36;
+const ITEM_SIZE = 36;
+const CONTAINER_MARGIN = 8;
+const ITEM_MARGIN = 8;
 
 const styles = StyleSheet.create({
 	container: {
 		alignItems: 'center',
-		marginHorizontal: 8
+		marginHorizontal: CONTAINER_MARGIN
 	},
 	headerItem: {
-		height: 36,
-		width: 36,
-		borderRadius: 20,
-		marginHorizontal: 8,
+		height: ITEM_SIZE,
+		width: ITEM_SIZE,
+		borderRadius: ITEM_SIZE / 2,
+		marginHorizontal: ITEM_MARGIN,
 		justifyContent: 'center',
 		alignItems: 'center'
 	},
@@ -84,7 +87,7 @@ HeaderFooter.propTypes = {
 };
 
 const Header = React.memo(({
-	handleReaction, server, message, theme
+	handleReaction, server, message, isMasterDetail, theme
 }) => {
 	const [items, setItems] = useState([]);
 	const { width, height } = useDimensions();
@@ -96,8 +99,8 @@ const Header = React.memo(({
 			let freqEmojis = await freqEmojiCollection.query().fetch();
 
 			const isLandscape = width > height;
-			const size = isLandscape ? width / 2 : width;
-			const quantity = (size / 50) - 1;
+			const size = (isLandscape || isMasterDetail ? width / 2 : width) - (CONTAINER_MARGIN * 2);
+			const quantity = (size / (ITEM_SIZE + (ITEM_MARGIN * 2))) - 1;
 
 			freqEmojis = freqEmojis.concat(DEFAULT_EMOJIS).slice(0, quantity);
 			setItems(freqEmojis);
@@ -135,6 +138,7 @@ Header.propTypes = {
 	handleReaction: PropTypes.func,
 	server: PropTypes.string,
 	message: PropTypes.object,
+	isMasterDetail: PropTypes.bool,
 	theme: PropTypes.string
 };
 export default withTheme(Header);

app/containers/MessageActions/index.js

@@ -32,7 +32,8 @@ const MessageActions = React.memo(forwardRef(({
 	Message_AllowEditing_BlockEditInMinutes,
 	Message_AllowPinning,
 	Message_AllowStarring,
-	Message_Read_Receipt_Store_Users
+	Message_Read_Receipt_Store_Users,
+	isMasterDetail
 }, ref) => {
 	let permissions = {};
 	const { showActionSheet, hideActionSheet } = useActionSheet();
@@ -377,6 +378,7 @@ const MessageActions = React.memo(forwardRef(({
 				<Header
 					server={server}
 					handleReaction={handleReaction}
+					isMasterDetail={isMasterDetail}
 					message={message}
 				/>
 			) : null)
@@ -412,7 +414,8 @@ const mapStateToProps = state => ({
 	Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
 	Message_AllowPinning: state.settings.Message_AllowPinning,
 	Message_AllowStarring: state.settings.Message_AllowStarring,
-	Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users
+	Message_Read_Receipt_Store_Users: state.settings.Message_Read_Receipt_Store_Users,
+	isMasterDetail: state.app.isMasterDetail
 });
 
 export default connect(mapStateToProps, null, null, { forwardRef: true })(MessageActions);