nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

"Active sprint" window - expand story list to full width?

SG_67kr1p

The main page of "Active sprints" only utilizes half the width, which truncates the story titles. Is it possible to expand to the full width? Thank you.

Example:

"Story Title cuts off..."

Need:

"Story Title cuts off so not able to see the full description"

Accepted answers

All comments

Trudy P Claspill

Hello @SG

Can you provide a screen image of what you are seeing? When you say "half the width" to what space are you referring?

In my Chrome browser when I view an Active Sprints page the board columns expand to fill the width of the browser window.

SG_67kr1p

Hi Trudy, thanks for the response! Hopefully this helps, if not I can provide more details.

2024_01_04_09_51_38_GRS_Board_Agile_board_JIRA_cutoff sprint.png

Trudy P Claspill

Hello @SG

I have not been able to replicate what you are seeing.

Does this happen for all users?

Have you tried different browsers or an Incognito Chrome window?

Can you provide a full screen image that shows the entire Jira application. We don't need to see the URL of the page.

SG_67kr1p

Hi Trudy. Yes, all users. Chrome, Chrome Incognito and Edge all display with half the width of the page not utilized.

JIRA_width issue.png

Ricardo Severo

When we started increasing the title of Issues with the description of Subsystems and Features, we also noticed this problem here.

After some research, I saw that the bug is still open and has not been resolved.

However, we found a workaround that may most of the users of Google Chrome.

On the Active Sprint (Board) page, open the browser console and include the following script:

// Function to apply the style

function applyStyle() {

document.querySelectorAll('.css-1s193e4').forEach((div) => {

div.setAttribute('style', 'max-width: 100%!important');

});

}

// Observer to monitor changes in the DOM

const observer = new MutationObserver(() => {

applyStyle();

});

// Observer settings: observe changes in children and subtrees

observer.observe(document.body, { childList: true, subtree: true });

// Apply or style initially

applyStyle();

You can see that the script above solves the problem, however, it would need to be run every time you enter the page. To do this, you can use a third-party extension so that this script runs automatically every time you access the Board.

Extension: https://violentmonkey.github.io/

Simply install the extension in your browser, include the script and activate it to run on the Board page.

I hope it helps.

Abed Shaaban

I had to update it to the following for it to work. Some style class names changed.

```

function applyStyle() {
document.querySelectorAll('._1ul91qnl').forEach((div) => {
// change 'width' to 'height' / 'min-width' / etc. if needed
div.style.setProperty('width', '300px', 'important');
});
}

const observer = new MutationObserver(() => {
applyStyle();
});

observer.observe(document.body, { childList: true, subtree: true });

applyStyle();
```

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

jira

cloud

jira-cloud