fix: make settings grid responsive (#1463)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a new SettingsGrid component for consistent and responsive
grid layouts.

* **Refactor**
* Updated settings-related layouts to use the new SettingsGrid
component, improving maintainability and visual consistency across the
interface.

* **Chores**
  * Removed an unused CSS breakpoint variable from global styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

web/components/ConnectSettings/ConnectSettings.ce.vue

@@ -8,7 +8,7 @@ import { storeToRefs } from 'pinia';
 import { watchDebounced } from '@vueuse/core';
 import { useMutation, useQuery } from '@vue/apollo-composable';
 
-import { BrandButton, jsonFormsRenderers, Label } from '@unraid/ui';
+import { BrandButton, jsonFormsRenderers, Label, SettingsGrid } from '@unraid/ui';
 import { JsonForms } from '@jsonforms/vue';
 
 import { useServerStore } from '~/store/server';
@@ -102,9 +102,7 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
 
 <template>
   <!-- common api-related actions -->
-  <div
-    class="grid grid-cols-settings items-baseline pl-3 gap-y-6 [&>*:nth-child(odd)]:text-end [&>*:nth-child(even)]:ml-10"
-  >
+  <SettingsGrid>
     <template v-if="connectPluginInstalled">
       <Label>Account Status:</Label>
       <div v-html="'<unraid-auth></unraid-auth>'"/>
@@ -115,7 +113,7 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
         '<unraid-download-api-logs></unraid-download-api-logs>'
       "
     />
-  </div>
+  </SettingsGrid>
   <!-- auto-generated settings form -->
   <div class="mt-6 pl-3 [&_.vertical-layout]:space-y-6">
     <JsonForms