I need help with customizing my JIRA timeline chart to show information about epics in progress. When an epic spans multiple releases, there is enough space on the timeline bar to display all relevant details. However, if an epic only spans one release, the limited space cuts off some information (such as "Open" in the example below):
https://i.sstatic.net/lpZ4C.png
In cases where space is restricted, I would like to hide the JIRA ticket status but keep other details visible. Here is an example of how I envision it:
https://i.sstatic.net/MCwzX.png
Below you can find a snippet of sample code that demonstrates the layout:
.accordion {
border: 1px solid black;
width: 600px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.accordion-content {
flex: 1 1 auto;
}
.epic-summary {
flex: 1 1 auto;
}
.timeline-bar {
border-right: 1px solid black;
display: flex;
align-items: center;
}
.timeline-bar>div {
padding: 0 5px;
}<div class="accordion">
<div class="accordion-content">
<div class="timeline-bar">
<div>JIRA-1234</div>
<div><img alt="Url Icon" width="25" src="https://cdn.iconscout.com/icon/premium/png-256-thumb/url-17-695478.png?f=webp&w=256" srcset="https://cdn.iconscout.com/icon/premium/png-256-thumb/url-17-695478.png?f=webp&w=256 1x, https://cdn.iconscout.com/icon/premium/png-256-thumb/url-17-695478.png?f=webp&w=512 2x"></div>
<div class="epic-summary">EPIC: This is some description</div>
<div>In progress</div>
</div>
</div>
<div className="accordion-toggle">
<img src=" https://cdn-icons-png.flaticon.com/512/2985/2985150.png " width="25" height="25">
</div>
</div>If you have any suggestions on how to achieve this desired result, please let me know!