Bugfix: fix long suite name display in front-end (#621)

<!-- Please provide brief information about the PR, what it contains &
its purpose, new behaviors after the change. And let us know here if you
need any help: https://github.com/microsoft/HydraLab/issues/new -->

## Description

<!-- A few words to explain your changes -->

### Linked GitHub issue ID: #  

## Pull Request Checklist
<!-- Put an x in the boxes that apply. This is simply a reminder of what
we are going to look for before merging your code. -->

- [ ] Tests for the changes have been added (for bug fixes / features)
- [x] Code compiles correctly with all tests are passed.
- [x] I've read the [contributing
guide](https://github.com/microsoft/HydraLab/blob/main/CONTRIBUTING.md#making-changes-to-the-code)
and followed the recommended practices.
- [x] [Wikis](https://github.com/microsoft/HydraLab/wiki) or
[README](https://github.com/microsoft/HydraLab/blob/main/README.md) have
been reviewed and added / updated if needed (for bug fixes / features)

### Does this introduce a breaking change?
*If this introduces a breaking change for Hydra Lab users, please
describe the impact and migration path.*

- [ ] Yes
- [x] No

## How you tested it
*Please make sure the change is tested, you can test it by adding UTs,
do local test and share the screenshots, etc.*

![image](https://github.com/microsoft/HydraLab/assets/26757995/3e1a3b2f-8e23-4b1d-b292-43c2ae6e8514)


Please check the type of change your PR introduces:
- [x] Bugfix
- [ ] Feature
- [ ] Technical design
- [ ] Build related changes
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Code style update (formatting, renaming) or Documentation content
changes
- [ ] Other (please describe): 

### Feature UI screenshots or Technical design diagrams
*If this is a relatively large or complex change, kick it off by drawing
the tech design with PlantUML and explaining why you chose the solution
you did and what alternatives you considered, etc...*

react/src/component/TasksView.jsx

@@ -467,8 +467,11 @@ class TasksView extends BaseView {
                 <span className='badge badge-success'
                       style={{fontSize: 16}}>Queue Position : {task.queuedInfo[0]}</span>
             </TableCell>
-            <TableCell id={task.testTaskSpec.testTaskId} align="center">
-                {task.testTaskSpec.testSuiteClass}
+            <TableCell id={task.testTaskSpec.testTaskId} align="center" style={{maxWidth: '400px'}}>
+                {task.testTaskSpec.testSuiteClass.length > 100 ? task.testTaskSpec.testSuiteClass.substring(0, 100) + '...' : task.testTaskSpec.testSuiteClass}
+                <IconButton onClick={() => this.copyContent(task.testTaskSpec.testSuiteClass)}>
+                        <span className="material-icons-outlined">content_copy</span>
+                </IconButton>
             </TableCell>
             <TableCell id={task.testTaskSpec.testTaskId} align="center">
                 {this.getTestType(task.testTaskSpec)}
@@ -495,8 +498,11 @@ class TasksView extends BaseView {
                     {moment(task.startDate).format('yyyy-MM-DD HH:mm:ss')} <span
                     className='badge badge-success'>Running</span>
                 </TableCell>
-                <TableCell id={task.id} align="center">
-                    {task.testSuite}
+                <TableCell id={task.id} align="center" style={{maxWidth: '400px'}}>
+                    {task.testSuite.length > 100 ? task.testSuite.substring(0, 100) + '...' : task.testSuite}
+                    <IconButton onClick={() => this.copyContent(task.testSuite)}>
+                            <span className="material-icons-outlined">content_copy</span>
+                    </IconButton>
                 </TableCell>
                 <TableCell id={task.id} align="center">
                     {this.getTestType(task)}