Can I make the test details text area fields bigger?
Hi all,
I use Zephyr Squad 4.6.3 on Jira 7.13. When filling out test steps for a test, the "Test Details" section is quite small, and the text areas where I enter step information (test steps, test data, and expected results) are even smaller. I need to do a lot of mouse scrolling to read or update these fields, especially if I include a Jira "noformat" section. Below is a screenshot from my browser, showing the test details area highlighted in a blue rectangle.
You can see that relative to the page itself, the area where I spend much of my time is quite small:
I recently discovered the "Large View" icon, which does make the Test Details area bigger, but, disappointingly, not by much. Here's as screenshot of the same page from above, where the white rectangular area is the "Large View" overlay:
While an improvement over the default view, it's still quite cramped, and I find myself still needing to do a lot of horizontal scrolling.
Is there a better way? How do other people deal with this issue? Am I doing something wrong, or could it be that something in JIRA is causing the test details to be rendered unexpectedly small? Is there a different tool I could use to update test steps without using a browser, or perhaps a different way to edit or read test steps?
I would love to hear if others have experienced this, and if so, how to make it easier to work with test steps. Thank-you!
This is a work-around, but I was able to make the fields bigger by overriding the CSS layout in Jira using the open-source Stylus project. Stylus is free and available as a Firefox extension and Chrome extension. It allows you to can change elements on a web page, move them around, or hide them altogether. It works well, and is easy to toggle on and off as needed. But it does need you to fiddle with CSS elements in the browser developer tools (press F12 and go to the 'Elements' tab).
To illustrate, here's a screenshot of a Zephyr test case as it renders in my browser by default. The blue highlight shows the boundaries of the test details area. Notice how Jira's sidebar on the right takes up a third of the page.
After some experimentation in the browser developer tools, I made the test details area and its fields larger. The blue highlighted area shows the updated boundaries of the test detail area. The right-hand Jira sidebar is hidden, along with clutter in the top bar. I considered hiding the Zephyr attachments column, but decided to shrink it for now.
This feels like a good improvement to me. Everything works as expected, and I can read and write more test information. Only visual elements in the browser's rendering changed. If you're technical and would like to try it for yourself, below is the Stylus configuration that created the expanded view shown above. The comments at the top give links to more information and examples. In the middle are some general styles I made to make Jira friendlier to humans. The items specific to Zephyr test cases are at the bottom.
/* Basic CSS tutorial: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/ */
/* Advanced CSS: http://lesscss.org/ and http://stylus-lang.com/ */
/* Documentation for writing styles: https://github.com/openstyles/stylus/wiki/Writing-styles
and for UserCSS https://github.com/openstyles/stylus/wiki/UserCSS-authors */
/* Make the JIRA modal "Edit" pop-up window wider and taller */
#edit-issue-dialog {
width: 95% !important;
margin-left: -48% !important;
margin-top: -20% !important;
}
/* Hide logo, feedback, and help links */
.aui-header .aui-header-logo img {display:none}
.aui-header .aui-icon {display:none}
.aui-header .aui-header-logo a {padding: 0 0px;}
.aui-header .aui-header-logo .aui-header-logo-text { display:none}
/* Make right-hand sidebar smaller with less padding */
/* Field names (Assignee, Reporter, etc) */
.item-details dl > dt {
width: 70px;
}
/* Field values (assignee names) */
#viewissuesidebar {
width: 190px;
padding-left: 0px;
}
/* Edit boxes in JIRA - these seem to be named dynamically */
#description-wiki-edit > #description { min-height: 600px !important;}
#mce_0_ifr { height: 600px !important;}
#mce_5_ifr {height: 600px !important;}
#mce_6_ifr {height: 600px !important;}
#mce_7_ifr {height: 600px !important;}
#mce_8_ifr {height: 600px !important;}
#mce_9_ifr {height: 600px !important;}
#mce_16_ifr {height: 600px !important;}
#mce_10_ifr {height: 600px !important;}
#mce_12_ifr {height: 600px !important;}
#mce_14_ifr {height: 600px !important;}
/* Reduce padding in issue list */
.list-results-panel .list-panel {
padding: 0px 10px 0 0;
}
panel .issue-list > li {
padding: 0px 0 5px 0px;
}
/* Shrink the search results column... */
.aui-item.list-results-panel { width: 140px !important;}
/* Hide the sidebar with People, Date, Agile information */
#viewissuesidebar {display:none}
/* Hide announcement banner */
#announcement-banner {display:NONE !important}
/* Make Zephyr test step frame taller */
/* Outer frame must be big enough for inner table...*/
#view_issue_steps_section {height: 950px}
/* Make inner frame a little bit smaller than the outer frame*/
#vanillaGridWrapper > div.table-container-wrapper{max-height: 850px;}
/* Shrink the attachments column*/
#unfreezedGridBody > div.row-column.grid-column.attachmentsMap-column{min-width:20px; width:20%}
#unfreezedGridHeader > div.grid-column.attachmentsMap-column{min-width:20px; width:20%}
The above example is for my tastes and needs. Experiment with the numbers and CSS elements to find what works for you. Hopefully others will find this post useful. It's a bit of a browser hack, but it works for now, until a more elegant or official solution is available.
