style: Add flex-wrap and tag resource group text for improved readabi…

…lity. (#2954)

resolves #2955

**Changes:**
Enhances the session detail view by wrapping the resource allocation section and displaying the scaling group inside a Tag component for better visual hierarchy and consistency.

**Impact:**
Users will see a clearer, more visually distinct scaling group indicator in the session details, with improved wrapping behavior for resource allocation information.

**Before:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/a9275bb6-3123-420b-b47e-1007aab51d67.png)

**After:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/7a413e0a-8afc-4b5f-b9d6-ce0a89b95818.png)

**Checklist:**
- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/SessionDetailContent.tsx

@@ -17,6 +17,7 @@ import {
   Button,
   Descriptions,
   Grid,
+  Tag,
   theme,
   Tooltip,
   Typography,
@@ -188,9 +189,9 @@ const SessionDetailContent: React.FC<{
           {legacy_session?.mounts?.join(', ')}
         </Descriptions.Item>
         <Descriptions.Item label={t('session.launcher.ResourceAllocation')}>
-          <Flex gap={'sm'}>
+          <Flex gap={'sm'} wrap="wrap">
             <Tooltip title={t('session.ResourceGroup')}>
-              {session.scaling_group}
+              <Tag>{session.scaling_group}</Tag>
             </Tooltip>
             <ResourceNumbersOfSession
               resource={JSON.parse(session.requested_slots || '{}')}