Skip to content

[Bug]: Docking UI Mode control panel to right side defaults to bad truncation of text #33930

Open
@agg23

Description

@agg23
Contributor

Version

1.49.1

Steps to reproduce

  1. Open UI Mode/trace viewer
  2. Click on the sidebar toggle on the middle right side
  3. Notice that all of the text is cut off and not nicely truncated

Expected behavior

Strings should nicely truncate, and a minimum size should be set if this can't be met.

Actual behavior

Image

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (6) x64 Intel(R) Core(TM) i5-9500 CPU @ 3.00GHz
    Memory: 2.76 GB / 15.81 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.95.2 - C:\Users\agastineau\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD

Activity

self-assigned this
on Dec 10, 2024
reyrodrigez

reyrodrigez commented on Jan 17, 2025

@reyrodrigez

hey @agg23 I'm happy to raise a PR for this

agg23

agg23 commented on Jan 17, 2025

@agg23
ContributorAuthor

Thanks @reyrodrigez. Be my guest

Zemotacqy

Zemotacqy commented on Jun 2, 2025

@Zemotacqy
Contributor

Hey @agg23 , Can you please confirm if this behaviour is as per your suggestions mentioned here?

video1198040189.mp4
agg23

agg23 commented on Jun 2, 2025

@agg23
ContributorAuthor

@Zemotacqy, that was the general idea, yes.

Zemotacqy

Zemotacqy commented on Jun 4, 2025

@Zemotacqy
Contributor

Nice. @agg23 , While a working solution has been created. Wanted to discuss a couple of points:

  • This responsive tab design could be applicable in multiple other places where window resize squashes tab items. IMO, we should create/update a react component that renders such tab list items in a similar responsive manner.
  • In this particular case, facing extra impediments due to additional gap and padding css directives. This complicates the resize width calculation logic. Hence, I want to try updating the css along these lines and then implement the resize behaviour first.

Let me know your thoughts, or if you have better approach in mind, would be happy to implement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @agg23@reyrodrigez@Zemotacqy

    Issue actions

      [Bug]: Docking UI Mode control panel to right side defaults to bad truncation of text · Issue #33930 · microsoft/playwright