update

app/tabStyles/indexStyles.tsx

@@ -4,6 +4,7 @@ export default StyleSheet.create({
   mainContainer: {
     flex: 1,
     backgroundColor: "hsl(221, 39%, 11%)",
+    // paddingHorizontal: 10,
   },
   header: {
     height: 125,
@@ -43,7 +44,7 @@ export default StyleSheet.create({
     marginTop: 20,
   },
   searchContainer: {
-    width: "90%",
+    width: "100%",
     height: 60,
     marginHorizontal: "auto",
     backgroundColor: "hsl(221, 39%, 8%)",
@@ -71,7 +72,10 @@ export default StyleSheet.create({
     fontWeight: "500",
   },
   suggestionsSection: {
-    width: "90%",
+    position: "absolute",
+    zIndex: 10,
+    top: 70,
+    width: "100%",
     height: "auto",
     paddingBottom: 15,
     borderRadius: 20,
@@ -89,6 +93,7 @@ export default StyleSheet.create({
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
+    // opacity: 0.9,
   },
   suggestionTitle: {
     color: "hsl(0, 0%, 60%)",
@@ -119,26 +124,46 @@ export default StyleSheet.create({
     fontWeight: "500",
     marginLeft: 10,
   },
-  tagContainer: {
+  tag: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "hsl(221, 39%, 8%)",
-    borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
-    height: "auto",
-    width: "auto",
-    paddingVertical: 10,
-    borderRadius: 50,
-    marginTop: 15,
-    marginLeft: 20,
-
-    justifyContent: "space-between",
+    backgroundColor: "#333",
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    marginRight: 8,
+    marginBottom: 8,
+    marginTop: 5,
   },
   tagLabel: {
-    color: "hsl(0, 0%, 90%)",
-    fontSize: 14,
-    fontWeight: "500",
-    marginLeft: 15,
-    textAlign: "center",
+    color: "white", 
+    marginRight: 5
   },
+  tagContainer: {
+    width: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginTop: 10,
+  },
+  personRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#1b1e2b",
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    marginBottom: 8,
+  },
+  avatarCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 999,
+    backgroundColor: "#2a2f45",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  personName: { color: "white", fontSize: 16, fontWeight: "600" },
+  personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
 });