chore: improve css styling for mobile

apps/ui/src/ui/DataTable.tsx

@@ -16,6 +16,7 @@ export interface DataTableCol<T> {
     cell?: DataTableResolver<T, ReactNode>
     sortable?: boolean
     sortKey?: string
+    minWidth?: number | string
 }
 
 export interface ColSort {
@@ -131,7 +132,7 @@ export function DataTable<T>({
                                             }
                                         }
                                         return (
-                                            <div className="table-cell" key={col.key}>
+                                            <div className="table-cell" key={col.key} style={col.minWidth ? { minWidth: col.minWidth } : {}}>
                                                 {value ?? <>&#8211;</>}
                                             </div>
                                         )

apps/ui/src/ui/Heading.css

@@ -62,7 +62,7 @@
 
 @media only screen and (max-width: 600px) {
     .heading {
-        flex-direction: column;
+        flex-wrap: wrap;
         gap: 10px;
     }
 }

apps/ui/src/ui/InfoTable.css

@@ -10,7 +10,8 @@
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid var(--color-grey);
-    gap: 20px;
+    gap: 5px 20px;
+    flex-wrap: wrap;
 }
 
 .ui-info-table .info-label {
@@ -18,8 +19,8 @@
 }
 
 .ui-info-table .info-value {
-    text-align: right;
     position: relative;
+    word-break: break-word;
 }
 
 .ui-info-table .info-value .ui-tag {

apps/ui/src/ui/Stack.css

@@ -4,8 +4,10 @@
     flex-direction: row;
     gap: var(--spacing);
     margin-bottom: var(--spacing);
+    flex-wrap: wrap;
 }
 
 .ui-stack.ui-stack-vertical {
     flex-direction: column;
+    flex-wrap: nowrap;
 }

apps/ui/src/views/campaign/Campaigns.tsx

@@ -128,6 +128,7 @@ export default function Campaigns() {
                             key: 'name',
                             title: t('name'),
                             sortable: true,
+                            minWidth: '225px',
                             cell: ({ item: { id, name, channel } }) => (
                                 <div className="multi-cell">
                                     { channel === 'email'

apps/ui/src/views/journey/Journeys.tsx

@@ -53,6 +53,7 @@ export default function Journeys() {
                     {
                         key: 'name',
                         title: t('name'),
+                        minWidth: '150px',
                     },
                     {
                         key: 'status',

apps/ui/src/views/users/ListTable.tsx

@@ -67,6 +67,7 @@ export default function ListTable({ search, selectedRow, onSelectRow, title }: L
                     key: 'name',
                     title: t('name'),
                     sortable: true,
+                    minWidth: '200px',
                 },
                 {
                     key: 'type',