Fixing 'Types' column display issue on DevicesList page

Author: PatrikMatiasko

src/app/clientApp/Devices/List/DevicesListPage/Tabs/Tab1.tsx

@@ -156,6 +156,7 @@ const Tab1 = forwardRef<Tab1RefType, Props>((props, ref) => {
             setOwning(false)
         }
     }
+    console.log('TOTO')
 
     const columns = useMemo(
         () => [
@@ -170,12 +171,12 @@ const Tab1 = forwardRef<Tab1RefType, Props>((props, ref) => {
                         </Link>
                     )
                 },
-                style: { width: '100%' },
+                style: { width: '100%', maxWidth: '300px' },
             },
             {
                 Header: 'Types',
                 accessor: 'types',
-                style: { maxWidth: '350px', width: '100%' },
+                style: { maxWidth: '300px', width: '150px', minWidth: '150px' },
                 Cell: ({ value }: { value: any }) => {
                     if (!value) {
                         return null
@@ -199,15 +200,15 @@ const Tab1 = forwardRef<Tab1RefType, Props>((props, ref) => {
             {
                 Header: 'ID',
                 accessor: 'id',
-                style: { maxWidth: '350px', width: '100%' },
+                style: { maxWidth: '350px', minWidth: '200px' },
                 Cell: ({ value }: { value: any }) => {
                     return <span className='no-wrap-text'>{value}</span>
                 },
             },
             {
                 Header: _(t.ownershipStatus),
                 accessor: 'ownershipStatus',
-                style: { width: '250px' },
+                style: { width: '150px' },
                 Cell: ({ value }: { value: any }) => {
                     const isOwned = OWNED === value
 
@@ -267,7 +268,7 @@ const Tab1 = forwardRef<Tab1RefType, Props>((props, ref) => {
     const dataToDisplay = data || []
 
     return (
-        <div style={{ height: '100%', display: 'flex' }}>
+        <div style={{ height: '100%', display: 'flex', width: '100%' }}>
             <DevicesList
                 collapsed={collapsed ?? false}
                 columns={columns}

src/components/Organisms/DevicesList/DevicesList.tsx

@@ -36,6 +36,7 @@ const DevicesList: FC<Props> = (props) => {
             ref={ref}
             style={{
                 height: '100%',
+                width: '100%',
                 display: 'flex',
                 flexDirection: 'column',
                 overflow: 'hidden',