Fix client list buttons bug

src/scenes/nutritionist/ClientListNutritionist/components/ChatButton/styles.ts

@@ -5,6 +5,7 @@ export const styles = StyleSheet.create({
   titleStyle: { color: colors.textBlack, textTransform: 'capitalize' },
   containerStyle: {
     marginTop: 12,
+    marginLeft: 5,
     padding: 12,
     overflow: 'hidden',
     borderRadius: 4,
@@ -13,7 +14,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    width: 160,
+    flexGrow: 1,
   },
   img: {
     marginRight: 5,

src/scenes/nutritionist/ClientListNutritionist/components/DietProfileButton/styles.ts

@@ -5,6 +5,7 @@ export const styles = StyleSheet.create({
   titleStyle: { color: colors.textBlack, textTransform: 'capitalize' },
   containerStyle: {
     marginTop: 12,
+    marginRight: 5,
     padding: 12,
     overflow: 'hidden',
     borderRadius: 4,
@@ -13,7 +14,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    width: 160,
+    flexGrow: 1,
   },
   img: {
     marginRight: 5,

src/scenes/nutritionist/ClientListNutritionist/index.tsx

@@ -6,7 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 import * as ROUTES from 'constants/routes';
 import { retrieveClientListApi } from 'services/profiles';
 import { useApi } from 'hooks';
-import { Loader } from 'components/core';
+import { Loader, EmptyDataPage } from 'components/core';
 
 const ClientListNutritionist: FC = () => {
   const navigation = useNavigation();
@@ -15,6 +15,9 @@ const ClientListNutritionist: FC = () => {
   if (isLoading) {
     return <Loader />;
   }
+  if (!clients.length) {
+    return <EmptyDataPage text="Belum ada klien" />;
+  }
   return (
     <ScrollView contentContainerStyle={layoutStyles}>
       {clients.map((client, idx) => (