refactor: update Embedded component layout to use embeddedSection for improved styling and structure

Author: lposen

example/src/components/Embedded/Embedded.styles.ts

@@ -20,8 +20,11 @@ const styles = StyleSheet.create({
   button,
   buttonText,
   container,
-  embeddedItem: {
-    marginBottom: 16,
+  embeddedSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    paddingHorizontal: 16,
   },
   hr,
   inputContainer: {

example/src/components/Embedded/Embedded.tsx

@@ -208,19 +208,20 @@ export const Embedded = () => {
         </View>
       </Modal>
       <View style={styles.hr} />
-      <EmbeddedSessionManager isActive={isFocused}>
-        <ScrollView>
-          {embeddedMessages.map((message) => (
-            <View style={styles.embeddedItem} key={message.metadata.messageId}>
+      <ScrollView>
+        <View style={styles.embeddedSection}>
+          <EmbeddedSessionManager isActive={isFocused}>
+            {embeddedMessages.map((message) => (
               <IterableEmbeddedView
+                key={message.metadata.messageId}
                 viewType={selectedViewType}
                 message={message}
                 config={viewConfig}
               />
-            </View>
-          ))}
-        </ScrollView>
-      </EmbeddedSessionManager>
+            ))}
+          </EmbeddedSessionManager>
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 };