long title button overlap resolved

[GarvitSinghal47]

Fixes #11086

Summary

changes the default old breakpoint for the numBarActions to more suitable one.
also added a filter of text truncation on long title for different breakpoint to prevent button issue as the size of the text content increases.

After :

Transcripts.-.MIT.Blossoms.webm

…

References

…

Reviewer guidance

…

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b4.dev0_git.40.gd1cf11fa.pex
Windows Installer (EXE)	kolibri-0.16.0b4.dev0+git.40.gd1cf11fa-unsigned.exe
Debian Package	kolibri_0.16.0b4.dev0+git.40.gd1cf11fa-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b4.dev0+git.40.gd1cf11fa-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b4.dev0+git.40.gd1cf11fa-0.1.0-debug.apk
TAR file	kolibri-0.16.0b4.dev0+git.40.gd1cf11fa.tar.gz
WHL file	kolibri-0.16.0b4.dev0+git.40.gd1cf11fa-py2.py3-none-any.whl

[LianaHarris360]

Hi @GarvitSinghal47, thank you so much for working on this. It looks good, I just had a few comments to add in. Also, in the above References section, if you add in the line Fixes #11086, once this pull request is merged, it will automatically close that issue!

[LianaHarris360]

This if statement could instead check if this.windowBreakpoint is less than or equal to 2 as a small refactor.

[GarvitSinghal47]

Ah that will not work as when the size of breakpoint will go less than 1 we want to show only one icon the refactor you are saying will make two icon to show in that case but originally intended was 1 .

we can change it to get value greater than equal to 1 or less than equal to 2 but i think that will not be of any use.

[LianaHarris360]

Okay, I understand it now, I overlooked that detail before :)

[LianaHarris360]

More out of curiosity, I'm wondering how the numbers 50 and 70 decided on? In the included picture, the windowBreakpoint is 6, this title has two more characters to display, and seems like it should fit, but it is truncated instead.

[GarvitSinghal47]

i have just added by manually applying it by decreasing the size of window to various breakpoints for large screen when it is greater than 2 breakpoint means till 3 to 6 i have make 70.

it will show good in case of 6 breakpoint but when we take it to 3 or 4 any size of text above or about 75 can create problem of button overlap again.

we can also change it for breakpoint 5 and 6 as well seperately like about 80 to 85 (a it will be safe) but the inital thinking of mine is to cover approx 50-60 % of the header by title in case of breakpoint 5 and 6 .

[LianaHarris360]

Thank you for the explanation, that makes sense to me! Now that all the tests pass, this should be good to merge in!

[MisRob]

I'd like to add that tests from kolibri/plugins/learn/assets/test/views/learning-activity-bar.spec.js are failing and will need to be fixed/adjusted

[LianaHarris360]

Thanks for catching that @MisRob. Looks like a problem with value.length being undefined within the filter truncateText

console.error
      TypeError: Cannot read properties of undefined (reading 'length')
          at truncateText (/home/runner/work/kolibri/kolibri/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue:4519:19)

More info about Kolibri tests can be found here.