Fixed css issues related to datatype alongside column name.

Author: anilsahoo20

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.js

@@ -42,14 +42,13 @@ define('pgadmin.node.column', [
       sqlAlterHelp: 'sql-altertable.html',
       sqlCreateHelp: 'sql-altertable.html',
       dialogHelp: url_for('help.static', {'filename': 'column_dialog.html'}),
-      // Overriding getNodeLabel to add datatype besides column name
-      getNodeLabel: function(data) {
+      // Overriding getNodeInfoLabel to add datatype alongside column name
+      getNodeInfoLabel: function(data) {
         let show_column_datatype = usePreferences.getState().getPreferences('browser', 'show_column_datatype');
-        let label = data.label;
         if (show_column_datatype?.value && data.datatype && data.displaytypname) {
-          label += ` ${data.displaytypname}`;
+          return data.displaytypname;
         }
-        return label;
+        return null;
       },
       canDrop: function(itemData, item){
         let node = pgBrowser.tree.findNodeByDomElement(item);

web/pgadmin/browser/static/js/node.js

@@ -99,8 +99,13 @@ define('pgadmin.browser.node', [
       // during the copying process of any node.
       return d;
     },
-    getNodeLabel: function(data) {
-      return data.label;
+    getNodeInfoLabel: function(data) {
+      // Adds an extra informational label appended to the node label.
+      // Override this function to return a string to display, or null for no extra label.
+      if(data.info_label) 
+        return data.info_label;
+      else
+        return null;
     },
     hasId: true,
     ///////

web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx

@@ -112,6 +112,9 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
           <span className='file-name'>
             { _.unescape(this.props.item.getMetadata('data')._label)}
           </span>
+          <span className="text-muted" style={{fontSize: '0.9em', whiteSpace: 'nowrap'}}>
+            {_.unescape(this.props.item.getMetadata('data').info_label)}
+          </span>
           <span className='children-count'>{itemChildren}</span>
           {tags.map((tag)=>(
             <div key={tag.text} className='file-tag' style={{'--tag-color': tag.color} as React.CSSProperties}>

web/pgadmin/static/js/tree/tree_nodes.ts

@@ -59,8 +59,9 @@ export class ManageTreeNodes {
 
   public addNode = (_parent: string, _path: string, _data: []) => new Promise((res) => {
     _data.type = _data.inode ? FileType.Directory : FileType.File;
+    _data._label = _data.label;
 
-    _data._label = pgAdmin.Browser.Nodes[_data._type]?.getNodeLabel(_data);
+    _data.info_label = pgAdmin.Browser.Nodes[_data._type]?.getNodeInfoLabel(_data);
 
     _data.label = _.escape(_data.label);