From 8a859ff56cf31df3a9bea0f0d66fa6180dcb6cd6 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Thu, 7 May 2026 15:07:18 +0530
Subject: [PATCH] refactor: update tag display to use a stretched column layout
 for better text wrapping

---
 .../screens/agent_edit_profile_screen.dart    | 97 +++++++++++--------
 1 file changed, 54 insertions(+), 43 deletions(-)

diff --git a/lib/features/agents/presentation/screens/agent_edit_profile_screen.dart b/lib/features/agents/presentation/screens/agent_edit_profile_screen.dart
index 2f2efda..014c39f 100644
--- a/lib/features/agents/presentation/screens/agent_edit_profile_screen.dart
+++ b/lib/features/agents/presentation/screens/agent_edit_profile_screen.dart
@@ -1857,55 +1857,66 @@ class _AgentEditProfileScreenState
     }
 
     return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
         if (tags.isNotEmpty)
           Padding(
             padding: const EdgeInsets.only(bottom: 8),
-            child: Wrap(
-              spacing: 6,
-              runSpacing: 6,
-              children: tags.map((tag) {
-                return Container(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 12,
-                    vertical: 6,
-                  ),
-                  decoration: BoxDecoration(
-                    color: AppColors.accentOrange.withValues(alpha: 0.1),
-                    borderRadius: BorderRadius.circular(20),
-                    border: Border.all(
-                      color: AppColors.accentOrange.withValues(alpha: 0.3),
+            // Stretched column so each tag pill spans the available width.
+            // Long text wraps inside the chip instead of overflowing.
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                for (int i = 0; i < tags.length; i++) ...[
+                  if (i > 0) const SizedBox(height: 6),
+                  Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 12,
+                      vertical: 8,
+                    ),
+                    decoration: BoxDecoration(
+                      color: AppColors.accentOrange.withValues(alpha: 0.1),
+                      borderRadius: BorderRadius.circular(20),
+                      border: Border.all(
+                        color: AppColors.accentOrange.withValues(alpha: 0.3),
+                      ),
+                    ),
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Expanded(
+                          child: Text(
+                            tags[i],
+                            softWrap: true,
+                            style: const TextStyle(
+                              fontFamily: 'SourceSerif4',
+                              fontSize: 13,
+                              fontWeight: FontWeight.w400,
+                              color: AppColors.primaryDark,
+                            ),
+                          ),
+                        ),
+                        const SizedBox(width: 8),
+                        GestureDetector(
+                          onTap: () {
+                            final newList = List<String>.from(tags)
+                              ..remove(tags[i]);
+                            setValue(newList);
+                          },
+                          child: const Padding(
+                            padding: EdgeInsets.only(top: 2),
+                            child: Icon(
+                              Icons.close,
+                              size: 16,
+                              color: AppColors.hintText,
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
                   ),
-                  child: Row(
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Text(
-                        tag,
-                        style: const TextStyle(
-                          fontFamily: 'SourceSerif4',
-                          fontSize: 13,
-                          fontWeight: FontWeight.w400,
-                          color: AppColors.primaryDark,
-                        ),
-                      ),
-                      const SizedBox(width: 4),
-                      GestureDetector(
-                        onTap: () {
-                          final newList = List<String>.from(tags)..remove(tag);
-                          setValue(newList);
-                        },
-                        child: const Icon(
-                          Icons.close,
-                          size: 14,
-                          color: AppColors.hintText,
-                        ),
-                      ),
-                    ],
-                  ),
-                );
-              }).toList(),
+                ],
+              ],
             ),
           ),
         TextFormField(