From 758ddf0639331304b563503520c4632070d0ef4c Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Tue, 27 Feb 2024 09:53:15 +0100
Subject: [PATCH] objects: add separator between match field selector and
 description

Make it easier to see that match-field selector and its description
are separate. For that we have to make the top level docked item a
'toolbar'.

Reported-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 js/ObjectGroup.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/js/ObjectGroup.js b/js/ObjectGroup.js
index 8c72dd2..4fc74ed 100644
--- a/js/ObjectGroup.js
+++ b/js/ObjectGroup.js
@@ -40,6 +40,7 @@ Ext.define('PMG.ObjectGroup', {
 
 	if (me.ogdata === undefined) {
 	    me.down('#oginfo').update(me.emptyText);
+	    me.down('#separator').setHidden(true);
 	    me.down('#modeBox').setHidden(true);
 	    me.down('#whatWarning').setHidden(true);
 	} else {
@@ -49,6 +50,7 @@ Ext.define('PMG.ObjectGroup', {
 
 	    me.down('#oginfo').update(html);
 	    me.down('#ogdata').setHidden(false);
+	    me.down('#separator').setHidden(false);
 	    let modeSelector = me.down('#modeSelector');
 	    modeSelector.suspendEvents();
 	    me.down('#modeSelector').setValue(mode);
@@ -228,9 +230,13 @@ Ext.define('PMG.ObjectGroup', {
 	me.dockedItems.push({
 	    dock: 'top',
 	    border: 1,
-	    layout: 'hbox',
+	    layout: {
+		type: 'hbox',
+		align: 'stretch',
+	    },
 	    hidden: !!me.hideGroupInfo,
 	    itemId: 'ogdata',
+	    xtype: 'toolbar',
 	    items: [
 		{
 		    xtype: 'container',
@@ -274,6 +280,11 @@ Ext.define('PMG.ObjectGroup', {
 			},
 		    ],
 		},
+		{
+		    xtype: 'tbseparator',
+		    itemId: 'separator',
+		    hidden: true,
+		},
 		{
 		    xtype: 'component',
 		    flex: 1,