feat(AccessCodeTable & DeviceTable): truncate long names

src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -107,7 +107,7 @@ function AccessCodeRow(props: {
         </div>
       </TableCell>
       <TableCell className='seam-name-cell'>
-        <Title>{accessCode.name}</Title>
+        <Title className='seam-truncated-text'>{accessCode.name}</Title>
         <CodeDetails accessCode={accessCode} />
       </TableCell>
       <TableCell className='seam-action-cell'>

src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -12,7 +12,9 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
 
   return (
     <div className='seam-code-details'>
-      {device?.properties.name}
+      <span className='seam-device-name seam-truncated-text'>
+        {device?.properties.name}
+      </span>
       <DotDivider />
       <Duration accessCode={accessCode} />
       <DotDivider />

src/lib/ui/DeviceTable/DeviceRow.tsx

@@ -39,7 +39,7 @@ export function DeviceRow({
         <DeviceImage device={device} />
       </TableCell>
       <TableCell className='seam-body-cell'>
-        <Title>{device.properties.name}</Title>
+        <Title className='seam-truncated-text'>{device.properties.name}</Title>
         <div className='seam-bottom'>
           <span className='seam-device-model'>{deviceModel}</span>
           <div className='seam-device-statuses'>

src/lib/ui/types.ts

@@ -2,3 +2,4 @@ import type { HTMLAttributes, HtmlHTMLAttributes } from 'react'
 
 export type DivProps = HTMLAttributes<HTMLDivElement>
 export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>
+export type SpanProps = HtmlHTMLAttributes<HTMLSpanElement>

src/lib/ui/typography/Title.tsx

@@ -1,5 +1,15 @@
-import type { PropsWithChildren } from 'react'
+import classNames from 'classnames'
 
-export function Title({ children }: PropsWithChildren): JSX.Element {
-  return <span className='seam-title'>{children}</span>
+import type { SpanProps } from 'lib/ui/types.js'
+
+export function Title({
+  children,
+  className,
+  ...props
+}: SpanProps): JSX.Element {
+  return (
+    <span className={classNames('seam-title', className)} {...props}>
+      {children}
+    </span>
+  )
 }

src/styles/_access-code-table.scss

@@ -26,11 +26,22 @@
         justify-content: center;
         align-items: flex-start;
         gap: 2px;
+        overflow: hidden;
+
+        .seam-title {
+          max-width: 380px;
+        }
 
         .seam-code-details {
           font-size: 14px;
           line-height: 134%;
           color: colors.$text-gray-1;
+          display: flex;
+
+          .seam-device-name {
+            max-width: 190px;
+            width: auto;
+          }
 
           .seam-dot-divider {
             margin: 0 4px;

src/styles/_device-table.scss

@@ -21,6 +21,11 @@
         justify-content: center;
         align-items: flex-start;
         gap: 2px;
+        overflow: hidden;
+
+        .seam-title {
+          max-width: 380px;
+        }
 
         .seam-bottom {
           display: flex;

src/styles/_typography.scss

@@ -35,10 +35,21 @@
   }
 }
 
+@mixin truncated-text {
+  .seam-truncated-text {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
   @include danger-text;
   @include font-family;
   @include defaults;
+  @include truncated-text;
 }