Share via

UI broken in "New Teams" experience for OneDrive file view

Anonymous
2023-12-14T22:32:49+00:00

Like the title says, the UI is broken in the OneDrive view. This is happening on my vertical monitor. From what I can tell by resizing the window, this happens for any width less than or equal to 1080. When I expand it a bit more than that, the UI returns to how it should normally function. My guess is there's a media query that doesn't work below that width. See the attached image for displayed problem. Should be easily reproducible.

Microsoft Teams | Microsoft Teams for business | Files | Access OneDrive files

Locked Question. This question was migrated from the Microsoft Support Community. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

0 comments

4 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Anonymous
    2023-12-15T05:08:08+00:00

    Dear Charles Graham2

    Thank you for posting in our community.

    Based on your description, we would like to gather more information with you so that we can clarify your situation.

    1. We didn't receive your attached iamge. Can you re-share it to us? You can click the image icon to upload the screenshot to us in here.
    2. May I know only OneDrive files in Team have this behavior? What about other files? Such as Word or Excel files?
    3. Does this situation also happened in Team online?

    We look forward to hearing from you.

    Best regards

    Stacey

    0 comments
  2. Anonymous
    2023-12-15T14:25:10+00:00

    It's not from viewing a file, it's when i click the OneDrive menu option from the left (previously called Files).

    I just opened teams online and the OneDrive button there does have the same issue.

    I just did an inspect on the web version and here's what i found:

    When the width is less than 1080, the following happens:

    The problem stems from when the lg class is added to #appRoot (larger than gives it xlg)

    The div that has a class name that contains 'odLeftNavInline' gets two divs added as children that are preventing the UX from responding.

    • overlay_b92f52e5
    • panelSpacing_b92f52e5

    The menu #spartan-left-nav gets a class change that sets the css bottom to 15px instead of 0.

    • It also gets set to a position: fixed which causes it to appear over the core_1a3eda5a class div.

    (edit)

    Any time my mouse enters the spartan-left-nav, the overlay is re-inserted and causes the problem again.

    If i delete the two children and set the spartan-left-nav class back to the same class as when extended the UI looks like i would expect it to

    Image

    0 comments
  3. Anonymous
    2023-12-25T09:20:17+00:00

    Dear Charles,

    Thank you for the detailed reply.

    You mentioned the problem happened on Teams Online as well, the problem might be related to the specific account or the tenant.

    Give this situation, we do understand the inconvenience caused and apologize for it. Since this issue may be related to the account, so this need to be checked from the background. I suggest you contact the administrator in your company if you aren’t the administrator and follow the steps in the article to open a ticket, this is a most efficient way to fix the issue in your environment.

    Appreciate your understanding.

    Sincerely,

    Jazlyn | Microsoft Community Moderator

    0 comments
  4. Anonymous
    2023-12-28T15:21:09+00:00

    Our admins do not control the layout. This only started happening when the new "feature" was added to teams. Perhaps relay this information to the dev team instead of customer service.

    0 comments