fix: make settings grid responsive (#1463)

pujitm · web-flow · commit 9dfdb8dce781 · 2025-07-22T09:21:35.000-04:00
&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;
## 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.
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/unraid-ui/src/components/layout/SettingsGrid.vue b/unraid-ui/src/components/layout/SettingsGrid.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+  class?: string;
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('settings-grid grid gap-2 items-baseline md:pl-3 md:gap-x-10 md:gap-y-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.settings-grid {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .settings-grid {
+    grid-template-columns: 35% 1fr;
+  }
+
+  .settings-grid > *:nth-child(odd) {
+    text-align: end;
+  }
+}
+</style>
diff --git 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
@@ -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/unraid-ui/src/styles/globals.css b/unraid-ui/src/styles/globals.css
@@ -168,9 +168,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;
diff --git 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
