diff --git a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
index 62abe970..1bbe8c70 100644
--- a/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/ListField.tsx
@@ -49,8 +49,13 @@ const ListField: React.FC<ListField> = ({ variable }) => {
           return (
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
-                <div key={index} className="badge badge-info gap-2 m-1">
-                  <span>{setvalue}</span>
+                <div
+                  key={setvalue}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {setvalue}
+                  </span>
                   <XIcon
                     onClick={() => remove(index)}
                     className="h-4 w-4 cursor-pointer"
diff --git a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
index 2b09e2b0..f28e3a31 100644
--- a/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/MapField.tsx
@@ -71,21 +71,22 @@ const MapField: React.FC<MapField> = ({ variable, validate }) => {
           }
           return (
             <div>
-              {Object.keys(values[variable.name]).map(
-                (map_data: string, index: number) => (
-                  <div key={index} className="badge badge-info gap-2 m-1">
-                    <span>
-                      {map_data} = {values[variable.name][map_data]}
-                    </span>
-                    <button
-                      type="button"
-                      onClick={handleRemove(values[variable.name], map_data)}
-                    >
-                      <XIcon className="h-4 w-4 cursor-pointer" />
-                    </button>
-                  </div>
-                ),
-              )}
+              {Object.keys(values[variable.name]).map((map_data: string) => (
+                <div
+                  key={map_data}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {map_data} = {values[variable.name][map_data]}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={handleRemove(values[variable.name], map_data)}
+                  >
+                    <XIcon className="h-4 w-4 cursor-pointer" />
+                  </button>
+                </div>
+              ))}
               <div className="flex mt-1">
                 <input type="hidden" value={deleteItem} />
                 <Field
diff --git a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
index f63fa7d4..7236384e 100644
--- a/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
+++ b/radlab-ui/webapp/src/components/forms/fields/SetField.tsx
@@ -48,8 +48,13 @@ const SetField: React.FC<SetField> = ({ variable }) => {
           return (
             <div>
               {values[variable.name].map((setvalue: string, index: number) => (
-                <div key={index} className="badge badge-info gap-2 m-1">
-                  <span>{setvalue}</span>
+                <div
+                  key={setvalue}
+                  className="badge badge-info gap-2 my-1 mr-1 w-auto h-auto py-1 px-2 md:px-4"
+                >
+                  <span className="w-auto" style={{ overflowWrap: "anywhere" }}>
+                    {setvalue}
+                  </span>
                   <XIcon
                     onClick={() => remove(index)}
                     className="h-4 w-4 cursor-pointer"