From e9bf6fb3ab0efa27993e87498c4f64833d77eb22 Mon Sep 17 00:00:00 2001
From: Nikhil M Warrier <nikhilmw.dev@gmail.com>
Date: Sun, 15 Mar 2026 19:23:59 +0530
Subject: Fix forms UI

---
 src/components/FormField.astro | 2 +-
 src/pages/forms/[...id].astro  | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/FormField.astro b/src/components/FormField.astro
index f03403d..cdb7649 100644
--- a/src/components/FormField.astro
+++ b/src/components/FormField.astro
@@ -11,7 +11,7 @@ const fieldType = field.type as astroHTML.JSX.HTMLInputTypeAttribute
 
 <div class="flex w-full flex-col gap-2">
   <label for={field.id} class="text-muted-foreground pl-1">
-    {field.label}
+    {field.label}&nbsp;<span class="text-primary/30">*</span>
   </label>
 
   {
diff --git a/src/pages/forms/[...id].astro b/src/pages/forms/[...id].astro
index cadf14a..39a8ad2 100644
--- a/src/pages/forms/[...id].astro
+++ b/src/pages/forms/[...id].astro
@@ -46,10 +46,12 @@ const fields = Astro.props.data.form.fields
       class="flex w-full flex-col items-start gap-12"
     >
       {fields.map((field) => <FormField field={field} />)}
-      <div class="flex w-full items-center justify-end gap-4">
+      <div
+        class="ml-auto grid w-full grid-cols-2 items-center justify-end gap-4 md:w-auto md:grid-cols-3"
+      >
         <span
           id="save-indicator"
-          class="text-muted-foreground ext-sm flex items-center justify-center gap-2 opacity-0 transition-opacity duration-300"
+          class="text-muted-foreground ext-sm col-span-2 flex items-center justify-center gap-2 opacity-0 transition-opacity duration-300 md:col-span-1"
         >
           <Icon name="lucide:check" class="text-primary" />
           Draft autosaved
-- 
cgit v1.2.3