From 6b3c4001975a789be7d60e20e3add86b6775398a Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Thu, 3 Jul 2025 14:41:43 -0400
Subject: [PATCH 1/3] fix: make settings grid responsive

---
 .../src/components/layout/SettingsGrid.vue    | 20 +++++++++++++++++++
 unraid-ui/src/components/layout/index.ts      |  3 ++-
 unraid-ui/src/forms/UnraidSettingsLayout.vue  |  8 +++-----
 .../ConnectSettings/ConnectSettings.ce.vue    |  8 +++-----
 4 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 unraid-ui/src/components/layout/SettingsGrid.vue

diff --git a/unraid-ui/src/components/layout/SettingsGrid.vue b/unraid-ui/src/components/layout/SettingsGrid.vue
new file mode 100644
index 0000000000..98a01e2e2f
--- /dev/null
+++ b/unraid-ui/src/components/layout/SettingsGrid.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: string;
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'grid grid-cols-1 gap-2 md:grid-cols-settings items-baseline md:pl-3 md:gap-y-6 md:[&>*:nth-child(odd)]:text-end md:[&>*:nth-child(even)]:ml-10',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/unraid-ui/src/components/layout/index.ts b/unraid-ui/src/components/layout/index.ts
index 4025b83941..35015c0618 100644
--- a/unraid-ui/src/components/layout/index.ts
+++ b/unraid-ui/src/components/layout/index.ts
@@ -1,4 +1,5 @@
 import CardWrapper from '@/components/layout/CardWrapper.vue';
 import PageContainer from '@/components/layout/PageContainer.vue';
+import SettingsGrid from '@/components/layout/SettingsGrid.vue';
 
-export { CardWrapper, PageContainer };
+export { CardWrapper, PageContainer, SettingsGrid };
diff --git a/unraid-ui/src/forms/UnraidSettingsLayout.vue b/unraid-ui/src/forms/UnraidSettingsLayout.vue
index cee5c93db6..5b86d7b5b9 100644
--- a/unraid-ui/src/forms/UnraidSettingsLayout.vue
+++ b/unraid-ui/src/forms/UnraidSettingsLayout.vue
@@ -15,6 +15,7 @@
  * @prop cells - Available cells
  */
 
+import SettingsGrid from '@/components/layout/SettingsGrid.vue';
 import { useJsonFormsVisibility } from '@/forms/composables/useJsonFormsVisibility';
 import type { HorizontalLayout } from '@jsonforms/core';
 import { DispatchRenderer, type RendererProps } from '@jsonforms/vue';
@@ -32,10 +33,7 @@ const elements = computed(() => {
 </script>
 
 <template>
-  <div
-    v-if="isVisible"
-    class="grid grid-cols-settings items-baseline pl-3 gap-y-6 [&>*:nth-child(odd)]:text-end [&>*:nth-child(even)]:ml-10"
-  >
+  <SettingsGrid v-if="isVisible">
     <template v-for="(element, _i) in elements" :key="_i">
       <DispatchRenderer
         :schema="layout.layout.value.schema"
@@ -46,5 +44,5 @@ const elements = computed(() => {
         :cells="layout.layout.value.cells"
       />
     </template>
-  </div>
+  </SettingsGrid>
 </template>
diff --git a/web/components/ConnectSettings/ConnectSettings.ce.vue b/web/components/ConnectSettings/ConnectSettings.ce.vue
index 0e93d43bf7..06f4ca8ba9 100644
--- a/web/components/ConnectSettings/ConnectSettings.ce.vue
+++ b/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

From 0094874ed863f0d750c7ffbca301b363bccf7bd6 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 21 Jul 2025 13:43:18 -0400
Subject: [PATCH 2/3] use css in component

---
 unraid-ui/src/components/layout/SettingsGrid.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/unraid-ui/src/components/layout/SettingsGrid.vue b/unraid-ui/src/components/layout/SettingsGrid.vue
index 98a01e2e2f..3fe526b95c 100644
--- a/unraid-ui/src/components/layout/SettingsGrid.vue
+++ b/unraid-ui/src/components/layout/SettingsGrid.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'grid grid-cols-1 gap-2 md:grid-cols-settings items-baseline md:pl-3 md:gap-y-6 md:[&>*:nth-child(odd)]:text-end md:[&>*:nth-child(even)]:ml-10',
+        'settings-grid grid gap-2 items-baseline md:pl-3 md:gap-x-8 md:gap-y-6 md:[&>*:nth-child(odd)]:text-end',
         props.class
       )
     "
@@ -18,3 +18,15 @@ const props = defineProps<{
     <slot />
   </div>
 </template>
+
+<style>
+.settings-grid {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 35% 1fr;
+  }
+}
+</style>

From 5a4a4101a8c553b1e14d7c51502592cc4867c962 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujit@lime-technology.com>
Date: Mon, 21 Jul 2025 14:10:20 -0400
Subject: [PATCH 3/3] fix: breakpoint init

---
 unraid-ui/src/components/layout/SettingsGrid.vue | 11 +++++------
 unraid-ui/src/styles/globals.css                 |  3 ---
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/unraid-ui/src/components/layout/SettingsGrid.vue b/unraid-ui/src/components/layout/SettingsGrid.vue
index 3fe526b95c..52df5c1849 100644
--- a/unraid-ui/src/components/layout/SettingsGrid.vue
+++ b/unraid-ui/src/components/layout/SettingsGrid.vue
@@ -8,12 +8,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="
-      cn(
-        'settings-grid grid gap-2 items-baseline md:pl-3 md:gap-x-8 md:gap-y-6 md:[&>*:nth-child(odd)]:text-end',
-        props.class
-      )
-    "
+    :class="cn('settings-grid grid gap-2 items-baseline md:pl-3 md:gap-x-10 md:gap-y-6', props.class)"
   >
     <slot />
   </div>
@@ -28,5 +23,9 @@ const props = defineProps<{
   .settings-grid {
     grid-template-columns: 35% 1fr;
   }
+
+  .settings-grid > *:nth-child(odd) {
+    text-align: end;
+  }
 }
 </style>
diff --git a/unraid-ui/src/styles/globals.css b/unraid-ui/src/styles/globals.css
index 5189f61e38..109fa9a31d 100644
--- a/unraid-ui/src/styles/globals.css
+++ b/unraid-ui/src/styles/globals.css
@@ -169,9 +169,6 @@
   --max-width-800px: 800px;
   --max-width-1024px: 1024px;
 
-  /* Breakpoints */
-  --breakpoint-*: initial;
-
   /* Animations */
   --animate-mark-2: mark-2 1.5s ease infinite;
   --animate-mark-3: mark-3 1.5s ease infinite;