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

[agg23]

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

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

[reyrodrigez]

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

[agg23]

Thanks @reyrodrigez. Be my guest

[Zemotacqy]

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

https://github.com/user-attachments/assets/c132fe30-dd12-4178-9a56-8ee119c7d076

[agg23]

@Zemotacqy, that was the general idea, yes.

[Zemotacqy]

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.

[agg23]

This isn't high enough priority to keep alive. Closing