fix wrapping behavior

Author: jenny-s51

workspaces/frontend/src/app/components/WorkspaceTable.tsx

@@ -60,10 +60,10 @@ const {
   sortableKeyArray: sortableWsTableColumnKeyArray,
   filterableKeyArray: filterableWsTableColumnKeyArray,
 } = defineDataFields({
-  name: { label: 'Name', isFilterable: true, isSortable: true, width: 25 },
-  kind: { label: 'Kind', isFilterable: true, isSortable: true, width: 20 },
+  name: { label: 'Name', isFilterable: true, isSortable: true, width: 35 },
+  kind: { label: 'Kind', isFilterable: true, isSortable: true, width: 30 },
   namespace: { label: 'Namespace', isFilterable: true, isSortable: true, width: 15 },
-  image: { label: 'Image', isFilterable: true, isSortable: true, width: 25 },
+  image: { label: 'Image', isFilterable: true, isSortable: true, width: 30 },
   state: { label: 'State', isFilterable: true, isSortable: true, width: 15 },
   gpu: { label: 'GPU', isFilterable: true, isSortable: true, width: 15 },
   idleGpu: { label: 'Idle GPU', isFilterable: true, isSortable: true, width: 15 },
@@ -384,7 +384,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                   key="workspace-table-column-name"
                   sort={getSortParams('name')}
                   aria-label="name"
-                  modifier="wrap"
+                  modifier="nowrap"
                 >
                   {wsTableColumns.name.label}
                 </Th>
@@ -406,7 +406,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                   key="workspace-table-column-kind"
                   sort={getSortParams('kind')}
                   aria-label="kind"
-                  modifier="wrap"
+                  modifier="nowrap"
                 >
                   {wsTableColumns.kind.label}
                 </Th>
@@ -450,7 +450,6 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                   key="workspace-table-column-idleGpu"
                   sort={getSortParams('idleGpu')}
                   aria-label="idleGpu"
-                  modifier="wrap"
                 >
                   {wsTableColumns.idleGpu.label}
                 </Th>
@@ -461,7 +460,6 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                   key="workspace-table-column-lastActivity"
                   sort={getSortParams('lastActivity')}
                   aria-label="lastActivity"
-                  modifier="wrap"
                 >
                   {wsTableColumns.lastActivity.label}
                 </Th>

workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx

@@ -45,12 +45,14 @@ export const DataVolumesList: React.FC<DataVolumesListProps> = ({ workspace }) =
             </Tooltip>
           )}
         </Content>
-        <Content component="small">
-          Mount path:{' '}
-          <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact}>
-            {data.mountPath}
-          </ClipboardCopy>
-        </Content>
+        <Flex gap={{ default: 'gapSm' }} flexWrap={{ default: 'wrap' }}>
+          <FlexItem>Mount path:</FlexItem>
+          <FlexItem>
+            <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} isCode>
+              {data.mountPath}
+            </ClipboardCopy>
+          </FlexItem>
+        </Flex>
       </FlexItem>
     </Flex>
   );

workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx

@@ -38,7 +38,7 @@ export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
       {Array.from({ length: totalColumns }, (_, index) => {
         if (index === storageColumnIndex) {
           return (
-            <Td key={`storage-${index}`} dataLabel="Storage">
+            <Td key={`storage-${index}`} dataLabel="Storage" modifier="nowrap">
               <ExpandableRowContent>
                 <WorkspaceStorage workspace={workspace} />
               </ExpandableRowContent>
@@ -48,7 +48,7 @@ export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
 
         if (index === packageColumnIndex) {
           return (
-            <Td key={`package-${index}`}>
+            <Td key={`package-${index}`} modifier="nowrap">
               <ExpandableRowContent>
                 <WorkspacePackageDetails workspace={workspace} />
               </ExpandableRowContent>
@@ -58,7 +58,7 @@ export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
 
         if (index === configColumnIndex) {
           return (
-            <Td key={`config-${index}`}>
+            <Td key={`config-${index}`} modifier="nowrap">
               <ExpandableRowContent>
                 <WorkspaceConfigDetails workspace={workspace} />
               </ExpandableRowContent>