From c0c80c7bff747be9f65a7f948957fbced5fef1fd Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Dec 2025 21:09:17 +0700
Subject: [PATCH] style(detail-row): adjust grid layout and spacing for better
 responsiveness

Update the grid template columns and gap spacing to improve mobile and desktop layouts. Hide colon separator on mobile views to reduce clutter.
---
 app/components/pub/my-ui/form/view/detail-row.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/pub/my-ui/form/view/detail-row.vue b/app/components/pub/my-ui/form/view/detail-row.vue
index 3803cf30..15b2ba67 100644
--- a/app/components/pub/my-ui/form/view/detail-row.vue
+++ b/app/components/pub/my-ui/form/view/detail-row.vue
@@ -9,14 +9,14 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(`flex flex-col gap-1 lg:grid lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-x-3`, props.class)">
+  <div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
     <!-- Label -->
     <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
       {{ label }}
     </span>
 
-    <!-- Colon -->
-    <span class="text-md tracking-wide text-muted-foreground">:</span>
+    <!-- Colon (hidden on mobile) -->
+    <span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>
 
     <!-- Value -->
     <span class="text-md font-sans tracking-wide">