How to set the width of a Client Side Extension column?

Bitbucket Development Bitbucket Server
1

Hello,
I’m updating a Bitbucket add-on to Bitbucket 8 and I’m using Client Side Extensions CSE the first time. I need a custom-column in pull-requests and can achieve this with the following code:

import {ButtonExtension} from '@atlassian/clientside-extensions';

/**
* @clientside-extension
* @extension-point bitbucket.ui.pullrequest.commits.table.column.after
*/
export default ButtonExtension.factory((pluginApi, context) => {
    // Visiblity depends per row, but for demo is always disabled.
    const isHidden = true;

    return {
        hidden: isHidden,
        header: 'My Header',
        iconBefore: 'page',
        label: 'My Label',
        className: 'my-class',
        onAction: () => {
        },
    };
});

This works, but the column is unexpectedly wide, it has a (implicit) width of 320px. I like to have the width set to 80px. Until now I haven’t found any way to configure this statically in the CSE code or any CSS.
More background:
CSE renders the column always, but only if isHidden is false a DIV inside the TD is created. The className is set only to that DIV, but not for the empty TD nor the header TH, so creating a CSS like the following doesn’t work:

/* Doesn't work: */
.my-class {
    width: 80px;
}

I can use a MutationObserver, but this results in a flicker.
My questions are:

  1. How to set the width of a CSE-column statically?
  2. Ans aside from that: Can I hide/show the CSE-column itself dynamically?

(I filed this question first here How to set the width of a Client Side Extension co..., but that seems to be the wrong location)

Kind regards,
Jo

2

You can try the CSS solution like this:

.my-class {
   width: 1%;
   min-width: 80px;
}

Demo: Edit fiddle - JSFiddle - Code Playground

3

Because the class is not set in the TH nor TDs at the time Bitbucket renders the column, defining a CSS unfortunately doesn’t solve this. I’m looking for a solution that sets the class defined in the CSE-button at the time Bitbucket renders the column to the column’s TH and TD.
Kind regards, Jo

4

If this looks like a bug, and I think it is, I would suggest reporting it under the BSERV Issue Navigator - Create and track feature requests for Atlassian products.

Please provide information about what Bituvkcet and CSE versions you are using.

Thanks,
Maciej