fix: alignment of settings on ManagementAccess settings page (#1421)

## Summary by CodeRabbit

- **Refactor**
- Removed description text display from a form field for a cleaner
interface.
- Enhanced form field matching to better target specific string array
inputs.
- Updated remote access settings UI for clearer layout and separation of
title and details.
  - Adjusted label container styling to allow more flexible width.
- Improved grouping of precondition information for better visual
structure.
  - Added a colon to the SSO users settings label for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1210572375587668

api/src/unraid-api/graph/resolvers/settings/settings.service.ts

@@ -146,7 +146,7 @@ export class ApiSettings {
             elements: [
                 createLabeledControl({
                     scope: '#/properties/api/properties/ssoSubIds',
-                    label: 'Unraid Connect SSO Users',
+                    label: 'Unraid Connect SSO Users:',
                     description: `Provide a list of Unique Unraid Account IDs. Find yours at <a href="https://account.unraid.net/settings" target="_blank" rel="noopener noreferrer">account.unraid.net/settings</a>. Requires restart if adding first user.`,
                     controlOptions: {
                         inputType: 'text',

packages/unraid-api-plugin-connect/src/service/connect-settings.service.ts

@@ -293,6 +293,13 @@ export class ConnectSettingsService {
 
         /** shown when preconditions are not met */
         const requirements: UIElement[] = [
+            {
+                type: 'UnraidSettingsLayout',
+                elements: [
+                    {
+                        type: 'Label',
+                        text: 'Allow Remote Access:',
+                    },
                     {
                         type: 'Label',
                         text: 'Allow Remote Access',
@@ -311,6 +318,8 @@ export class ConnectSettingsService {
                             ],
                         },
                     },
+                ],
+            },
         ];
 
         /** shown when preconditions are met */

unraid-ui/src/forms/LabelRenderer.vue

@@ -70,7 +70,7 @@ const descriptionClass = computed(() => {
 
 <template>
   <!-- Use the computed isVisible based on renderer.value.visible -->
-  <div class="flex flex-col gap-2 max-w-lg flex-shrink-0">
+  <div class="flex flex-col gap-2 flex-shrink-0">
     <!-- Replace native label with the Label component -->
     <Label v-if="labelText" :class="labelClass">{{ labelText }}</Label>
     <!-- Use v-html with the parsedDescription ref -->

unraid-ui/src/forms/PreconditionsLabel.vue

@@ -28,6 +28,7 @@ const description = computed(() => props.uischema.options?.description);
 
 <template>
   <!-- Render each precondition as a list item with an icon bullet -->
+  <div>
     <p v-if="description" class="mb-2">{{ description }}</p>
     <ul class="list-none space-y-1">
       <li v-for="(item, index) in items" :key="index" class="flex items-center">
@@ -36,4 +37,5 @@ const description = computed(() => props.uischema.options?.description);
         <span>{{ item.text }}</span>
       </li>
     </ul>
+  </div>
 </template>

unraid-ui/src/forms/StringArrayField.vue

@@ -41,7 +41,6 @@ const placeholder = computed(() => control.value.uischema?.options?.placeholder
 
 <template>
   <div class="space-y-4">
-    <p v-if="control.description" v-html="control.description" />
     <div v-for="(item, index) in items" :key="index" class="flex gap-2">
       <Input
         :type="inputType"

unraid-ui/src/forms/renderers.ts

@@ -92,7 +92,7 @@ export const jsonFormsRenderers: JsonFormsRendererRegistryEntry[] = [
   },
   {
     renderer: markRaw(withErrorWrapper(StringArrayField)),
-    tester: rankWith(4, and(isControl, schemaMatches(isStringArray))),
+    tester: rankWith(4, and(isControl, schemaMatches(isStringArray), optionIs('format', 'array'))),
   },
   // Labels
   {