WIP - quick fix to page layout grid

frontend/components/PageLayoutRenderer.vue

@@ -1,15 +1,14 @@
 <template>
-  <div class="page-layout-renderer">
+  <div class="page-layout-renderer w-full">
     <div
       v-if="layout && layout.fields.length > 0"
-      class="grid gap-4"
-      :style="gridStyle"
+      class="grid grid-cols-6 gap-4 auto-rows-[80px]"
     >
       <div
         v-for="fieldItem in sortedFields"
         :key="fieldItem.fieldId"
         :style="getFieldStyle(fieldItem)"
-        class="field-container"
+        class="flex flex-col min-h-[60px]"
       >
         <FieldRenderer
           v-if="fieldItem.field"
@@ -26,7 +25,7 @@
       <div
         v-for="field in fields"
         :key="field.id"
-        class="field-container"
+        class="flex flex-col min-h-[60px]"
       >
         <FieldRenderer
           :field="field"
@@ -57,14 +56,6 @@ const emit = defineEmits<{
   'update:modelValue': [value: Record<string, any>]
 }>()
 
-// Grid configuration for 6 columns
-const GRID_COLUMNS = 6
-const gridStyle = computed(() => ({
-  display: 'grid',
-  gridTemplateColumns: `repeat(${GRID_COLUMNS}, 1fr)`,
-  gap: '1rem',
-}))
-
 // Map field IDs to field objects and sort by position
 const sortedFields = computed(() => {
   if (!props.layout || !props.layout.fields) return []
@@ -106,13 +97,5 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
 </script>
 
 <style scoped>
-.page-layout-renderer {
-  width: 100%;
-}
-
-.field-container {
-  min-height: 60px;
-  display: flex;
-  flex-direction: column;
-}
+/* Additional styles if needed */
 </style>