COD-1345

[meichend]

Description

Make scope text turn into ellipsis on the left

Type of Change

• Tech Debt (refactoring, unit tests, CI changes, pre-commit hooks, etc)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

🖖🤚

Test Configuration:

• CCL version/branch: 1.X
• API version/branch: 1.X

Checklist:

• I have performed a self-review of my code
• I have used codex to provide context, particularly in hard-to-understand areas
• Any dependent changes have been made available in downstream modules

Screenshots:

[linear]

COD-1345 Kebab menu isn't shown on context details page when file scope is long & view is narrow

Screen Shot 2022-07-13 at 10.14.36 AM.png

Leads to user confusion because they don't have any options about what they can do with their context (i.e. delete / copy link )

Sol'n:

Truncate inline scope starting from the left in order to show kebab menu at all times.

[derrickpersson]

😞 Umm doesn't look like it works for shorted files unfortunately...

[derrickpersson]

Not sure we need the margin-left 0 here. Should already be 0?

[cpul]

The reason your filename is far off from the left is because of this direction property.
I believe what you need to do here is to rearrange the styles to get the desired effect.
Essentially, you want something like this (I'll use a basic example of the above):

<div class="context-metadata">
  <div class="context-metadata__wrapper">
    <div class="context-metadata__header"> <-- remove ellipsis stuff; make this a column-direction flexbox
      <AuthorDetails />
      <InlineScope /> <-- apply the ellipsis and direction styles to the wrapping parent element around the link here
    </div>
  </div>
</div>

[derrickpersson]

Chris === CSS Guru 😁

[derrickpersson]

Looks great! 😎