From bcc6edc5dc6142170cde40465ac0f5bb5ef946a4 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 23 Jul 2026 19:57:06 -0700
Subject: [PATCH] fix description/label styles to be consistent

---
 .../components/autocomplete/autocomplete.module.css    |  8 +++++++-
 src/shared/components/autocomplete/autocomplete.tsx    |  1 +
 .../components/color-input/color-input.module.css      |  8 +++++++-
 src/shared/components/color-input/color-input.tsx      |  1 +
 .../components/date-picker/date-picker.module.css      | 10 ++++++++++
 src/shared/components/date-picker/date-picker.tsx      |  2 ++
 .../date-time-picker/date-time-picker.module.css       | 10 ++++++++++
 .../components/date-time-picker/date-time-picker.tsx   |  1 +
 src/shared/components/file-input/file-input.module.css |  8 +++++++-
 src/shared/components/file-input/file-input.tsx        |  1 +
 src/shared/components/json-input/json-input.module.css |  8 +++++++-
 src/shared/components/json-input/json-input.tsx        |  1 +
 .../components/multi-select/multi-select.module.css    |  8 +++++++-
 src/shared/components/multi-select/multi-select.tsx    |  1 +
 .../components/number-input/number-input.module.css    |  8 +++++++-
 src/shared/components/number-input/number-input.tsx    |  1 +
 .../password-input/password-input.module.css           |  8 +++++++-
 .../components/password-input/password-input.tsx       |  1 +
 src/shared/components/select/select.module.css         |  8 +++++++-
 src/shared/components/select/select.tsx                |  1 +
 src/shared/components/tags-input/tags-input.module.css |  8 +++++++-
 src/shared/components/tags-input/tags-input.tsx        |  1 +
 src/shared/components/text-input/text-input.module.css |  8 +++++++-
 src/shared/components/text-input/text-input.tsx        |  1 +
 src/shared/components/textarea/textarea.module.css     |  8 +++++++-
 src/shared/components/textarea/textarea.tsx            |  1 +
 26 files changed, 111 insertions(+), 11 deletions(-)

diff --git a/src/shared/components/autocomplete/autocomplete.module.css b/src/shared/components/autocomplete/autocomplete.module.css
index 3a61a0c4d..d3af24845 100644
--- a/src/shared/components/autocomplete/autocomplete.module.css
+++ b/src/shared/components/autocomplete/autocomplete.module.css
@@ -25,7 +25,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .section {
diff --git a/src/shared/components/autocomplete/autocomplete.tsx b/src/shared/components/autocomplete/autocomplete.tsx
index 9070c7d70..f932d7d4b 100644
--- a/src/shared/components/autocomplete/autocomplete.tsx
+++ b/src/shared/components/autocomplete/autocomplete.tsx
@@ -26,6 +26,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
         return (
             <MantineAutocomplete
                 classNames={{
+                    description: styles.description,
                     dropdown: styles.dropdown,
                     input: styles.input,
                     label: styles.label,
diff --git a/src/shared/components/color-input/color-input.module.css b/src/shared/components/color-input/color-input.module.css
index 1a47f013f..b8b4007bc 100644
--- a/src/shared/components/color-input/color-input.module.css
+++ b/src/shared/components/color-input/color-input.module.css
@@ -25,7 +25,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {
diff --git a/src/shared/components/color-input/color-input.tsx b/src/shared/components/color-input/color-input.tsx
index ea7b6b61a..cd8c37e6b 100644
--- a/src/shared/components/color-input/color-input.tsx
+++ b/src/shared/components/color-input/color-input.tsx
@@ -16,6 +16,7 @@ export const ColorInput = ({
     return (
         <MantineColorInput
             classNames={{
+                description: styles.description,
                 dropdown: styles.dropdown,
                 input: styles.input,
                 label: styles.label,
diff --git a/src/shared/components/date-picker/date-picker.module.css b/src/shared/components/date-picker/date-picker.module.css
index 1d540394d..9d6ac450b 100644
--- a/src/shared/components/date-picker/date-picker.module.css
+++ b/src/shared/components/date-picker/date-picker.module.css
@@ -17,3 +17,13 @@
 .required {
     color: var(--theme-colors-state-error);
 }
+
+.label {
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}
diff --git a/src/shared/components/date-picker/date-picker.tsx b/src/shared/components/date-picker/date-picker.tsx
index dc31ca545..b0058e359 100644
--- a/src/shared/components/date-picker/date-picker.tsx
+++ b/src/shared/components/date-picker/date-picker.tsx
@@ -26,6 +26,7 @@ export const DateInput = ({
     return (
         <MantineDateInput
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,
@@ -56,6 +57,7 @@ export const DateTimeInput = ({
     return (
         <MantineDateTimeInput
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,
diff --git a/src/shared/components/date-time-picker/date-time-picker.module.css b/src/shared/components/date-time-picker/date-time-picker.module.css
index 1d540394d..9d6ac450b 100644
--- a/src/shared/components/date-time-picker/date-time-picker.module.css
+++ b/src/shared/components/date-time-picker/date-time-picker.module.css
@@ -17,3 +17,13 @@
 .required {
     color: var(--theme-colors-state-error);
 }
+
+.label {
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}
diff --git a/src/shared/components/date-time-picker/date-time-picker.tsx b/src/shared/components/date-time-picker/date-time-picker.tsx
index e9c3ffacc..75d412ef5 100644
--- a/src/shared/components/date-time-picker/date-time-picker.tsx
+++ b/src/shared/components/date-time-picker/date-time-picker.tsx
@@ -21,6 +21,7 @@ export const DateTimePicker = ({
     return (
         <MantineDateTimePicker
             classNames={{
+                description: styles.description,
                 input: styles.input,
                 label: styles.label,
                 required: styles.required,
diff --git a/src/shared/components/file-input/file-input.module.css b/src/shared/components/file-input/file-input.module.css
index d8f49d463..7285a806c 100644
--- a/src/shared/components/file-input/file-input.module.css
+++ b/src/shared/components/file-input/file-input.module.css
@@ -35,6 +35,12 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
     font-family: var(--theme-label-font-family);
 }
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}
diff --git a/src/shared/components/file-input/file-input.tsx b/src/shared/components/file-input/file-input.tsx
index a32c74bd1..510643208 100644
--- a/src/shared/components/file-input/file-input.tsx
+++ b/src/shared/components/file-input/file-input.tsx
@@ -28,6 +28,7 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
         return (
             <MantineFileInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,
diff --git a/src/shared/components/json-input/json-input.module.css b/src/shared/components/json-input/json-input.module.css
index d5fc4f178..06f0ecf4c 100644
--- a/src/shared/components/json-input/json-input.module.css
+++ b/src/shared/components/json-input/json-input.module.css
@@ -35,5 +35,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
diff --git a/src/shared/components/json-input/json-input.tsx b/src/shared/components/json-input/json-input.tsx
index 2b37d7ea3..6c7a68088 100644
--- a/src/shared/components/json-input/json-input.tsx
+++ b/src/shared/components/json-input/json-input.tsx
@@ -28,6 +28,7 @@ export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
         return (
             <MantineJsonInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,
diff --git a/src/shared/components/multi-select/multi-select.module.css b/src/shared/components/multi-select/multi-select.module.css
index a536577ec..81fee220c 100644
--- a/src/shared/components/multi-select/multi-select.module.css
+++ b/src/shared/components/multi-select/multi-select.module.css
@@ -5,7 +5,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {
diff --git a/src/shared/components/multi-select/multi-select.tsx b/src/shared/components/multi-select/multi-select.tsx
index 87cd6452c..19d0c49d8 100644
--- a/src/shared/components/multi-select/multi-select.tsx
+++ b/src/shared/components/multi-select/multi-select.tsx
@@ -12,6 +12,7 @@ export interface MultiSelectProps extends MantineMultiSelectProps {
 }
 
 const defaultClassNames = {
+    description: styles.description,
     dropdown: styles.dropdown,
     input: styles.input,
     label: styles.label,
diff --git a/src/shared/components/number-input/number-input.module.css b/src/shared/components/number-input/number-input.module.css
index 26002f2d3..bbaa89455 100644
--- a/src/shared/components/number-input/number-input.module.css
+++ b/src/shared/components/number-input/number-input.module.css
@@ -42,5 +42,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
diff --git a/src/shared/components/number-input/number-input.tsx b/src/shared/components/number-input/number-input.tsx
index be35abe67..76b7e1a00 100644
--- a/src/shared/components/number-input/number-input.tsx
+++ b/src/shared/components/number-input/number-input.tsx
@@ -31,6 +31,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             <MantineNumberInput
                 classNames={{
                     control: styles.control,
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,
diff --git a/src/shared/components/password-input/password-input.module.css b/src/shared/components/password-input/password-input.module.css
index 91d45cc3f..523778a5d 100644
--- a/src/shared/components/password-input/password-input.module.css
+++ b/src/shared/components/password-input/password-input.module.css
@@ -35,5 +35,11 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
diff --git a/src/shared/components/password-input/password-input.tsx b/src/shared/components/password-input/password-input.tsx
index dfa839fa8..f55bd7551 100644
--- a/src/shared/components/password-input/password-input.tsx
+++ b/src/shared/components/password-input/password-input.tsx
@@ -16,6 +16,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         return (
             <MantinePasswordInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,
diff --git a/src/shared/components/select/select.module.css b/src/shared/components/select/select.module.css
index 568f0ed08..e114e8dfb 100644
--- a/src/shared/components/select/select.module.css
+++ b/src/shared/components/select/select.module.css
@@ -25,7 +25,7 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
 }
 
 .dropdown {
@@ -57,3 +57,9 @@
 .option:hover {
     background: lighten(var(--theme-colors-surface), 5%);
 }
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
+}
diff --git a/src/shared/components/select/select.tsx b/src/shared/components/select/select.tsx
index de012025d..dc54de73b 100644
--- a/src/shared/components/select/select.tsx
+++ b/src/shared/components/select/select.tsx
@@ -23,6 +23,7 @@ export const Select = ({
         <MantineSelect
             allowDeselect={allowDeselect || clearable}
             classNames={{
+                description: styles.description,
                 dropdown: styles.dropdown,
                 input: styles.input,
                 label: styles.label,
diff --git a/src/shared/components/tags-input/tags-input.module.css b/src/shared/components/tags-input/tags-input.module.css
index 535a94aa3..879691206 100644
--- a/src/shared/components/tags-input/tags-input.module.css
+++ b/src/shared/components/tags-input/tags-input.module.css
@@ -5,7 +5,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .dropdown {
diff --git a/src/shared/components/tags-input/tags-input.tsx b/src/shared/components/tags-input/tags-input.tsx
index 4c7232e3f..64b480181 100644
--- a/src/shared/components/tags-input/tags-input.tsx
+++ b/src/shared/components/tags-input/tags-input.tsx
@@ -12,6 +12,7 @@ export interface TagsInputProps extends MantineTagsInputProps {
 }
 
 const defaultClassNames = {
+    description: styles.description,
     dropdown: styles.dropdown,
     input: styles.input,
     inputField: styles.inputField,
diff --git a/src/shared/components/text-input/text-input.module.css b/src/shared/components/text-input/text-input.module.css
index 2f5cbfbb3..9018d8b9f 100644
--- a/src/shared/components/text-input/text-input.module.css
+++ b/src/shared/components/text-input/text-input.module.css
@@ -23,7 +23,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .section {
diff --git a/src/shared/components/text-input/text-input.tsx b/src/shared/components/text-input/text-input.tsx
index 601030186..2ffb69c07 100644
--- a/src/shared/components/text-input/text-input.tsx
+++ b/src/shared/components/text-input/text-input.tsx
@@ -28,6 +28,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         return (
             <MantineTextInput
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,
diff --git a/src/shared/components/textarea/textarea.module.css b/src/shared/components/textarea/textarea.module.css
index a232a41ef..9319f5a1d 100644
--- a/src/shared/components/textarea/textarea.module.css
+++ b/src/shared/components/textarea/textarea.module.css
@@ -23,7 +23,13 @@
 }
 
 .label {
-    margin-bottom: var(--theme-spacing-sm);
+    margin-bottom: var(--theme-spacing-xs);
+}
+
+.description {
+    margin-bottom: var(--theme-spacing-xs);
+    font-size: var(--theme-font-size-xs);
+    color: var(--theme-colors-foreground-muted);
 }
 
 .required {
diff --git a/src/shared/components/textarea/textarea.tsx b/src/shared/components/textarea/textarea.tsx
index a35beec00..07d627171 100644
--- a/src/shared/components/textarea/textarea.tsx
+++ b/src/shared/components/textarea/textarea.tsx
@@ -25,6 +25,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         return (
             <MantineTextarea
                 classNames={{
+                    description: styles.description,
                     input: styles.input,
                     label: styles.label,
                     required: styles.required,