Weird white zone at the left of app iframe

Since last week all apps now have weird empty white zone at the left of app iframe (not part of iframe) and it looks really weird for apps that have not white background at that area, like Tempo and many other apps: Monosnap

Do people from Jira know about this bug? And when could we expect the fix?

1 Like

Hey @anton2 seems to be intentional and not a bug: Change Notice - Padding update for Jira Cloud navigation UI - Atlassian Developer Blog

But it does mention it is a temporary fix.

3 Likes

Thanks! Will definitely subscribe to their blog.

…to ensure that our sidebar does not interfere with how vendors want to build their embedded products

As a vendor I can add my own left margin inside the iframe if I want. Now EVERY app has this space, and it looks horrible in certain cases, e.g. when I want to cover my whole app with a dark blanket under modal etc.

TBH I don’t get why Atlassian is rolling such changes to production, and only then asking for feedback…

1 Like

Totally agree, let vendors set spacing by themselves, if they need.

Btw the modals look awful now(( didn’t noticed that before: Monosnap

In my case modals & general page look awful now… is it possible to apply Custom CSS so i can fill the colour so at-least my page look good…

1 Like

Well in fairness to Atlassian - you’re not using Connect dialogs so the blanket won’t cover the entire screen… Unfortunately Atlaskit isn’t Connect aware which causes some pain points (or should that be that Connect isn’t Atlaskit aware?).

You’ll have to add a dialog module to your descriptor and trigger it, have that end point render the dialog (without the blanket).

<offtopic>
I think a lot of apps are not using Connect dialogs and there are pretty good reasons not to do so, at least in my experience:

  1. They’re slooooooow to open compared to “inside-the-iframe-dialog”, even if they’re properly cached.
  2. It’s a little pain in the back to efficiently communicate between dialog and your main window, usually causing a lot of data duplication, sync problems, unnecessary fetching etc.
  3. Managing every dialog in descriptor is a lot of additional effort, unless you have “one-dialog-to-rule-them-all” approach - but then you probably have a lot of resource overhead.

</offtopic>

Anyway, I was totally fine with opening my dialogs inside the main iframe, at it looked and worked pretty nice before this padding change. Seems like a lot of folks feel the same way.

3 Likes

Totally agree with all points, we don’t use Jira dialogs for the same reasons.

I think there a lot of reason to remove the new spacing after menu.

Totally agree that the white space bar looks like from the other world…
Atlassian has put so much effort to polish the Cloud UI and now introducing quite a weird 20 pixels white bar that ruins this effort.

The blog post mentioned above had an email address specified for suggestion/recommendation and I sent one but got no reply for more than a week…

So, I copied the email here to hopefully get more attention:

I perfectly understand why you added that 20px padding as we were experiencing the same annoying left panel opening when moving mouse near to the panel’s border.

In ActivityTimeline for Jira Cloud app, we implemented 20px border of the color of the left panel within the app’s frame that was mimicking your current fix.

That looks much more natural and does not add a white separator between Jira’s panel and app’s left side panel:
image

So, the recommendation is to make the white bar of color of the let panel, and the change will be really simple for you - just change one CSS on your side:

Change this:

#content>div>.ap-container {
   padding-left: 20px;
}

to this:

#content>div>.ap-container {
   border-left: 20px solid rgb(7, 71, 166);
}

I believe that will look much more better for any app that have gray navigation panel at the left side or some controls as it will look just like the extension of the left panel.

Hope you could consider this suggestion!

Expanded left menu:
image

Oleh

Hi everyone,

Really appreciate the discussion that’s happening here. My name’s Matt and I work on the product management team for Jira Cloud, specifically in the findability & navigation space. As mentioned in the blog post, this change is intended to be a short-term and interim solution that we felt would be the most acceptable tradeoff to make given our current constraints.

I’ve forwarded the suggestions mentioned to our designer for future consideration. We are very early in our explorations and design thinking of how we’ll tackle this in the future. While I can’t commit to an exact date of when we’ll have something ready, I am more than happy to book some time to chat with our community of app developers to better understand the needs with respect to Jira’s navigation UI. I feel very strongly about bringing you folks along the journey that we’re about to embark on to make our navigation awesome.

Please stay tuned for additional comms from me. I’m in the midst of sorting out my calendar and will come back to this group with availability on when we can chat further.

Cheers,
Matt

2 Likes

Hi @mtse, any update on this issue? The margin is still there…

Hey Remie,

My team is looking into this and we might have a solution we can do as a patch for now. I’ll share back in a week.

We are also working on a new navigation system that should help alleviate this pain point. For more info, please visit: https://community.developer.atlassian.com/t/new-navigation-ui-coming-to-jira-confluence-cloud-sign-up-for-early-access/32348

Cheers,
Matt

Looking forward to the patch!

I know about the upcoming changes, but the last update was from Sept 9, so I just wanted to give you a nudge because this is still hurting the user experience. Atlassian may not feel it as bad as vendors due to lack of in-house connect apps, but we deal with it on a day-to-day basis.

Hi everyone,

We’ve released a patch that should address the added white padding introduced previously. If you have any other problems, feel free to reach out.

Cheers,
Matt

2 Likes

It looks like the padding is back and now on both sides of the page. Or perhaps this is something different?

Note that this is a screenshot from a project page, maybe that’s why it’s there?

Hey @MichaNykiel,

Thanks for raising this. This looks like something different to the padding we initially introduced on the left of the iFrame. I’m checking internally to see if there were any changes by another team that might have caused this. Are you seeing this on all the pages or just Agile Poker?

Looks like it’s everywhere:

To be honest it may have been there forever, I just noticed it recently because we added project page to our app.

@mtse
Yes, the bug is here again. But now I see weird additional padding on the right for smaller screens Monosnap

Hey @anton2, apologies for the late response. After more investigation about this, it appears that the padding issue you referenced in Monosnap is no longer there. Can you please confirm?