@seamapi/react 1.58.0 → 1.58.1

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceRow.tsx

@@ -36,11 +36,15 @@ export function ModelColumn({
 }: SupportedDeviceRowProps): JSX.Element {
   return (
     <div className='seam-col seam-model-col'>
-      <div className='seam-model-name'>{deviceModel.model_name}</div>
+      <div className='seam-model-name'>
+        <div className='seam-truncated-text'>{deviceModel.model_name}</div>
+      </div>
       <div className='seam-model-id'>
-        {deviceModel.manufacturer_model_id}
-        <DotDivider />
-        {connectionTypeNames[deviceModel.connection_type]}
+        <div className='seam-truncated-text'>
+          {deviceModel.manufacturer_model_id}
+          <DotDivider />
+          {connectionTypeNames[deviceModel.connection_type]}
+        </div>
       </div>
     </div>
   )
@@ -54,12 +58,7 @@ export function StatusColumn({
   return (
     <div className='seam-col seam-status-col'>
       <div className={classNames('seam-status-pill', `status-${statusColor}`)}>
-        <span>
-          {/* TODO devicedb should support this eventually, hardcoded for now */}
-          {deviceModel.brand === 'lockly'
-            ? brandStatus[deviceModel.brand]
-            : status[deviceModel.support_level]}
-        </span>
+        <span>{status[deviceModel.support_level]}</span>
       </div>
     </div>
   )
@@ -89,7 +88,3 @@ export const connectionTypeNames: Record<
   zigbee: 'Zigbee',
   unknown: 'Unknown',
 }
-
-export const brandStatus: Record<DeviceModel['brand'], string> = {
-  lockly: 'LIVE/CONTACT SUPPORT',
-}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.58.0'
+const seamapiReactVersion = '1.58.1'
 
 export default seamapiReactVersion

package/src/styles/_supported-device-table.scss

@@ -313,12 +313,20 @@ $row-padding: 8px;
 
       .seam-model-name {
         font-size: 14px;
+
+        .seam-truncated-text {
+          width: 270px;
+        }
       }
 
       .seam-model-id {
         color: colors.$text-gray-2;
         font-size: 12px;
 
+        .seam-truncated-text {
+          width: 220px;
+        }
+
         .seam-dot-divider {
           margin: 0 4px;
           color: colors.$text-gray-3;
@@ -335,22 +343,31 @@ $row-padding: 8px;
         }
       }
 
-      @media only screen and (width >= 700px) {
+      @media only screen and (width >= 768px) {
         flex-direction: row;
         align-items: center;
         justify-content: flex-start;
 
         .seam-model-name {
-          flex: 0 0 75%;
+          flex: 1;
+          font-size: 14px;
         }
 
         .seam-model-id {
-          font-size: 16px;
+          flex: 0 0 40%;
+          font-size: 14px;
+          display: flex;
+          justify-content: flex-end;
+
+          .seam-truncated-text {
+            text-align: right;
+          }
         }
       }
     }
 
     .seam-status-col {
+      width: 70px;
       text-align: center;
       align-items: center;
     }