feat: Add option to display the tab list over the full width of the page

README.md

@@ -29,3 +29,10 @@ When creating a new field you can select `Tab Group` in the `Groups` section.
 
 Alternatively you can change the interface of an existing group field in the
 `Interface` section.
+
+### Options
+
+- `Overwrite Group Width`: If checked, force Directus to display the tab list in the "Fill Width" mode.
+Normally, the width option is not available for groups, but so far no problems have been encountered. Please open an
+issue if you encounter any visual bugs.
+

src/group-tabs.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
 		badge?: string;
 		rawEditorEnabled?: boolean;
 		direction?: string;
+		fillWidth?: boolean;
 	}>(),
 	{
 		batchActiveFields: () => [],
@@ -87,6 +88,7 @@ function useComputedGroup() {
 		:values="groupValues"
 		:validation-errors="validationErrors!"
 		class="group-tabs"
+		:class="fillWidth && 'fill'"
 	>
 		<template v-for="(groupField, index) in groupFields" :key="groupField.field">
 			<tab-panel

src/index.ts

@@ -12,5 +12,22 @@ export default {
 	types: ['alias'],
 	localTypes: ['group'],
 	group: 'group',
-	options: [],
+	options: [
+		{
+			field: 'fillWidth',
+			type: 'boolean',
+			name: 'Overwrite Group Width',
+			meta: {
+				interface: 'boolean',
+				note: 'Normally groups can not fill the width of the page. This option allows you to overwrite that.',
+				options: {
+					label: 'Fill Width',
+				},
+				width: 'half',
+			},
+			schema: {
+				default_value: false,
+			},
+		},
+	],
 };