munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(detail-row): adjust grid layout and spacing for better responsiveness

Browse Source 
Update the grid template columns and gap spacing to improve mobile and desktop layouts. Hide colon separator on mobile views to reduce clutter.
This commit is contained in:
Khafid Prayoga
2025-12-03 21:09:17 +07:00
parent 6d8b4e9a78
commit c0c80c7bff
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/my-ui/form/view/detail-row.vue
+3 -3
View File
@@ -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">