Hide right panel in issue view

[Jason Burdey]

Is it possible to hide and/or shrink the right panel when viewing an issue in issue view? Sometimes I just want to focus on the description and the issue but the right panel is taking up alot of room (1/3 of the page width)

[Liron · Accepted solution]

Hi all,

We just released the ability to resize the right hand sidebar in the new issue view.

Hope this solves the problem!

Cheers,

Liron

[Andrew Tolley]

Great - thank you!

[An Vo Nguyen Tam]

Cool, it's much better now <3 

[rgi_manning]

Agreed!   Thank you very much!  This is a great improvement.

[Nancy Mooney]

Thank you.

[Bell Witkowski]

Would it be possible to also add expand/collapse to the right hand panel in the future? The resize is great but my personal preference is to use expand or collapse maximizing my total screen area when I write. Thank you in advance for your work.

[Liron]

yes I have opened a JAC ticket for this. We will be exploring that in the future.

Thanks all!

https://jira.atlassian.com/browse/JRACLOUD-79327

[Kalpesh Panchal]

The right hand pane information is not relevant while working on the issue where you need the full real estate of the page to put in your content.  It is just in the way.

I am constantly scrolling left and right to see the content I put in.

Normally on a high resolution monitor this would be ok, on a laptop, there is a little screaming involved.

It should be collapse-able.

[Tom Buttner]

This change isn't visible to me on 8.20.11. What version of Jira do I need to ask my IT team to update to to pick up this change? 

[Liron]

@Tom Buttner - apologies for not being clearer - this change was rolled out in Cloud. 

[Boris Bayle]

Same for me. please add collapse/uncollapse for the right panel.

I kill my eyes with this right panel I dont need when editing the description..

[Nancy Mooney]

I second the motion on hiding the right panel. It is massive and not necessary to view all the time. It makes the main center panel much too limited (sorry this is not an answer - just hoping Atlassian takes notice).

[Dean Capp]

Yes, what a travesty of design! What were people thinking - were they thinking? and did they even test this???

[rgi_manning]

Just started using JIRA Cloud, and that panel has got to go... using up way too much real estate!

[Ingrid Sluimer]

Company just switched to cloud and I'm unpleasantly surprised.
Why on earth would anyone need a sidebar with issue details in an issue-detail view?

But I'm not very hopeful, looking at the age of this thread.
Workarounds don't seem to work for me, we're pretty locked down in the browsers here.

[quang.huynh]

For those who're still finding this, here is my solution: 

Add a bookmark in your browser, let's say it "Toogle"

In the address, enter this

javascript&colon;jQuery("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parent().toggle();

Replace "&colon;" with ":" without quotes.

Now when you open a ticket, click on it to show/hide panel as needed

[Toni Jordà]

Thanks, Quang, it works fine!

[lana.went]

Hey Quang - were you able to do this on Chrome recently? My Chrome won't seem to allow me to add such snippets as bookmarks - it expects valid URLs?

[quang.huynh]

Replace the part "&colon;" with ":" (without the quotes) so it looks like this

[lana.went]

OMG Quang - it worked - you've just dramatically improved my life - THANK YOU!!! :D

[An Vo Nguyen Tam]

gosh you're a genius :)))) can't say how much I love this >.<

[Jeffrey Simon]

What a great workaround! Perfect!

[Deanna_Mirra]

Thank you patron saint of Jira, Quang!!

[Colin Starker]

This fix is no longer working.

[Dirk Loeckx]

The following code seems to work (you still have to replace the &colon; with a real colon:):

javascript:(function(){el=jQuery("[data-testid='issue.views.issue-details.issue-layout.container-right']")[0];el.style.display="none";})()

Note that it no longer toggles, but just removes the sidebar.

PS: This can be extended to remove other parts of the view. As I wanted to use it to print JIRA issues a little bit nicer, I've created a bookmarklet with the following code (prepend it with 'javascript&colon;' to make it a bookmarklet):

(function(){
  let queries = [
    "[data-testid='ContextualNavigation']",
    "[data-testid='issue.views.issue-details.issue-layout.container-right']",
    "[data-component-selector='jira-issue-view-common-component-resize-handle']",
    "[id='ak-jira-navigation']"
  ];
  for (let i = 0; i < queries.length; i++) {
    el = jQuery(queries[i])[0];
    el.style.display = "none"; 
  }
  window.print();
})() 

[Stijn Beeckmans]

https://jira.atlassian.com/browse/JSWCLOUD-21242

[Matt Lavis]

Stijn, you are a star. This had been pretty much unusable.

[Zack Morris]

Wow that's really cool! I've tried to reply to this eleventeen times, but there's a bug in this forum that replaces javascript colon with &colon; so there's no way for me to paste the code verbatim, even in a code block:

javascript:

And I can't reply to the linked issue, so here's a slight modification that also sets the css max-width to 25% to take up less space while shown, and I've included a second one that only changes the max-width but doesn't toggle visibility:

https://snippi.com/s/6nqpmo9

Just select one of the snippets and drag it over your browser's bookmarks bar at the top of the window (you may need to click Chrome->View->Always Show Bookmarks Bar).

Then you can right-click the bookmark, edit its URL, and change '25' to your desired percentage.

There's a bit of errata around this due to the unfortunate decision 25 years ago to use % to url encode characters in the browser, so:

e.style.maxWidth='25'+String.fromCharCode(37);

means '25' + '%' and is necessary for the bookmarklet to work in Safari. Other strings like '200px' just work without the +String.fromCharCode(37) portion.

I'm still looking for a way to run the bookmarklet automatically, but I don't think it's possible without a browser extension.

Tested in Chrome, Firefox and Safari.

[42Chris]

ZACH YOU ARE A GENIUS... Thank you. Now I can get some sleep at night. My toggle button has arrived and it works well. Thank you saviour of the internet.. may Karma give you a wonderful life!

[Daniel Miller]

Thanks, works like a charm! For any new arrivals: create the bookmark (ideally on the top bookmark bar) from one of the snippets, editing the "url" as desired for a different percentage. Navigate to a Jira ticket and then invoke the new bookmark. Your browser does not leave the JIRA ticket - instead, it imposes the Javascript fragment on the JIRA ticket, reducing or hiding the right panel.

[Nancy Mooney]

This is a thing of beauty. Already shared with coworkers. Thank you Zack!

But seriously JIRA - fix this!

[ysabelle.torres]

Thank you so much, Zack! What a saviour :) 

[Andrew Tolley]

Just another grateful user - so much better to be able to hide the panel so I can focus on the important stuff!

[Antonio García]

It's incredible that users have to figure out solutions on their own instead of Atlassian providing them.

Just terrible.

[Toni Jordà]

Great contribution, Zack

Thanks a lot!

[Paul Benson]

Yeah I really wish this was a feature in JIRA. I absolutely hate the right-hand panel because I can't shrink it. I just wish it operated like the left-hand panel with an arrow so I could collapse it or uncollapse it at-will.

[Marcelo Lourenço]

I created an extension to collapse/expand the right panel of Jira. Freeing up more space on the main panel. It will be useful until they implement this function in Jira.

https://chromewebstore.google.com/detail/occanfpdiglllenbekgbnhijeoincilf

[Daniel Miller]

Very disappointing and surprising. Just about every modern UI with sidebars gives the user some control over their display and sizing. Was this a purposeful "we know better than you the right way for you to work" decision, or an oversight?

[pvm30]

Almost impossible to use this the way it is right now, even more difficult if you have a small screen.

I don't want to have 40% percent of my view width completely squandered by something I don't need at all.

Having a button to hide this shouldn't be so hard.

Forcing everybody to have to deal with this kind of "mobile first" point of view sucks ...

[Dean Capp]

Why is this company worth so much again?

[Stijn Beeckmans]

Does anyone know of a ticket to change the width of (or hide) righthand sidebar?

I found in their CSS that they have set the width of this panel to 40%... 

Changing the CSS of the .hvyTRk CSS class to

{

    width: 10%;

    padding-right: 0

}

in Chrome dev tools shows a much better layout...

Shouldn't be that hard to fix @[deleted]...

[Mikael Sandberg]

The short answer is no, you cannot hide the right panel. I saw in another thread that Atlassian is working on changing the view a bit, but not sure if that includes being able to hide/change the size of the panels.

[Shashank.Mulay]

I too struggling. I need bigger description space. Right panel is not needed all the time. It is covering my half of the page.

[Prashant Tajne]

Ya...the description needs more space..

[Lincoln Yesire]

I create an extension to hide/show the right hand sidebar(or called panel)，maxmize the create issue dialog.You can toggle the status of right hand sidebar or create issue dialog by clicking the extension icon in corresponding view. In addition, the default keyboard shortcurt is CTRL+B (you can set the shortcut as your willing by extension manager). 

chrome: Better Jira Browse - Chrome Web Store (google.com)

edge: Better Jira Browse - Microsoft Edge Addons

I define "Better Jira Browse Status" as "the right hand sidebar/panel was hidden" and "the create issue pop up dialog/window maxmized", and the "not Better Jira Browse Status" as the opposite. Correspondly The icon with check mark of the extension stands for the "Better Jira Browse Status", The icon without check mark of the extension stands for the "not Better Jira Browse Status". The "Better Jira Browse Status" is on by default when extension is installed and will keep until you click to toggle it again. For convience, you could pin the extension so that you can click icon to toggle status easily, or of course you can use the keyboard shortcut.

Contact with me if you have any problem when you use the extension.

[Mary Van Nostern]

Please move https://jira.atlassian.com/browse/JSWCLOUD-21242 from Gathering Interest to Backlog.  There is plenty of interest ^^^^^ to be able to configure this OOTB for ease of usability.   Thank you! and my team of 800+++ thanks you!!

[Dean Capp]

Tx Zack!!! Atlassian, why couldn't you do this????

[Zack Morris]

A temporary solution is to create a browser stylesheet (I put mine in my home user folder ~/stylesheet-overrides.css) containing:

body > div.atlaskit-portal-container .hJPObX {
    max-width: 300px;
}

#jira-frontend .hxewZo {
    max-width: 200px;
}

/*
body > div.atlaskit-portal-container .sc-jhAzac:last-child, body > div.atlaskit-portal-container .dbCBBb:last-child, body > div.atlaskit-portal-container .hJPObX {
    max-width: 300px;
}

#jira-frontend .sc-jhAzac:last-child, #jira-frontend .dbCBBb:last-child, #jira-frontend .hxewZo {
    max-width: 200px;
}
*/

I don't know why the width is different in embedded mode (https://<organization>.atlassian.net/jira/software/projects/TPI/boards/4?selectedIssue=<issue>) vs zoomed (https://<organization>.atlassian.net/browse/<issue>) but at least it works.

Unfortunately this solution isn't future-proof (because the classnames may change next time Jira deploys their site) but it's easy enough to right click -> Inspect Element on the right sidebar, find the new classname(s) and update the stylesheet.

Maybe someone with better css skills can find more-permanent selectors. A few of my attempts are in the commented portion above :-)

[Stijn Beeckmans]

This doesn't work for me, 'cause I use the cloud version...

And class names seem to change every time i reload the page...

[Shivaraju Gowda]

Try disabling the "Jira labs" option in your Personal setting. This won't remove the right side information but will make it appear in the same panel as the description. 

[Colin Starker]

What are you talking about?