WIP

frontend/components/PageLayoutRenderer.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="page-layout-renderer w-full">
+  <div class="page-layout-renderer">
     <div
       v-if="layout && layout.fields.length > 0"
-      class="grid grid-cols-6 gap-4 auto-rows-[80px]"
+      class="grid gap-4"
+      :style="gridStyle"
     >
       <div
         v-for="fieldItem in sortedFields"
         :key="fieldItem.fieldId"
         :style="getFieldStyle(fieldItem)"
-        class="flex flex-col min-h-[60px]"
+        class="field-container"
       >
         <FieldRenderer
           v-if="fieldItem.field"
@@ -25,7 +26,7 @@
       <div
         v-for="field in fields"
         :key="field.id"
-        class="flex flex-col min-h-[60px]"
+        class="field-container"
       >
         <FieldRenderer
           :field="field"
@@ -56,6 +57,14 @@ 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 []
@@ -97,5 +106,13 @@ const handleFieldUpdate = (fieldName: string, value: any) => {
 </script>
 
 <style scoped>
-/* Additional styles if needed */
+.page-layout-renderer {
+  width: 100%;
+}
+
+.field-container {
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
+}
 </style>

frontend/pages/[objectName]/[[recordId]]/[[view]].vue

@@ -297,6 +297,7 @@ onMounted(async () => {
 
 <style scoped>
 .object-view-container {
+  min-height: 100vh;
   padding: 2rem;
 }
 </style>