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

@@ -294,22 +294,31 @@ export class ConnectSettingsService {
         /** shown when preconditions are not met */
         const requirements: UIElement[] = [
             {
-                type: 'Label',
+                type: 'UnraidSettingsLayout',
-                text: 'Allow Remote Access',
+                elements: [
-                options: {
+                    {
-                    format: 'preconditions',
+                        type: 'Label',
-                    description: 'Remote Access is disabled. To enable, please make sure:',
+                        text: 'Allow Remote Access:',
-                    items: [
+                    },
-                        {
+                    {
-                            text: 'You are signed in to Unraid Connect',
+                        type: 'Label',
-                            status: isSignedIn,
+                        text: 'Allow Remote Access',
+                        options: {
+                            format: 'preconditions',
+                            description: 'Remote Access is disabled. To enable, please make sure:',
+                            items: [
+                                {
+                                    text: 'You are signed in to Unraid Connect',
+                                    status: isSignedIn,
+                                },
+                                {
+                                    text: 'You have provisioned a valid SSL certificate',
+                                    status: isSSLCertProvisioned,
+                                },
+                            ],
                         },
-                        {
+                    },
-                            text: 'You have provisioned a valid SSL certificate',
+                ],
-                            status: isSSLCertProvisioned,
-                        },
-                    ],
-                },
             },
         ];
 

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,12 +28,14 @@ const description = computed(() => props.uischema.options?.description);
 
 <template>
   <!-- Render each precondition as a list item with an icon bullet -->
-  <p v-if="description" class="mb-2">{{ description }}</p>
+  <div>
-  <ul class="list-none space-y-1">
+    <p v-if="description" class="mb-2">{{ description }}</p>
-    <li v-for="(item, index) in items" :key="index" class="flex items-center">
+    <ul class="list-none space-y-1">
-      <span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
-      <span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
+        <span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
-      <span>{{ item.text }}</span>
+        <span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
-    </li>
+        <span>{{ item.text }}</span>
-  </ul>
+      </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
   {