Add button for expanding hidden details

src/components/DetailsTable.scss

@@ -23,11 +23,6 @@
   }
 }
 
-.isr-details-message {
-  gap: $iui-s;
-  justify-content: space-between;
-}
-
 .isr-details-more-button {
   // Hide the button by default
   @include visually-hidden;

src/components/DetailsTable.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { DropdownMenu, IconButton, MenuItem, Table, tableFilters, TablePaginator } from '@itwin/itwinui-react';
 import { ReportContext } from './Report';
-import { ClampWithTooltip, StatusIcon, TextWithIcon } from './utils';
+import { LineClamp, StatusIcon, TextWithIcon } from './utils';
 import type { TableProps } from '@itwin/itwinui-react';
 import type { FileRecord, SourceFilesInfo } from './typings';
 import type { Column, Row, CellProps, CellRendererProps } from 'react-table';
@@ -184,8 +184,7 @@ export const DetailsTable = ({
               Header: displayStrings.message,
               Filter: tableFilters.TextFilter(),
               minWidth: 200,
-              cellClassName: 'isr-details-message',
-              Cell: ({ value }: CellProps<TableRow>) => <ClampWithTooltip>{value}</ClampWithTooltip>,
+              Cell: ({ value }: CellProps<TableRow>) => <LineClamp overflowMode='button'>{value}</LineClamp>,
             },
             {
               id: 'more',

src/components/FilesTable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { StatusIcon, ClampWithTooltip, TextWithIcon } from './utils';
+import { StatusIcon, LineClamp, TextWithIcon } from './utils';
 import { Table, tableFilters, Text, Badge } from '@itwin/itwinui-react';
 import type { TableProps } from '@itwin/itwinui-react';
 import type { SourceFilesInfo, SourceFile } from './typings';
@@ -131,12 +131,12 @@ export const FilesTable = ({
               return (
                 props.row.original.path && (
                   <a
-                    className='isr-files-data-text isr-files-link isr-line-clamp'
+                    className='isr-files-data-text isr-files-link'
                     href={props.row.original.path}
                     target='_blank'
                     rel='noopener noreferrer'
                   >
-                    {props.row.original.path}
+                    <LineClamp>{props.row.original.path}</LineClamp>
                   </a>
                 )
               );
@@ -149,7 +149,11 @@ export const FilesTable = ({
             Header: displayStrings['fileID'],
             Filter: tableFilters.TextFilter(),
             Cell: (props: CellProps<SourceFile>) => {
-              return <ClampWithTooltip className='isr-files-data-text'>{props.row.original.fileId}</ClampWithTooltip>;
+              return (
+                <LineClamp className='isr-files-data-text' overflowMode='tooltip'>
+                  {props.row.original.fileId}
+                </LineClamp>
+              );
             },
           },
           {

src/components/utils/ClampWithTooltip.scss → src/components/utils/LineClamp.scss

@@ -1,20 +1,31 @@
+@import '@itwin/itwinui-css/scss/style/variables';
 @import '@itwin/itwinui-css/scss/icon/variables';
 
 .isr-line-clamp {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: var(--line-clamp);
   word-break: break-all;
 }
 
 .isr-tooltip-icon {
   display: flex;
   align-items: center;
+  margin-left: $iui-xs;
 
   svg {
     width: $iui-icons-default;
     height: $iui-icons-default;
     fill: var(--iui-icons-color);
   }
 }
+
+.isr-line-clamp-button {
+  float: right;
+
+  &,
+  &:hover {
+    color: var(--iui-color-foreground-primary);
+  }
+}

src/components/utils/LineClamp.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { Button, Tooltip } from '@itwin/itwinui-react';
+import './LineClamp.scss';
+import SvgInfoCircular from '@itwin/itwinui-icons-react/esm/icons/InfoCircular';
+
+export const LineClamp = ({
+  children,
+  className,
+  overflowMode = 'hidden',
+  lineCount = 2,
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+  overflowMode?: 'tooltip' | 'button' | 'hidden';
+  lineCount?: number;
+}) => {
+  const [isButtonVisible, setIsButtonVisible] = React.useState(false);
+  const [isOverflowing, setIsOverflowing] = React.useState(true);
+  const Element = overflowMode === 'button' ? 'div' : React.Fragment;
+
+  return (
+    <Element>
+      <span
+        className={classnames('isr-line-clamp', className)}
+        style={
+          {
+            display: isButtonVisible && !isOverflowing ? 'inline' : undefined,
+            '--line-clamp': isOverflowing ? lineCount : undefined,
+          } as React.CSSProperties
+        }
+        ref={(el) => {
+          if (el) {
+            setIsButtonVisible(overflowMode === 'button' && el.scrollHeight > el.offsetHeight);
+            setIsOverflowing(el.scrollHeight > el.offsetHeight);
+          }
+        }}
+        {...rest}
+      >
+        {children}
+      </span>
+      {isOverflowing && overflowMode === 'tooltip' && (
+        <Tooltip content={children} appendTo={() => document.body}>
+          <span tabIndex={0} className='isr-tooltip-icon'>
+            <SvgInfoCircular />
+          </span>
+        </Tooltip>
+      )}
+      {isButtonVisible && (
+        <Button
+          className='isr-line-clamp-button'
+          styleType='borderless'
+          size='small'
+          onClick={() => setIsOverflowing((overflowing) => !overflowing)}
+        >
+          {isOverflowing ? 'See more' : 'See less'}
+        </Button>
+      )}
+    </Element>
+  );
+};

src/components/utils/index.scss

@@ -1,4 +1,4 @@
-@import './ClampWithTooltip';
+@import './LineClamp';
 @import './StatusIcon';
 @import './TextWithIcon';
 @import './VisuallyHidden';

src/components/utils/index.tsx

@@ -1,3 +1,3 @@
-export * from './ClampWithTooltip';
+export * from './LineClamp';
 export * from './TextWithIcon';
 export * from './StatusIcon';